Anónimo
Frontpage
Hola! Quisiera saber como puedo invertir una imagen con el frontpage(me estoy haciendo una web), es decir que haya una imagen en la pantalla, pases el ratón por encima y cambie
Espero atentamente vuestra respuesta
Espero atentamente vuestra respuesta
1 respuesta
Respuesta de vkinki
1
Necesitamos poner el siguiente script debajo de </title> y antes de </head>(en el código fuente):
<script LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }
function msover1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function msout1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
//-->
</script>
Y ahora viene lo interesante. En el lugar donde queremos poner la imagen, ponemos lo siguiente (en el código fuente):
<a href=""
onMouseOver="msover1('image1','image_02.gif');"
onMouseOut="msout1('image1','image_01.gif');"><img name="image1"
src="image_01.gif" border="0" width="88" height="32"></a>
Lo que hicimos es que donde dice onMouseOver, ponemos la imagen que queremos que reemplace a la que esta originalmente. Y donde dice onMouseOut ponemos la imagen original. Finalmente, en donde dice img name, pusimos la imagen original.
Puedes copiar este código y sustiturlo en cada sitio apropiado dentro del lenguaje html y poner la ruta de las dos imágenes que quieres utilizar por las de image_01 y image_02 que son las de ejemplo
<script LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }
function msover1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function msout1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
//-->
</script>
Y ahora viene lo interesante. En el lugar donde queremos poner la imagen, ponemos lo siguiente (en el código fuente):
<a href=""
onMouseOver="msover1('image1','image_02.gif');"
onMouseOut="msout1('image1','image_01.gif');"><img name="image1"
src="image_01.gif" border="0" width="88" height="32"></a>
Lo que hicimos es que donde dice onMouseOver, ponemos la imagen que queremos que reemplace a la que esta originalmente. Y donde dice onMouseOut ponemos la imagen original. Finalmente, en donde dice img name, pusimos la imagen original.
Puedes copiar este código y sustiturlo en cada sitio apropiado dentro del lenguaje html y poner la ruta de las dos imágenes que quieres utilizar por las de image_01 y image_02 que son las de ejemplo