02/09/2002, 12:47
| ||||
| ||||
| Pasar el mouse encima y cambiar de imagen Como puedo hacer para que en una imagen al yo ponerle el mouse encima la imagen cambie por otra imagen? .::RsOfT::. --El que se aferra a lo conocido, nunca conocerá lo desconocido-- --Es intentando lo imposible como se realiza lo posible-- --Es de pesimo gusto contentarse con algo mediocre cuando lo excelente esta a nuestro alcance-- |
|
02/09/2002, 13:38
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen
Código:
<script language="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.0
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 && document.getElementById) x=document.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('imagen2.gif')">
<img src="imagen1.gif" width="41" height="38" name="Image1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','imagen2.gif',1)">
|
|
02/09/2002, 13:57
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen  No habrá uno más fácil, que se pueda poner en un link?? algo asi como:
Código:
Estuve buscando y encontre esto:OnMounseOver='<img src=imagen.jpg>' <a href='ir.asp?http://www.elcodigo.net/cgibin/DBread.cgi?tabla=scripts&campo=0&clave=39& amp;info=1' target='_blank'>http://www.elcodigo.net/cgibin/DBread.cg...</a> Pero ese tambien es muy difícil  Quiero algo sencillo, o no se puede? .::RsOfT::. --El que se aferra a lo conocido, nunca conocerá lo desconocido-- --Es intentando lo imposible como se realiza lo posible-- --Es de pesimo gusto contentarse con algo mediocre cuando lo excelente esta a nuestro alcance-- |
|
02/09/2002, 16:01
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen Bueno, me puse analizar el que encontré en elcodigo.net y me esta funcionando, pero tiene un maco ?? tengo el siguiente script: =========================================== <script language="javascript"> function CompruebaVersion() { if (navigator.appVersion.charAt(0) >= 3 && document.images) return true else return false } function CreaArray(n) { this.length = n for (var i = 1; i<=n; i++) { this = new Image() } return this } if (CompruebaVersion()) { //si la version del navegador soporta el objeto images img_off = new CreaArray(2) img_on = new CreaArray(2) img_off[1].src = "/imagenes/salud-off.jpg" img_off[2].src = "/imagenes/buscar-off.jpg" img_on[1].src = "/imagenes/salud-on.jpg" img_on[2].src = "/imagenes/buscar-on.jpg" } function msover(num) { if (CompruebaVersion()) { if (img_on[num].src != "") { document.images["efecto"].src = img_on[num].src; } } } function msout(num) { if (CompruebaVersion()) { if (img_off[num].src != "") { document.images["efecto"].src = img_off[num].src; } } } </script> =========================================== Entonce en los link: =========================================== <td bgcolor="#99ccff"> <a href="#" onMouseOut="msout(1)" onMouseOver="msover(1)"><img src="/imagenes/salud-off.jpg" name="efecto"></a> <a href="#" onMouseOut="msout(2)" onMouseOver="msover(2)"><img src="/imagenes/buscar-off.jpg" name="efecto"></a> </td> =========================================== Cuando me posiciono en la imagen Salud se cambia a on pero en la imagen buscar, y cuando me posiciono en buscar, se cambia bien en su misma imagen... que está pasando? .::RsOfT::. --El que se aferra a lo conocido, nunca conocerá lo desconocido-- --Es intentando lo imposible como se realiza lo posible-- --Es de pesimo gusto contentarse con algo mediocre cuando lo excelente esta a nuestro alcance-- |
|
02/09/2002, 16:08
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen Qué te parece este código?
Código:
Es muy sencillo. <html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
if (document.images){
imagenon=new Image;
imagenoff=new Image;
imagenoff.src="imagen1.gif";//Imagen a sustituir (images/pepe.jpg o http://www.pepe.com/imagen.jpg..)
imagenon.src="imagen2.jpg";//Imagen sustituta (images/juan.jpg o http://www.pepe.com/imagen.2jpg..)
}
else{
imagenon="";
imagenoff="";
imagenoff.src=""
imagenon.src=""
}
</script>
</head>
<body>
<a href="Página de destino.html "
onMouseOver="document.imagen.src=imagenon.src;"
onMouseOut="document.imagen.src=imagenoff.src;">
<img name="imagen"
src="imagen2.jpg" >
</a>
</body>
</html>
Primero comprobamos si el navegador entiende el objeto images . Si lo entiende seguimos y si no dejamos las variables en blanco para que no salte ningún error (esto es innecesario porque hoy en día todos lo entienden, pero por si acaso). Si entiende el objeto images defines varias variables como imágenes (dos por cada link: el on y el off). Luego les das una ruta hasta llegar al src de las mismas. Posteriormente en el código y por medio de onmouseover y onmouseout decimos que cambie la ruta de llegar a la imagen de una a otra. Como ves es muy sencillo y funciona en todos los navegadores que tengo. Espero que te sirva. Si no entiendes algo... dímelo! Salu2 |
|
02/09/2002, 16:10
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen Vaya, veo que ya conseguiste un ejemplo... y bastante completo! Voy a ver porque te falla... aunque el mío es menos complicado y hace lo mismo... ;) |
|
02/09/2002, 16:21
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen A ver! l oque te pasa es que las dos imágenes tienen el mismo nombre cambia el código en este sentido y a ver:
Código:
Espero que te ayude! function msover(num,imagen) {
if (CompruebaVersion()) {
if (img_on[num].src != "") {
document.images[imagen].src = img_on[num].src;
}
}
}
function msout(num,imagen ) {
if (CompruebaVersion()) {
if (img_off[num].src != "") {
document.images[imagen ].src = img_off[num].src;
}
}
}
<a href="#" onMouseOut="msout(1,'salud' )" onMouseOver="msover(1,'salud' )"><img src="/imagenes/salud-off.jpg" name="salud" ></a>
<a href="#" onMouseOut="msout(2,'buscar' )" onMouseOver="msover(2,'buscar' )"><img src="/imagenes/buscar-off.jpg" name="buscar" ></a>
</td>
|
|
02/09/2002, 17:31
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen La respuesta (mucho más fácil) en tu pregunta del foro HTML <a href='ir.asp?http://www.forosdelweb.com/mensaje.asp?id=99240' target='_blank'>http://www.forosdelweb.com/mensaje.asp?i...</a> Un saludo. <img src="http://litos.galeon.com/guino.gif"> Carlos - Zaragoza |
|
03/09/2002, 02:03
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen Carlitos, estoy de acuerdo en que esa es la forma más sencilla, pero NS 4.7 no reconoce el onmouseover sobre una imagen. Por lo que tenemos que hacer toda esa parafernalia para que funcione tb en este navegador... |
|
03/09/2002, 07:24
| ||||
| ||||
| Re: Pasar el mouse encima y cambiar de imagen Gracias por sus respuestas!!! :) .::RsOfT::. --El que se aferra a lo conocido, nunca conocerá lo desconocido-- --Es intentando lo imposible como se realiza lo posible-- --Es de pesimo gusto contentarse con algo mediocre cuando lo excelente esta a nuestro alcance-- |
