Oppaat Rollover-kuvan luomiseen Dreamweaverissa

Rollover-kuva on kuva, joka muuttuu johonkin muuhun kuvaan, kun asiakas tai asiakas siirtää hiiren sen päälle. Näitä käytetään yleisesti interaktiivisen tunnun, kuten painikkeiden tai välilehtien, luomiseen. Mutta voit luoda päällekkäisiä kuvia lähes kaikista.

Tämä opetusohjelma on suunniteltu auttamaan sinua luomaan Rollover-kuva Dreamweaveriin. Se on tarkoitettu käyttäjille, jotka käyttävät seuraavia Dreamweaver-versioita:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Tämän opetusohjelman vaatimukset

• DreamweaverYksi edellä mainituista versioista.
• Alkuperäinen kuvaVarmista optimoi tämä kuva. Tämä auttaa sivujesi latautumaan nopeammin.
• MuutoskuvaTämän kuvan pitäisi olla samat mittasuhteet kuin alkuperäinen kuva. Ja, kuten alkuperäinen kuva, pitäisi optimoida sivun latausaikojen auttamiseksi.
• Web-sivuTämä on HTML-sivu, jossa laitat rollover-kuvan.

Aloittaa

1. Aloita Dreamweaver
2. Avaa verkkosivu, johon haluat siirtyä

Lisää Rollover-kuvaobjekti

Dreamweaverin avulla on helppo luoda rollover-kuva.

1. Siirry Lisää-valikkoon ja alas kohtaan Kuvan kohteet alivalikon.
2. valita Kuvanmuutos tai Rollover-kuva.

Jotkin vanhat Dreamweaver-versiot kutsuvat sen sijaan Image Objects -työkalua "Interactive Images".

Kerro Dreamweaverille mitä kuvia käytetään

Dreamweaver ponnahtaa valintaikkunan, jonka kentät on täytettävä, jotta voit luoda rollover-kuvan.

Kuvan nimi

Valitse sivun ainutlaatuinen kuvan nimi. Sen pitäisi olla koko sana, mutta voit käyttää numeroita, alaviivoja (_) ja väliviivoja (-). Tätä käytetään tunnistamaan muutettava kuva.

Alkuperäinen kuva

Tämä on sivun URL-osoite tai sijainti, joka alkaa sivulta. Voit käyttää tämän kentän suhteellisia tai absoluuttisia polku-URL-osoitteita. Tämän pitäisi olla kuva, joka on Web-palvelimella tai jonka lataat sivun kanssa.

Rollover-kuva

Tämä on kuva, joka tulee näkyviin, kun hiiren kuvaa yli. Aivan kuten alkuperäinen kuva, tämä voi olla absoluuttinen tai suhteellinen polku kuvaan, ja sen pitäisi olla olemassa tai ladattava, kun lataat sivun.

Esikuormitusvalintakuva

Tämä vaihtoehto on valittu oletusarvoisesti, koska se auttaa siirtymään siirtymään nopeammin. Valitsemalla uudelleenlatauksen esikuormituksen, Web-selain tallentaa sen välimuistiin, kunnes hiiri rullaa sen päälle.

Vaihtoehtoinen teksti

Hyvä vaihtoehtoinen teksti tekee kuvista helpompaa. Käytä aina jonkinlaista vaihtoehtoista tekstiä, kun lisäät kuvia.

Napsauttamalla Siirry kohtaan URL

Useimmat ihmiset klikkaavat kuvaa, kun he näkevät sivun. Joten sinun pitäisi olla tapana saada ne napsautettaviksi. Tämän vaihtoehdon avulla voit määrittää sivun tai URL: n ottaaksesi katsojan napsauttamalla kuvaa. Tätä vaihtoehtoa ei kuitenkaan tarvita, jos haluat luoda uudelleenlatauksen.

Kun olet täyttänyt kaikki kentät, napsauta kunnossa Dreamweaver luo rollover-kuvan.

Dreamweaver kirjoittaa JavaScript sinulle

Jos avaat sivun koodinäkymässä, näet, että Dreamweaver lisää JavaScriptin lohkon HTML-asiakirjasi. Tämä lohko sisältää kolme toimintoa, jotka tarvitset, kun haluat vaihtaa kuvia, kun hiiri rullaa niiden päälle ja esikuormitustoiminto, jos valitsit sen.

toiminto MM_swapImgRestore ()funktio MM_findObj (n, d)funktio MM_swapImage ()toiminto MM_preloadImages ()

Dreamweaver Lisää HTML-koodin Rolloverille

Jos valitsit Dreamweaverin esikuormituksen päällekkäiskuvista, näet asiakirjan rungossa olevan HTML-koodin soittamalla esikuormituskäsikirjoitukseen, jotta kuvat latautuvat nopeammin.

onload = "MM_preloadImages (shasta2.jpg ')"

Dreamweaver lisää myös kaikki kuvan koodin ja liittää sen (jos sisälit URL-osoitteen). Rollover-osio lisätään ankkurointitunnisteeseen onmouseover ja onmouseout attribuutteina.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage (Image1 ', '', 'shasta1.jpg', 1)"

Testaa Rolloverin

Katso täysin toimivaa rollover-kuvaa ja oppia, mitä Shasta on mielessä.