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
- Dreamweaver
Yksi edellä mainituista versioista. - Alkuperäinen kuva
Varmista optimoi tämä kuva. Tämä auttaa sivujesi latautumaan nopeammin. - Muutoskuva
Tämän kuvan pitäisi olla samat mittasuhteet kuin alkuperäinen kuva. Ja, kuten alkuperäinen kuva, pitäisi optimoida sivun latausaikojen auttamiseksi. - Web-sivu
Tämä on HTML-sivu, jossa laitat rollover-kuvan.
01/06
Aloittaa
- Aloita Dreamweaver
- Avaa verkkosivu, johon haluat siirtyä
02/06
Lisää Rollover Image Image Object
Dreamweaverin avulla on helppo luoda rollover-kuva.
- Siirry Insert-valikkoon ja alas "Image Objects" -alivalikkoon.
- Valitse "Kuvan siirto" tai "Siirrä kuva"
Jotkin vanhat Dreamweaver-versiot kutsuvat sen sijaan Image Objects -työkalua "Interactive Images".
03/06
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 suorittanut kaikki kentät, napsauta OK, jotta Dreamweaver luo päällekkäiskuvan.
Seuraava sivu näyttää komentosarjan, jonka Dreamweaver kirjoittaa.
04/06
Dreamweaver kirjoittaa JavaScript sinulle
Jos avaat sivun koodinäkymässä, näet, että Dreamweaver lisää JavaScript-lohkon HTML-asiakirjan
toiminto MM_swapImgRestore ()
funktio MM_findObj (n, d)
funktio MM_swapImage ()
toiminto MM_preloadImages ()
05/06
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)"
06/06
Testaa Rolloverin
Katso täysin toimivaa rollover-kuvaa ja oppia, mitä Shasta'n mielessä on.