Modificación de imagen
Me gustaria saber como conseguir el efecto siguiente, tenemos por ejemplo tres iconos y una imagen arriba, esta imagen cambia cuando pasamos el puntero del ratón por cada uno de los iconos.
Muchas gracias
Muchas gracias
1 Respuesta
Respuesta de extremo666
1
Lo q tendrias q hacer es modificar varias cosas si es para un menu tendras q poner el siguiente codigo dentro de la etiqueta head y sustituir las imagenes.
<head>
<script>
var coldColor = "tuimagen.gif"
var hotColor = "#tuotraimagen.gif"
var motionPix = "laultimaimagen.gif"
// do not edit below this line
// ======================================
var a='<style>'+
'A.InstantLink:link {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:visited {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;}'+
'A.InstantLink:active {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:hover {'+
' color:'+hotColor+';'+
' text-decoration:underline overline;'+
' padding:0 0 0 '+motionPix+';'+
' }'+
'</style>'
if (document.all || document.getElementById){
document.write(a)
}
</script>
</head>
y dentro de body copia los vinvulos
<body>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#6E6650">
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#141414">
<tr>
<td bgcolor="#141414">
<font face="Arial" size="2" color="#FEDCBA">
<a class="InstantLink" href="http://www.mundojavascript.com">Link 1</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.cambiabanners.com">Link 2</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.iaupa.com">Link 3</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.mundojavascript.com">Link 4</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.cambiabanners.com">Link 5</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.iaupa.com">Link 6</a><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Bueno espero q te alla servido si no aqui puedes encontrar mas ejemplo
http://www.mundojavascript.com
PD: no se te olvide finalizar tu pregunta..
Suerte
<head>
<script>
var coldColor = "tuimagen.gif"
var hotColor = "#tuotraimagen.gif"
var motionPix = "laultimaimagen.gif"
// do not edit below this line
// ======================================
var a='<style>'+
'A.InstantLink:link {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:visited {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;}'+
'A.InstantLink:active {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:hover {'+
' color:'+hotColor+';'+
' text-decoration:underline overline;'+
' padding:0 0 0 '+motionPix+';'+
' }'+
'</style>'
if (document.all || document.getElementById){
document.write(a)
}
</script>
</head>
y dentro de body copia los vinvulos
<body>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#6E6650">
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#141414">
<tr>
<td bgcolor="#141414">
<font face="Arial" size="2" color="#FEDCBA">
<a class="InstantLink" href="http://www.mundojavascript.com">Link 1</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.cambiabanners.com">Link 2</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.iaupa.com">Link 3</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.mundojavascript.com">Link 4</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.cambiabanners.com">Link 5</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.iaupa.com">Link 6</a><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Bueno espero q te alla servido si no aqui puedes encontrar mas ejemplo
http://www.mundojavascript.com
PD: no se te olvide finalizar tu pregunta..
Suerte
