Com crear una imatge de rollover senzilla a Dreamweaver

Els rollovers són una característica tan popular que Dreamweaver inclou un quadre de diàleg especial només per a rollovers: el quadre de diàleg Insereix una imatge de rollover. Les imatges de rollover, com el seu nom indica, estan dissenyades per reaccionar quan algú passa el cursor per sobre d'una imatge. L'efecte pot ser tan espectacular com una imatge d'un gos substituït per una imatge d'un lleó, o tan subtil com el color d'una paraula canviant.

Podeu crear efectes d'imatge de rollover més complexos amb l'opció Canviar imatge del tauler Comportaments. L'opció Canvia imatge us permet canviar diverses imatges alhora.

Per crear un efecte de rollover senzill amb dues imatges utilitzant el quadre de diàleg Insereix un canvi d'imatge de Dreamweaver, seguiu aquests passos:

Col·loqueu el cursor a la pàgina on voleu que aparegui el rollover.

Els efectes de rollover requereixen almenys dues imatges: una per a l'estat inicial i una altra per a l'estat de rollover. Podeu utilitzar dues imatges diferents o dues de semblants, però totes dues han de tenir les mateixes dimensions. En cas contrari, veureu efectes d'escala estranys perquè les dues imatges s'han de mostrar exactament al mateix espai de la pàgina.

Trieu Insereix → Imatge → Imatge de desplaçament.

Alternativament, podeu utilitzar la llista desplegable disponible a la icona Imatges del tauler Inserció comuna i seleccionar Imatge de desplaçament.

Apareix el quadre de diàleg Insereix una imatge de desplaçament.

Al quadre Nom de la imatge, poseu un nom a la vostra imatge.

Abans de poder aplicar un comportament a un element, com ara una imatge, l'element ha de tenir un nom perquè l'script de comportament pugui fer-hi referència. Podeu anomenar els elements com vulgueu sempre que no feu servir espais ni caràcters especials.

Al quadre Imatge original, especifiqueu la primera imatge que voleu que es vegi. Utilitzeu el botó Navega per localitzar i seleccionar la imatge.

Si les imatges encara no es troben a la carpeta del vostre lloc local, Dreamweaver les copiarà al vostre lloc quan creeu la transferència.

Al quadre Imatge de desplaçament, introduïu la imatge que voleu que es faci visible quan un visitant mogui el cursor per sobre de la primera imatge.

De nou, podeu utilitzar el botó Navega per localitzar i seleccionar la imatge.

Marqueu la casella de selecció Precarrega la imatge de relleu per carregar totes les imatges de transferència a la memòria cau del navegador quan es carregui la pàgina per primera vegada.

Si no trieu fer aquest pas, els vostres visitants poden experimentar un retard perquè la segona imatge no es baixarà fins que no passi el cursor per sobre de la imatge original.

Al camp Text alternatiu, introduïu una descripció de les imatges.

El text alternatiu és opcional, però es recomana perquè l'ús de paraules clau pot millorar l'optimització del motor de cerca. De la mateixa manera, el text alternatiu és una part clau de l'accessibilitat web perquè aquest text es llegeix en veu alta per navegadors especials anomenats lectors de pantalla, que són utilitzats per persones cegues i altres amb visió o mobilitat limitada. El text alternatiu només es mostra al navegador si les imatges no són visibles.

Al quadre Quan feu clic, Vés a l'URL, introduïu qualsevol adreça web o navegueu per localitzar una altra pàgina del vostre lloc a la qual vulgueu enllaçar.

Si no especifiqueu cap URL, Dreamweaver inserirà automàticament el signe # com a marcador de posició al codi.

El signe # és una tècnica habitual per crear enllaços que no s'enllacen enlloc. Com que les imatges de rollover que no enllacen a una altra pàgina tenen molts usos fantàstics, aquesta tècnica és útil. Només recordeu que si voleu que la vostra transferència s'enllaci, heu de substituir el signe # per un enllaç a una altra pàgina.

Feu clic a D'acord.

Les imatges es configuren automàticament com a rollover.

Per veure el rollover en acció, deseu el fitxer i feu clic a la icona del globus terrestre a la part superior de l'espai de treball per previsualitzar la vostra pàgina en un navegador web.

Podeu veure com funciona el vostre rollover a la vista Disseny de Dreamweaver o utilitzant l'opció de visualització en directe. Quan feu clic al botó Live a la part superior esquerra de l'espai de treball, bàsicament convertireu Dreamweaver en un navegador web que mostra pàgines com el navegador Chrome.

Quan previsualitzeu una pàgina al vostre ordinador que inclou una imatge de desplaçament, alguns navegadors web mostraran un avís que indica que heu de permetre que els controls ActiveX vegin la pàgina. Aquest és un avís de seguretat que només apareix quan la pàgina s'obre al mateix ordinador on es desa la pàgina.

Si publiqueu la pàgina en un servidor web i després la visualitzeu a través d'una connexió a Internet, vosaltres i els visitants del vostre lloc no veureu aquest error.

Crèdit: il·lustració de istockphoto.com