TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN

Aumentar imágenes con efecto deslizante al pasar el cursor

Si deseamos obtener el siguiente efecto al pasar el cursor, sobre las imágenes que insertemos en nuestro blog:



Sólo tendremos que entrar en el diseño de nuestro sitio, edición Html y justo antes de la etiqueta  </head>  insertar  el siguiente código:

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>

Ahora donde deseemos que se aplique el efecto en una imagen, por ejemplo en una entrada como en el post que nos ocupa, simplemente insertar el siguiente código:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Simplemente insertar donde marca URL de la imagen, pues eso la dirección de la imagen que deseamos aparezca con el efecto.

8 comentarios:

  1. En el programa: INSERTAR-IMAGENES-CON-EFECTO-DESLIZANTE, dicen, URL (dirección y nombre) de la imagen; pero si son 12 imagenes, ¿como se hace?.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Tendrías que copiar en la entrada el código que está al fina del post, <img border="0" src="URL de la imagen" class="expando" width="100" />
      Tantas veces como imágenes quieras poner para aplicarles el efecto a cada una de ellas.

      Eliminar
  2. Luz, primero muchas gracias por la rapidez en la respuesta. La duda: donde es exactamente "en la entrada" ?.
    Aprovechando la consulta, tengo la página Web hecha
    con el programa Kompozer y he leido en alguna parte
    que programar con Tablas esta obsoleto, es así?.
    Gracias por todo y un saludo.

    ResponderEliminar
    Respuestas
    1. Decía en la entrada porque pensé que lo querías poner en una entrada de un blog, pero sino donde desees que aparezcan las imágenes.
      Yo no considero nada obsoleto si con ello conseguimos lo que estamos buscando, en el caso de la cabecera de este blog hay una tabla para la distribución de todos los elementos.

      Eliminar
  3. hola, yo estoy usando el web page maker. mi duda esta en como puedo hacer esto mismo, sin que el el espacio que toma la imagen agrandada, tape otros vinculos que tengo debajo pegado a la imagen pequeña?? puedo hacerlo, si, pero la imagen cuando se agranda queda debajo de mis vinculos, o sea semi tapada por mis vinculos. muchas gracias

    ResponderEliminar
    Respuestas
    1. Al aumentarse la imagen todo el texto se desplaza hacia abajo, no se a que te refieres me ¿puedes poner un ejemplo?, saludos

      Eliminar
  4. Esto lo puedo hacer en un power o word?

    ResponderEliminar
    Respuestas
    1. Sol esto está programado en lenguaje HTML, solo sirve para hacer que funcione el efecto en un blog o Web.

      Eliminar

Entradas populares

Colaboro En:

textoalternativo textoalternativo textoalternativo

Atención

Los comentarios serán publicados una vez hayan sido moderados, disculpen las molestias.

Este blog es informativo y de caracter educativo, el administrador del mismo no se responsabiliza del uso fraudulento o ilegal que otras personas hagan del contenido publicado en él.

Así mismo si alguien cree que se vulnera algún derecho se ruega ponerlo en conocimiento para que se subsane de forma inmediata.