Com crear intercanvis amb diverses imatges a Dreamweaver

Abans de començar a crear un disseny de pàgina més complex amb el comportament d'intercanvi d'imatge de Dreamweaver, mireu una pàgina acabada. Amb el comportament d'intercanvi d'imatge, podeu substituir qualsevol o totes les imatges d'una pàgina.

Quan utilitzeu el comportament d'intercanvi d'imatge, és important que totes les imatges que intercanvieu tinguin la mateixa mida (alçada i amplada). Si les imatges no tenen la mateixa mida, totes les imatges excepte la primera s'estiraran o comprimiran per adaptar-se a l'espai ocupat per la primera imatge inserida a la pàgina.

Si utilitzeu el comportament d'intercanvi d'imatge amb una sèrie d'imatges que no tenen la mateixa alçada i amplada, teniu algunes opcions:

Retalla les més grans perquè totes les imatges tinguin la mateixa mida.

Feu que les imatges horitzontals i verticals ocupin el mateix espai al vostre disseny combinant dues imatges verticals per a cada horitzontal. Simplement creeu un fitxer en un programa com Photoshop, inseriu dues imatges verticals al mateix fitxer una al costat de l'altra i, a continuació, dimensioneu aquesta imatge de manera que el fitxer tingui la mateixa mida que una imatge horitzontal.

Creeu un fitxer d'imatge de la mida de la vostra imatge més gran, configureu el fons amb un color neutre, com ara blanc o negre, i després inseriu totes les altres imatges al fons perquè pugueu desar-les totes amb la mateixa mida de fitxer.

Seguiu aquests passos per utilitzar el comportament d'intercanvi d'imatge:

1Creeu un disseny de pàgina amb totes les imatges que voleu que es mostrin inicialment.

Cadascuna de les tres fotos del disseny de la pàgina del Tower Bridge de Londres té dues còpies: una miniatura i una versió més gran. Quan la pàgina es carrega per primera vegada en un navegador web, les tres imatges en miniatura es col·loquen a la part inferior de la pàgina, amb la primera de les versions més grans corresponents a l'àrea principal just a sobre de les miniatures.

2Anomeneu les vostres imatges a l'inspector de propietats.

Per orientar les vostres imatges amb JavaScript, que és com funcionen els comportaments, primer doneu a cada imatge un identificador únic. L'identificador de la imatge no és el mateix que el nom del fitxer de la imatge o l'etiqueta de text, tot i que podeu utilitzar noms iguals o similars. Els ID d'imatge no han de tenir espais ni caràcters especials.

3 Trieu Finestra → Comportaments.

S'obre el tauler Comportaments. Podeu arrossegar el tauler Comportaments a qualsevol altre lloc de la pàgina i podeu ampliar-lo arrossegant-ne la part inferior o lateral. També podeu tancar qualsevol altre panell obert per fer més espai fent clic a la barra de color gris fosc a la part superior de qualsevol tauler.

4Seleccioneu una imatge.

Seleccioneu la imatge de la pàgina que servirà de desencadenant de l'acció.

5 Trieu el comportament d'intercanvi d'imatge.

Amb la imatge activadora seleccionada a l'espai de treball, feu clic al signe més al tauler Comportaments per obrir la llista desplegable d'accions i trieu l'acció que voleu aplicar.

6 Especifiqueu les imatges que voleu intercanviar al quadre de diàleg Canvi d'imatge.

A la llista Imatges, seleccioneu l'identificador de la imatge que es substituirà. Feu clic al botó Navega per seleccionar la imatge que substitueix la imatge principal. Si la imatge encara no està desada a la carpeta del lloc local, Dreamweaver us oferirà copiar-la allà.

7A la part inferior del quadre de diàleg Canvi d'imatge, seleccioneu l'opció Carrega prèviament les imatges per indicar al navegador que carregui totes les imatges a la memòria cau quan es carregui la pàgina.

Si no seleccioneu aquesta opció, es pot produir un retard quan s'utilitza l'intercanvi d'imatges.

8Si voleu, deseleccioneu l'opció Restaura les imatges OnMouseOut.

L'opció Restaura les imatges OnMouseOut significa que quan s'ha completat un esdeveniment (com ara quan es mou el ratolí de la miniatura activa), la imatge original es substitueix. De manera predeterminada, Dreamweaver preselecciona aquesta opció per al comportament d'intercanvi d'imatge. És possible que vulgueu deseleccionar aquesta opció si trobeu que substituir la imatge original cada vegada que passeu el cursor per sobre d'una altra miniatura us distraeix.

9Després d'especificar tots els paràmetres del comportament, feu clic a D'acord.

El nou comportament apareix al tauler Comportaments.

10 Especifiqueu un esdeveniment per al comportament.

Un cop aplicada l'acció, podeu tornar enrere i especificar quin esdeveniment activarà l'acció. De manera predeterminada, Dreamweaver aplica l'esdeveniment OnMouseOver quan utilitzeu l'acció Canvi d'imatge, però podeu canviar aquest esdeveniment a qualsevol de disponible, com ara OnClick, que requereix que l'usuari faci clic a la imatge per activar l'acció Canviar imatge.

11 Aplicar comportaments addicionals.

Per aplicar el comportament d'intercanvi d'imatge a altres imatges d'una pàgina, repetiu els passos 5 a 10, feu clic per seleccionar la imatge que voleu servir com a activador i, a continuació, especifiqueu la imatge corresponent que s'hauria d'intercanviar.

12 Prova el teu treball en un navegador.

No podeu veure els efectes de comportaments com aquest fins que no feu clic al botó Visualització en directe a la part superior esquerra de l'espai de treball a Dreamweaver o previsualitzeu la vostra pàgina en un navegador web.