Ayuda con hover de una imagen en CSS [Archivo] - ZonaDeVicio

soldier

06/12/2011, 13:49

Pues veréis estoy empezando con esto de las CSS, y tengo una duda, a ver si me la podéis resolver, porque no encuentro justo lo que quiero.

Para que lo veáis mas claro, añado las imágenes, pero vamos viene a ser que tengo la imagen "1.jpg" y quiero que al pasar el ratón por encima aparezca "2.jpg" y que al pinchar me lleva a otra pagina.

:)

GameMaster

06/12/2011, 14:11

Una forma:

1 - Javascript

var images_dir = 'Img/Menu/';
var over_prepend = '_over.gif';
var img_prepend = '_img';
function add_handlers() {
var i, args,d, link, img, id, to_preload, function_string;
d = document;
args = add_handlers.arguments;
to_preload = '';
function_string = '';
if(d.images) {
for(i = 0; i <args.length; i++) {
id = args[i];
elem = d.getElementById(id)
eval("elem.onmouseover = function() { MM_swapImage(\'" + id + img_prepend + "\',\'\',\'" + images_dir + id + over_prepend + "\',1); } ");
d.getElementById(id).onmouseout = function() { MM_swapImgRestore(); };
to_preload += "'" + images_dir + id + over_prepend + "',";
}
}
to_preload = to_preload.substr(0,(to_preload.length-1));
exec("MM_preloadImages(" + to_preload + ");");
}

2-Html:

<body onload="add_handlers('nav_opc');">

<div id="navbar">
<a href="Pagina2.htm" target="corpo" id="nav_opc"><img src="Img/Menu/nav_opc.gif" id="nav_img" alt=""/></a>
</div>

En la carpeta de imagenes pones las 2:

nav_opc.gif
nav_opc_over.gif

kraff2

06/12/2011, 14:18

Para conseguir ese efecto sin usar javascript las imágenes debe ser "backgrounds" del enlace, el html sería algo así:

<a class="enlace" href="#"></a>

Y el css:

.enlace{ display:block; width:61px; height:109px; background:url(img/imagen1.jpg) no-repeat}
.enlace:hover{background:url(img/imagen2.jpg) no-repeat}

las direcciones de las imágenes en el css deben ser relativas a donde esté el archivo css.

en el ejemplo la estructura de directorios sería:

archivo.html
archivo.css
img/imagen1.jpg
img/imagen2.jpg

soldier

06/12/2011, 14:28

Mucho mas claro tu ejemplo, kraff2. Funciona

Gracias :)

^MiSaTo^

06/12/2011, 14:43

Con CSS en este caso es mucho más sencillo. Pero si quieres hacerlo con javascript:

<html>
<head>
<script type="text/javascript">
function changeImg(element){
element.src="2.jpg"; //ruta a la imagen, no se te olvide ;)
}

function goToUrl(){
window.location="http://www.google.es"; //aquí la url de donde quieres que te redirija.
}

</script>
</head>
<body>
<img src="1.jpg" onmouseover="changeImg(this);" onclick="goToUrl();">
</body>
</html>

Eso suponiendo que tienes todo en el mismo directorio.
Deberías usar los eventos onmouseover y onclick, no hace falta que hagas el lío que ha montado GameMaster (más que nada porque además de líoso, usar el onload para esto tampoco es que sea lo más óptimo ;))

Incluso podría ponerse tal que así:

<img src="1.jpg" onmouseover="this.src='2.jpg';" onclick="window.location='http://www.google.es';">
pero me parece más "guarro" y menos claro ;)

Aún así yo usaría la solución que te han dado en CSS directamente :brindis:

ChUKii

06/12/2011, 15:58

Hazlo con Jquery ;)

Sustituir 2 imagenes se hace en 2 patadas y al ser "similares" se puede hacer el efecto de que se va ampliando ;).

http://www.desarrolloweb.com/manuales/manual-jquery.html

:brindis::brindis:

^MiSaTo^

06/12/2011, 16:04

Hazlo con Jquery ;)

Sustituir 2 imagenes se hace en 2 patadas y al ser "similares" se puede hacer el efecto de que se va ampliando ;).

http://www.desarrolloweb.com/manuales/manual-jquery.html

:brindis::brindis:

Jodo cambiar una imagen cuando haces hover con jQuery creo que es como matar moscas a cañonazos XD

Si es una línea de JS o de CSS por dios!

kraff2

06/12/2011, 17:48

Mucho mas claro tu ejemplo, kraff2. Funciona

Gracias :)

De nada ;)
El único problema de ese sistema es que los navegadores no "precargan" las imágenes que haya en los css así que dependiendo de la conexión habrá un pequeño retardo para cambiar la imagen la primera vez que se pase el cursor por encima del enlace hasta que el navegador cargue la imagen y la "cachee".

Hay diferentes formas de "solucionar" esa pega de los navegadores, una de las más cómodas (pero poco eficiente) es usar un plugin de jquery como preloadCssImages que analiza los archivos css de la página y obliga al navegador a cachear las imágenes que encuentre:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_ jquery/

Hay otras formas de hacerlo más eficientes pero normalmente engorrosas, la principal ventaja es que no es necesario usar javascript:

http://perishablepress.com/press/2008/04/15/pure-css-better-image-preloading-without-javascript/
http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/

ChUKii

06/12/2011, 19:23

Jodo cambiar una imagen cuando haces hover con jQuery creo que es como matar moscas a cañonazos XD

Si es una línea de JS o de CSS por dios!

Si, lo es :lol:, pero con Jquery podría hacer algún efecto de transición entre la imagen pequeña y la grande que diese la impresión de que se levanta la oja (al tener la imagen de inicio y de final puntos en comun).

:brindis::brindis:

Karkayu

06/12/2011, 19:24

Una forma:

1 - Javascript

var images_dir = 'Img/Menu/';
var over_prepend = '_over.gif';
var img_prepend = '_img';
function add_handlers() {
var i, args,d, link, img, id, to_preload, function_string;
d = document;
args = add_handlers.arguments;
to_preload = '';
function_string = '';
if(d.images) {
for(i = 0; i <args.length; i++) {
id = args[i];
elem = d.getElementById(id)
eval("elem.onmouseover = function() { MM_swapImage(\'" + id + img_prepend + "\',\'\',\'" + images_dir + id + over_prepend + "\',1); } ");
d.getElementById(id).onmouseout = function() { MM_swapImgRestore(); };
to_preload += "'" + images_dir + id + over_prepend + "',";
}
}
to_preload = to_preload.substr(0,(to_preload.length-1));
exec("MM_preloadImages(" + to_preload + ");");
}

2-Html:

<body onload="add_handlers('nav_opc');">

<div id="navbar">
<a href="Pagina2.htm" target="corpo" id="nav_opc"><img src="Img/Menu/nav_opc.gif" id="nav_img" alt=""/></a>
</div>

En la carpeta de imagenes pones las 2:

nav_opc.gif
nav_opc_over.gif

Eso lo has sacado usando Dreamweaver, verdad?? Porque vaya codigo...

enkonsierto

06/12/2011, 19:58

De nada ;)
El único problema de ese sistema es que los navegadores no "precargan" las imágenes que haya en los css así que dependiendo de la conexión habrá un pequeño retardo para cambiar la imagen la primera vez que se pase el cursor por encima del enlace hasta que el navegador cargue la imagen y la "cachee".

Hay diferentes formas de "solucionar" esa pega de los navegadores, una de las más cómodas (pero poco eficiente) es usar un plugin de jquery como preloadCssImages que analiza los archivos css de la página y obliga al navegador a cachear las imágenes que encuentre:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_ jquery/

Hay otras formas de hacerlo más eficientes pero normalmente engorrosas, la principal ventaja es que no es necesario usar javascript:

http://perishablepress.com/press/2008/04/15/pure-css-better-image-preloading-without-javascript/
http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/
la mejor forma de evitar ese intevalo de carga es usando sprites en el css. No hace falta ni javascript ni jquery ni nada más.

soldier

06/12/2011, 20:10

kraff2 no te preocupes, se trata de un trabajillo "offline" por lo que las imágenes las carga rápido, eso si, me apunto todo lo que comentas por si me hiciese falta en un futuro.

Gracias de nuevo :)