h1

Coding #01: Reemplazar imagen en Dreamweaver

diciembre 10, 2009

CODING #01: REEMPLAZAR IMAGEN CON DREAMWEAVERSeguro que más de una vez utilizamos scripts de este tipo para dar pequeños y precisos toques dinámicos a una web…

Que cambie la viñeta de una opción de menú cuando el usuario está parado sobre ella (rollOver) o que cuando está sobre un botón, este cambie de color frente al resto… aportando sensación de sensibilidad, interacción, y dinamismo.

El tema es que por defecto si usamos la opción “reemplazar imagen” de Dreamweaver, estaremos sobrecargando el navegador del usuario con código en cierta forma “inútil”. SÍ. Pues gran parte del código que nuestro amigo verde agrega a nuestra página web, cumple funciones de precarga, restauración y demás.. que no son necesarias en estos casos donde las imágenes que utilizamos son pequeñas o tienen un peso optimizado que nos permiten prescindir de él.

Por ello personalmente prefiero, siguiendo el consejos de expertos, utilizar siempre la menor cantidad de código posible… ¿qué sentido tiene usar líneas de código a cargar que de cierta manera “sobra”? si nos preocupamos por optimizar imágenes para una rápida descarga… ¿por qué no hacer lo mismo con el código de nuestra página?

Ahora que ya estamos de acuerdo en que es necesario, jugaremos con las cartas sobre la mesa…

Imaginemos que al pasar el mouse sobre (rollOver) una imagen llamada “A.jpg” , esta se sustituirá por otra llamada “B.jpg”. Asimismo, al quitar de encima el mouse (rollOut) la imagen se reestablece a “A.jpg”. Cabe agregar que la imagen que comentamos funcionará como botón con un link a una web… para hacer el código más completito.

01 ¿Cual sería el código generado por Dreamweaver?

Entre las etiquetas HEAD…

<script language=”JavaScript” type=”text/JavaScript”>
<!–
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>

En el BODY…

<body onLoad=”MM_preloadImages(‘B.jpg’)”>
<a href=”http://www.alejitus.com&#8221; onMouseOver=”MM_swapImage(‘img01′,”,’B.jpg’,1)” onMouseOut=”MM_swapImgRestore()”><img src=”A.jpg” alt=”alEjitus.com” name=”img01″ width=”20″ height=”20″ border=”0″ id=”img01″></a>
</body>

02 – El código optimizado que realiza exactamente el mismo efecto es…

En el BODY…

<a href=”http://www.alejitus.com&#8221; onMouseOver=”document.images[‘img01’].src = ‘B.jpg'” onMouseOut=”document.images[‘img01’].src = ‘A.jpg'”><img src=”A.jpg” alt=”alEjitus.com” name=”img01″ width=”20″ height=”20″ border=”0″ id=”img01″></a>

¿Se dan cuenta? imaginen una web llena de contenido, links, imágenes, tablas y comportamientos extras… considero importante optimizar código para que cuando más resumido sea, no sólo será cargado más rápidamente sino que de un simple vistazo podremos localizar, entender que está escrito 😉

Y siempre que puedan, echen un vistazo a la vista código y procuren enteder cada cosa que se escribe, no nos limitemos a trabajar ciegamente en la vista diseño. Es un buen método para familiarizarnos con el código, detectar errores y el día de mañana mejorarlo con nuestra propia sintaxis 🙂

Cualquier duda o comment, a las órdenes!

Bookmark Starting...

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: