Estàs a

Inici

Temes codi

Imatge de substitució amb Script ...

juliol
4
2010

Temes codi

Imatge de substitució amb Script ...

Un article de ... manu Comments

2 Comentaris

Crea una imatge de substitució amb Dreamweaver ...

Exemple i comentaris per a l'eina de Dreamweaver, "Imatge de substitució" (Rollover).
Imatge que es canvia en passar el ratolí per sobre.

- Mans a l'Obra ...

Vull posar-vos dos exemples diferents per a la substitució d'una imatge en passar el ratolí per sobre ...
Ho farem de dues formes diferents;

1 - Amb les eines de Dreamweaver ...
mitjançant un Script que genera automàticament Dreamweaver

Vull veure on es troba aquesta opció ...

2 - Mitjançant codi Css manualment ... dins o fora de l'arxiu.
Aquesta opció està molt bé, però té algunes limitacions.

Amunt Tornar

Bé, si voleu provar com funciona en Dreamweaver,
segueix aquests passos i podràs comprovar personalment aquesta eina ...

Aconsegueix dues imatges de similars mesures per a l'exemple, després pots fer les teves pròpies comprovacions sobre les mides i altres en aquest tipus d'acabats.
El format de les imatges és igual, l'única cosa que has d'escriure l'extensió (format de la Imatge) al ...

<img src" Url-relativa-absoluta/imagen-y- format "/>

Bé dit això comencem amb les comprovacions, ia veure com ens surt aquest assumpte ...;
Crea un nou arxiu Html buit, si no el tens obert ja.

Per a aquesta prova fes com vulguis, crea un paràgraf <p> Per allotjar la imatge de prova </ p>,
o bé fes clic en qualsevol part del document, per després elejgir "Insereix" de la barra d'harramientas com en l'exemple de la imatge anterior, i al menú contextual que t'apareix tria l'opció: "Objectes d'Imatge" i després " Imatge de substitució ".

- Hacto seguit et semblarà la finestra de sota per poder crear-la ...

Ventana de imagen de sustitución

Amunt Tornar

Això és molt senzill de crear, amb l'ajuda de l'assistent està "chupao ..."
Abans de seguir vull dir-te que quan omplis els camps i accepteu, la teva aplicació crearà un Script automàticament, i l'allotjarà entre el
<head> </ head> del teu document, entre les etiquetes obligatòries com són ...

> </script> <script type= "text/javascript"> </ script>

Bé anem a omplir els camps, tenint en compte que has preparat les imatges per a les proves, i pots veure aquesta finestra com la imatge que he posat a dalt.

Vull veure més o menys com omplir els camps ...

- Omplint els camps obligatoris ...

- Nom de la imatge ...
Senzill, tria un nom qualsevol.

- Imatge original ...
Aquesta el la imatge que veus primero.Puedes posar una Url relativa al document utilitzant l'assistent amb el botó "Examinar", o pots escriure una Url absoluta a la teva imatge, tipus "http://www.internavegacion.com"

- Imatge de substitució ...
Aquesta el la imatge que es veurà en passar el ratolí per sobre, és la que substitueix a la primera. Pots seguir els passos per localitzar la imatge de la mateixa manera que en el cas anterior.

- Text alternatiu ...
Aquesta part és per a la descripció de la imatge, o la informació que vols mostrar sobre la imatge.

- En fer-se clic, anar a la Url ...
Aquesta part és la que enllaçarà la imatge amb la Web o un altre lloc que vols obrir en fer clic.
Tots aquests són passos senzills per crear un rollover amb dues imatges.

Un cop omplert els camps correctament, així que accepteu es crearà el Script per a tal ejemplo.Se situarà entre les etiquetes <head> </ head>.

Recorda que pots crear un document on allotjar aquest Script i enllaçar al teu document mitjançant;

src=" http://www.tu-web/tu-archivo.js "> </script> <script type= "text/javascript" src=" http://www.tu-web/tu-archivo.js "> </ script>

Amunt Tornar

Bé, jo he col · locat una imatge per l'exemple i pots comprovar aquí passant el ratolí per sobre ...

El codi que s'ha creat en el document actual és aquest per a aquesta imatge canviant ...

<A href = "http://www.internavegacion.com" onmouseout = "MM_swapImgRestore ()" src = "http://www.internavegacion.com/imagenes-blog/imagen-1.jpg" alt = "rollover" name = "Imagen2" width = "97" height = "97" border = "0" id = "Imagen2" /> </ a>

Bé aquests són els passos per crear en Dreamweaver una imatge de substitució, més aviat és la pròpia aplicació la que fa tot el trabajo.No es exactament en la mesura que s'utilitza aquest tipus de script per a substituir una imatge, però si crec que amb CSS es poden fer grans acabats.
Ho veiem en l'arxiu següent, o des de la portada de Inter Navegació .

Vull recordar que aquest Script és creat íntegrament pel programa Dreamweaver CS, a sigui que els crèdits són per a la Gent d'Adobe, que la veritat fan grans aplicacions per al disseny.

Amunt Tornar

Temes Relacionats;

Imatge de Substitució amb estils CSS ...

Sobre l'autor: manu

2 Comentaris Afegir un comentari

manu 16 setembre 2011 a les 19:20
Possiblement, però això no és més que un exemple.
Suposo que es poden fer de diverses maneres.
salutacions
Que és SSL 14 setembre 2011 a les 0:37
És preferible realitzar aquesta tasca amb CSS, dreamweaver tendeix a generar molt cpodigo escombraries.