Una imatge de reenviament és una imatge que canvia a una altra imatge quan vostè o el vostre client mou el ratolí sobre ella. Aquests s'utilitzen habitualment per crear una sensació interactiva, com ara botons o pestanyes. Tanmateix, podeu crear imatges de sobre de tot.
Aquest tutorial està dissenyat per ajudar-vos a crear una imatge de renovació a Dreamweaver . Està destinat a ser utilitzat per persones que utilitzen les següents versions de Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Requisits per a aquest tutorial
- Dreamweaver
Una de les versions enumerades anteriorment. - Una imatge original
Assegureu-vos d'optimitzar aquesta imatge. Això ajudarà a que les pàgines es carreguin amb més rapidesa. - La imatge de voltor
Aquesta imatge hauria de ser la mateixa que la imatge original. I, com la imatge original, s'hauria d'optimitzar per ajudar els temps de càrrega de la pàgina. - Una pàgina web
Aquesta és la pàgina HTML on posareu la vostra imatge de sobre.
01 de 06
Començar
- Comença Dreamweaver
- Obriu la pàgina web on vulgueu la vostra substitució
02 de 06
Insereix un objecte Image Image Rollover
Dreamweaver facilita la creació d'una imatge de sobrevolt.
- Aneu al menú Insereix i baixeu al submenú "Objectes d'imatge".
- Seleccioneu "Retransmissió d'imatges" o "Retransmetre la imatge"
Algunes versions anteriors de Dreamweaver criden als objectes d'imatge "Imatges interactives".
03 de 06
Digueu a Dreamweaver quines imatges usar
Dreamweaver mostra un quadre de diàleg amb els camps que heu d'omplir per crear la vostra imatge de reenviament.
Nom de la imatge
Trieu un nom d'imatge únic per a la pàgina. Hauria de ser una sola paraula, però podeu utilitzar els números, els guions baixos (_) i els guions (-). Això s'utilitzarà per identificar la imatge per canviar.
Imatge original
Aquesta és l'URL o la ubicació de la imatge que s'iniciarà a la pàgina. Podeu utilitzar URL de ruta relativa o absoluta en aquest camp. Aquesta hauria de ser una imatge que existeixi al servidor web o que carregui amb la pàgina.
Passa la imatge
Aquesta és la imatge que apareixerà quan feu clic sobre la imatge. Igual que la imatge original, aquest pot ser un camí absolut o relatiu de la imatge, i hauria d'existir o carregar-se quan carregueu la pàgina.
Preload Image Rollover
Aquesta opció està seleccionada de manera predeterminada, ja que ajuda a que la reproducció aparegui amb més rapidesa. En seleccionar la precàrrega de la imatge de rollover, el navegador web l'emmagatzemarà en una memòria cau fins que el ratolí passi per sobre.
Text alternatiu
Un bon text alternatiu fa que les teves imatges siguin més accessibles. Sempre haureu d'utilitzar algun tipus de text alternatiu quan afegiu imatges.
Quan feu clic a, aneu a l'URL
La majoria de la gent fa clic a una imatge quan veu una a una pàgina. Per tant, hauríeu de fer-los clicar. Aquesta opció us permet especificar la pàgina o URL per fer que l'espectador faci clic a la imatge. No obstant això, aquesta opció no és necessària per crear un canvi de domini.
Quan hagueu completat tots els camps, feu clic a Acceptar perquè Dreamweaver creï la vostra imatge de reenviament.
La següent pàgina mostra el script que escriu Dreamweaver.
04 de 06
Dreamweaver Escriu el JavaScript per a vostè
Si obriu la pàgina en la visualització de codi, veureu que Dreamweaver insereix un bloc de JavaScript al
funció MM_swapImgRestore ()
funció MM_findObj (n, d)
funció MM_swapImage ()
funció MM_preloadImages ()
05 de 06
Dreamweaver afegeix el codi HTML per a la recuperació
Si escolliu que Dreamweaver preloades les imatges de la funció de sobrecàrrega, veureu el codi HTML al cos del document per trucar a l'script de precàrrega perquè les vostres imatges es carreguin amb més rapidesa.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver també afegeix tot el codi de la teva imatge i el vincula (si heu inclòs una URL). La porció de rollover s'afegeix a l'etiqueta d'ancoratge com a atributs onmouseover i onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 de 06
Proveu el pas del temps
Vegeu la imatge de canvi de funció totalment funcional i apreneu sobre la ment de Shasta.