Crea enlaces con interambio de imágenes

Diseño Web, Html Dejar un comentario

El diseño web cada día es más exigente y determinados comportamientos del ratón son fundamentales para facilitar la navegación entre los contenidos. Cambiar una o varias de las características del texto o la imagen de un enlace es casi un requerimiento fundamental: tamaño, color, opacidad, contorno, fondo o crear una animación…

hover imagen CSS o javascript

En el post botones css de texto y gráfico con rollover, he abordado esta tarea, pero en esta ocasión voy a explicar como realizar en enlace con cambio de imagen, para que por defecto se vea una imagen y al colocar el puntero del ratón sobre ella se vea otra.

Existen 2 formas de hacerlo, con javascript o con hojas de estilo. En ambos casos el resultado es muy similar.

1) Cambio de una imagen de enlace con Javascript:

Si eres aficionado a crear páginas web con Adobe Dreamweaver los comportamientos permiten crear el código javascript para el intercambio de imagen en un enlace. Sólo hay que insertar la imagen en reposo, seleccionarla y en la barra de comportamientos seleccionar el + para elegir la opción intercambiar imagen.

comportamiento o javascript

Seleccionado la imagen de reposo se pueden ver y cambiar los comportamientos definidos (onMouseOver, OnMouseOut) y seleccionando el body se pude ver o modificar el comportamiento (imágenes/em>) para escoger todas las imágenes que se desea precargar de la web.

preload comportamiento o javascript

En el código puedes ver las funciones javascript para precargar imágenes (MM_preloadImages) cambiar imagen (MM_swapImage) y restaurar imagen de reposo (MM_swapImgRestore).

Ver ejemplo. Descargar ejemplo.

2) Cambio de una imagen de enlace con CSS:

El mismo efecto se puede conseguir definiendo una clase CSS que se aplicará a la etiqueta del enlace deseado, para que se visualice la imagen de reposo o la imagen de sustitución deseada cuando se coloque el puntero del ratón encima.

css hover

En el ejemplo la clase opcionweb define la imagen de fondo (background-image) que no se repita la imagen (background-repeat) y la posicion de la imagen (background-position) el relleno (padding) define el espacio que debe verse, corresponde con la mitad del espacio horizontal de la imagen (240px) y el alto de la imagen (25px).

En el hover propiedad CSS que se activa cuando el puntero del ratón esta encima de la imagen, se definen las mismas características que en reposo, cambiando solo la imagen que se desea visualizar, el efecto para el usuario es que cambia la anterior cuando en realidad se sustituye.

Ver ejemplo. Descargar ejemplo.

Blog Widget by LinkWithin
¿Te gustó?, VOTA el post. SÍGUEME por Twitter, Facebook o RSS.

Sigue leyendo:

Un Trackback

5 Comentarios

  1. Gravatar 9 julio 2013, 10:13
    Ángel: Reply to this comment

    Muy útil este post. Me ha ayudado mucho.

  2. Gravatar 9 julio 2013, 22:06
    Pancho opcionweb: Reply to this comment

    Me alegro ;-) Un saludo.

  3. Gravatar 1 octubre 2013, 10:30
    Diseño web: Reply to this comment

    Me sirvio este post para un proyecto que estoy desarrollando muchas gracias

  4. Gravatar 2 octubre 2013, 19:52
    Pancho opcionweb: Reply to this comment

    Me alegro mucho.
    Un saludo. Gracias por la visita y el comentario.

  5. Gravatar 2 octubre 2013, 19:52
    Pancho opcionweb: Reply to this comment

    Me alegro mucho.
    Un saludo. Gracias por la visita y el comentario.

Escribe tu comentario o... ¡salta!

Etiquetas XHTML permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Entradas RSS Comentarios RSS Acceder Subir
twitter facebook Rss mail rssSígueme en Google Currents