Ver Mensaje Individual
  #106 (permalink)  
Antiguo 15/02/2003, 08:56
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 10 meses
Puntos: 61
106. Cómo cambiar una imagen al hacer un MouseOver


P.-¿Cómo puedo cambiar la imagen de fondo de la página o una imagen cualquiera de la misma al hacer un mouseOver sobre un enlace?
R.-Con este código:
[Ver ejemplo]


Código PHP:
<html>
<
head>
<
style>
A{text-decoration:none;
color:#330099;
font:bold 10px/15px verdana;
}
A:HOVER{text-decoration:underline;}
</
style>
    <
title>Ejemplillo</title>
    <
script>

// Quiero agradecer públicamente la gran ayuda de tunait.
// Por enseñarme, entre otras muchas cosas, la importancia de la elección de la denominación de variables. 
// Estas variables pretenden ser una aplicación práctica de tantas conversaciones sobre las mismas. X·D



    
codigoQueTeAhorrasPicar="";
    
    function 
crear(a,b,c,d){
    
this.tezto=a;
    
this.ondeVa=b;
    
this.tieneSuImagensitaYTo=new Image
    this
.tieneSuImagensitaYTo.src=c;
    if(
d){this.queFotoCambio=d}
    }
//unEnlasito=new crear([TEXTO QUE APARECE EN EL ENLACE],[DESTINO DEL ENLACE],[RUTA DE LA IMAGEN],[ID DE LA IMAGEN QUE CAMBIA- SI SE DEJA EN BLANCO SE CAMBIA EL FONDO DE LA PÁGINA]);
    
unEnlasito=new Array;
    
unEnlasito[0]=new crear("Veamos la página de Tunait","http://www.tunait.com","http://www.tunait.com/encuentros/encuentrosb.jpg","macario");
    
unEnlasito[1]=new crear("Veamos la de Caricatos","http://www.pepemolina.com","http://www.forosdelweb.com/avatar.php?userid=18599&dateline=1037047895");
    
unEnlasito[2]=new crear("Quieres ver la página de Web Are You?","http://www.karlankas.net","http://www.webareyou.com/logo.jpg");

// fonditoMono=[EL FONDO QUE SE QUIERE PARA LA PÁGINA]    

    
fonditoMono="White url('http://www.klasic.org/img/klasic.jpg') no-repeat fixed center";
    
//---------------------------------------- NO TOQUES A PARTIR DE AQUI SI NO SABES LO QUE HACES ---------------------
    
for (principio=0;principio<unEnlasito.length;principio++){
    
codigoQueTeAhorrasPicar=codigoQueTeAhorrasPicar+"<a href="+unEnlasito[principio].ondeVa+" onmouseout='noQuieroVe(unEnlasito["+principio+"])' onmouseover='quieroVe(unEnlasito["+principio+"])'>"+unEnlasito[principio].tezto+"</a><br>";
    }
    
    function 
quieroVe(etoMimamente){
    if (
etoMimamente.queFotoCambio!=null){
    
fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
    
fotilloPaCambia.src=etoMimamente.tieneSuImagensitaYTo.src;
    }
    else{
cuerpoSerrano.style.background="White url("+etoMimamente.tieneSuImagensitaYTo.src+") no-repeat fixed center";}
    }
    function 
noQuieroVe(etoMimamente){
    if (
etoMimamente.queFotoCambio!=null){
    
fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
    
fotilloPaCambia.style.visibility="hidden";
    }
    else{
cuerpoSerrano.style.background=fonditoMono;}
    }
    
//----------------------------------- HALE, YA PUEDES TOCAR ----------//
        
</script>
</head>

<body id="cuerpoSerrano" onload="document.getElementById('cuerpoSerrano').style.background=fonditoMono">

<script>document.write(codigoQueTeAhorrasPicar)</script>

<!-- ESTAS IMAGENES SON DE PRUEBA. 'TUNAIT' CAMBIA LA FOTO MACARIO. 
SI ESTAS IMAGENES TIENEN CONTENIDO DESDE EL PRINCIPIO QUITA EL ONLOAD Y EL STYLE---->

<img id=pepe style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

<img id=juan style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

<img id=macario style="visibility:hidden" onLoad="this.style.visibility='visible'"><br>

</body>
</html> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 26/02/2003 a las 06:44