imagen de sustitucion

daxmarly · #1 (**permalink**) 06/12/2012, 12:15

hola por aquí de nuevo con un problemita, alguien me podría decir porque en google chrome no funciona este código

<a href="contenido/admin.html">
<img src="img/botones/admin.png" id="a" onMouseOver="a.src='img/botones/admin1.png'" onMouseOut="a.src='img/botones/admin.png'" border="0">
</a>

y que otra forma puedo hacer un boton con imagen de sustitución que me funcione en google chrome...!!

David · #2 (**permalink**) 06/12/2012, 12:49

Es mejor que uses document.getElementById() para obtener el elemento en lugar de hacer referencia al id en el ámbito global. También, puedes usar el selector :hover en CSS para obtener el mismo efecto.

emprear · #3 (**permalink**) 06/12/2012, 15:28

Si vas a realizar el cambio sobre el mismo elemento, podés utilizar la propiedad this

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="contenido/admin.html">
<img src="bg2.jpg" onmouseover="this.src='los-simpsons.jpg'" onmouseout="this.src='bg2.jpg'" border="0" alt="" width="200" height="200"/>
</a>
</body>
</html>

Y si usas el pseudoelememto :hover como te indica @david, dale display block a tu link y modifica el background-image

SAludos