El dia de hoy les mostrare como crear una imagen de sustitución, que es el efecto que se muestra al pasar el mouse por enzima de una imagen o texto. y para ello les traigo dos formar de lograrlo.
La primera es utilizando CSS, para lo cual tenemos el siguiente codigo:
<style type="text/css">
.caja{
background: url(Imagen 1) no-repeat;
height:80px;
width:80px;
text-align:center;
}
.caja:hover{
background: url(Imagen 2) no-repeat;
}
</style>
que pegaremos antes del </head> de nuestro codigo html.
donde vemos que ya tenemos nuestro estilo caja, donde definimos nuestro fondo, el tamaño, la alineacion, etc. como se puede observar en background estoy poniendo la url de mi imagen que sera la primera que se mostrara al cargar nuestra pagina. Cabe aclarar que toy utilizando una imagen con fondo trnasparente, si gustaran ponerle un color de fondo para apreciar mejor el efecto seria de la siguiente forma:
background:#E8F4C1 url(Imagen 1) no-repeat;
Donde como paso primero se le asigna el color deseado y posteriormente dentro de la misma declaracion la url de nuestra imagen.
Paso seguido a esto pones una pseudo-clase de caja con hover (similar a rollover de flash) para poder realizar el cambio o sustitucion de nuestra imagen por otra, a lo cual queda de la siguiente forma
.caja:hover{
background: url(https://sites.google.com/site/jdxtavo/files/3.png) no-repeat;
}
</style>
Teniendo nuestro estilo ya definido procedemos a crear el efecto, para ello utilizo un div al cual le asigno la clase caja para que herede sus propiedades.
<div class="caja">
</div>
con ello ya tenemos nuestro efecto creado, que se veria asi:
si quisieramos perzonalizar nuestro efeco, dentro de nuestro div, podriamos poner otra imagen con un link a otra pagina, para ello tenemos el siguiente codigo.
<div class="caja">
<a href="http://xtavo.blogspot.com/"><img src="Imagen Link" />
</a>
</div>
y con ello tendriamos el efecto como se muestra a continuacion.
La segunda forma es utilizando javascript.
En esta parte lo podemos realizar mediante Dreamweaver, ya que nos proporciona en vista diseño la forma de realizarlo. para ello solo basta ir a nuestro barra de menus - insertar - Objetos de imagen - Imagen de sustitución (Ver imagen 1).
 Imagen1 |
| Imagen 1. |
Paso seguido a esto nos muestra la siguiente ventana (Ver imagen 2):
 Imagen 2 |
| Imagen 2. |
Donde:
En nombre de imagen: le damos un nombre a nuestra imagen.
Imagen origen: la primera imagen que se muestra al cargar nuestra pagina.
Imagen de sustitución: la imagen que se mostrara al pasar el mouse sobre la primera.
Texto alternatico: el texto que muestra nuestra imagen. como submenu y por ultimo.
Al hacerse clic, ir a URL: aqui especificamos la direccion o link al cual queremos que nos dirija una vez que demos clic.
Pasando a la parte de código en Dreamweaver, podemos observar que nos creo el siguiente script:
<script type="text/javascript">
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_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_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>
y dentro de nuestra etiqueta <Body> realiza lo siguiente
<body onload="MM_preloadImages('Imagen 1')">:
esto para cargar el efecto una vez que se inicie la pagina ()y el codigo que realiza la animacion en texto html queda de la siguiente forma:
<img src="Imagen 1" alt="Hi :)" name="Nombre" width="70" height="85" border="0" id="Id Imagen" /> .
Con estos sencillos pasos tenemos terminado nuetra imagen de sustitución de forma mas rapida.
cualquier duda o comentario no duden en comentarlo.
Un saludo Cordial!
Atte.
LSCA. Gustavo Ortiz Gamez.
No hay comentarios:
Publicar un comentario