Foros del Web » Programando para Internet » Javascript »

mouse over - cambiar imagen de fondo

 Estas en el tema de mouse over - cambiar imagen de fondo en el foro de Javascript en Foros del Web. Como puedo cambiar el fondo de una capa a medida que voy tocando los diferentes links?? saludos...
  #1 (permalink)  
Antiguo 03/09/2005, 21:38
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
mouse over - cambiar imagen de fondo
Como puedo cambiar el fondo de una capa a medida que voy tocando los diferentes links??

saludos
  #2 (permalink)  
Antiguo 03/09/2005, 22:00
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
en el <head>

<style type="text/css">
<!--
.cambiarfondo { background-image: url(img/fondo1.gif)}
.cambiarfondox { background-image: url(img/fondo2.gif)}
-->
</style>


y luego:


<a href="#" onMouseOver="className='cambiarfondox'" onMouseOut="className='cambiarfondo'"> link</a>


suerte
__________________
by Capitán Buscapina
.
  #3 (permalink)  
Antiguo 04/09/2005, 18:04
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Código: 
<!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>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Dev-PHP 2.0.12" />
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
#ancla { height: 320px; width: 300px; margin: auto; border: 1px solid black}
#titulo { height: 20px; width: 300px; border-bottom: 1px solid black; text-align: center; line-height: 17px; font-family: Verdana; font-size: 12px;
font-weight: bold;}
.contiene {width:300px; height:300px }
.izquierda {width:150px; height:300px; float:left;}
.derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/Nuevacarpeta/mapa.gif);}
.provincias { height: 16px; width: 150px; border-bottom: 1px dotted black; text-indent: 2px; font-family: Trebuchet MS; overflow: hidden; font-size: 13px}
.provincias2 { height: 16px; width: 150px;  text-indent: 2px; font-family: Trebuchet MS; }
.buenos-aires { background-image: url(Images/mapa-argentina/Nueva carpeta/provincias/buenos-aires.gif)}
--></style>
	</head>

	<body>
		<div id="ancla">
			<div id="titulo">Selecciona tu provincia:</div>
			<div class="contiene">
				<div class="izquierda">
					<div class="provincias">Capital Federal</div>
					<div class="provincias"><a href="#" onMouseOver="derecha='buenos-aires'" onMouseOut="derecha='provincias'">Buenos Aires</a></div>
					<div class="provincias">Cordoba</div>
					<div class="provincias">Santa Fe</div>
					<div class="provincias">Mendoza</div>
					<div class="provincias">Corrientes</div>
					<div class="provincias">Misiones</div>
					<div class="provincias">Entre Rios</div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias2"></div>
				</div>
				<div class="derecha"></div>
			</div>
		</div>
	</body>
</html>
No funciona
  #4 (permalink)  
Antiguo 05/09/2005, 08:03
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
donde dice:

onMouseOver="derecha='buenos-aires'"

debe decir

onMouseOver="className='buenos-aires'"

ademas aclararte que buenos-aires aplica una imagen a un fondo, pero se lo estas aplicando a un link, en ves de una capa.
Si lo que queres es que al pasar el mouse sobre un enlace se modifique el fondo de una capa, tal vez te convenga en el evento ONMOUSEOVER llamar a una funcion, la cual modifique el fondo de la capa que quieras.

espero que te sirva.
__________________
by Capitán Buscapina
.
  #5 (permalink)  
Antiguo 05/09/2005, 11:26
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Cita:
Si lo que queres es que al pasar el mouse sobre un enlace se modifique el fondo de una capa, tal vez te convenga en el evento ONMOUSEOVER llamar a una funcion, la cual modifique el fondo de la capa que quieras.
Exacto esto nececito , como deberia ir en ese caso???

Saludos y gracias.
  #6 (permalink)  
Antiguo 05/09/2005, 17:04
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
proba con esto:

<html>
<head>
<style type="text/css">
<!--
.fondo { background-image: url(fondo1.gif)}
.fondo2 { background-image: url(fondo2.gif)}
-->
</style>
<script language="JavaScript">
function volver_fondo(id_capa){
document.getElementById(id_capa).className="fondo" ;
}
function cambiar_fondo(id_capa){
document.getElementById(id_capa).className="fondo2 ";
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="capa1" class="fondo" style="position:absolute; left:303px; top:1px; width:344px; height:167px; z-index:1"></div>
<div id="capa2" class="fondo" style="position:absolute; left:303px; top:246px; width:344px; height:167px; z-index:1"></div>
<a href="#" onMouseOver="cambiar_fondo('capa1')" onMouseOut="volver_fondo('capa1')">1</a>
<br><a href="#" onMouseOver="cambiar_fondo('capa2')" onMouseOut="volver_fondo('capa2')">2</a>
</body>
</html>



Tenes que tener en el mismo directorio dos imagenes (fondo1.gif y fondo2.gif)

Dependiendo de la cantidades de capas y fondos se pueden hacer otras cosas.


suerte.

PD. entra a hotscripts.com o dynamicsdrives.com (aunque por que no forosdelweb.com) que hay muchos ejemplos.
__________________
by Capitán Buscapina
.
  #7 (permalink)  
Antiguo 06/09/2005, 09:16
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
No puedo encontrar que estoy haciendo mal que no me funciona:

Código: 
	  <head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Dev-PHP 2.0.12" />
		<title>Untitled Page</title>
		
		<style type="text/css" media="screen"><!--
    #ancla { height: 320px; width: 300px; margin: auto; border: 1px solid black}
    #titulo { height: 20px; width: 300px; border-bottom: 1px solid black; text-align: center; line-height: 17px; font-family: Verdana; font-size: 12px; font-weight: bold;}
    .contiene {width:300px; height:300px }
    .izquierda {width:150px; height:300px; float:left;}
    #derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/mapa.gif);}
    .provincias { height: 16px; width: 150px; border-bottom: 1px dotted black; text-indent: 2px; font-family: Trebuchet MS; overflow: hidden; font-size: 13px}
    .provincias2 { height: 16px; width: 150px;  text-indent: 2px; font-family: Trebuchet MS; }
    .fondo  { background-image: url(Images/mapa-argentina/mapa.gif)}
    .fondo2 { background-image: url(Images/mapa-argentina/buenos-aires.gif)}
     --></style>
     <script language="JavaScript">
     function volver_fondo(id_capa){
     document.getElementById(id_capa).className="fondo";
     }
     function cambiar_fondo(id_capa){
     document.getElementById(id_capa).className="fondo2";
     }
     </script>
	   </head>

	<body>
		<div id="ancla">
			<div id="titulo">Selecciona tu provincia:</div>
			<div class="contiene">
				<div class="izquierda">
					<div class="provincias">Capital Federal</div>
					<div class="provincias"><a href="#" onMouseOver="cambiar_fondo('derecha')" onMouseOut="volver_fondo('derecha')">Buenos Aires</a></div>
					<div class="provincias">Cordoba</div>
					<div class="provincias">Santa Fe</div>
					<div class="provincias">Mendoza</div>
					<div class="provincias">Corrientes</div>
					<div class="provincias">Misiones</div>
					<div class="provincias">Entre Rios</div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias2"></div>
				</div>
				<div id="derecha"></div>
			</div>
		</div>
	</body>
</html>
Saludos y gracias
  #8 (permalink)  
Antiguo 06/09/2005, 09:50
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
cambia esta linea:

<div class="provincias"><a href="#" onMouseOver="cambiar_fondo('derecha')" onMouseOut="volver_fondo('derecha')">Buenos Aires</a></div>


por esta otra

<div id="bs_as" class="provincias"><a href="#" onMouseOver="cambiar_fondo('bs_as')" onMouseOut="volver_fondo('bs_as')">Buenos Aires</a></div>



hacé copy & paste.
__________________
by Capitán Buscapina
.
  #9 (permalink)  
Antiguo 06/09/2005, 09:54
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Claro pero ahi cambiaria el fondo de esa misma capa, yo quiero cambiar el fondo de la capa "derecha".

Saludos y gracias.
  #10 (permalink)  
Antiguo 06/09/2005, 16:36
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
perdon, el problema viene aquí:

#derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/mapa.gif);}


proba cambiarlo por

.derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/mapa.gif);}



y asignarle un class="derecha" la capa con el id=derecha


saludos


pd:al menos lo prebé y andaba
__________________
by Capitán Buscapina
.
  #11 (permalink)  
Antiguo 06/09/2005, 20:51
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Código: 
	  <head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Dev-PHP 2.0.12" />
		<title>Untitled Page</title>
		
		<style type="text/css" media="screen"><!--
    #ancla { height: 320px; width: 300px; margin: auto; border: 1px solid black}
    #titulo { height: 20px; width: 300px; border-bottom: 1px solid black; text-align: center; line-height: 17px; font-family: Verdana; font-size: 12px; font-weight: bold;}
    .contiene {width:300px; height:300px }
    .izquierda {width:150px; height:300px; float:left;}
    .derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/mapa.gif);}
    .provincias { height: 16px; width: 150px; border-bottom: 1px dotted black; text-indent: 2px; font-family: Trebuchet MS; overflow: hidden; font-size: 13px}
    .provincias2 { height: 16px; width: 150px;  text-indent: 2px; font-family: Trebuchet MS; }
    .fondo  { background-image: url(Images/mapa-argentina/mapa.gif)}
    .fondo2 { background-image: url(Images/mapa-argentina/buenos-aires.gif)}
     --></style>
     <script language="JavaScript">
     function volver_fondo(id_capa){
     document.getElementById(id_capa).className="fondo";
     }
     function cambiar_fondo(id_capa){
     document.getElementById(id_capa).className="fondo2";
     }
     </script>
	   </head>

	<body>
		<div id="ancla">
			<div id="titulo">Selecciona tu provincia:</div>
			<div class="contiene">
				<div class="izquierda">
					<div class="provincias">Capital Federal</div>
					<div class="provincias"><a href="#" onMouseOver="cambiar_fondo('derecha')" onMouseOut="volver_fondo('derecha')">Buenos Aires</a></div>
					<div class="provincias">Cordoba</div>
					<div class="provincias">Santa Fe</div>
					<div class="provincias">Mendoza</div>
					<div class="provincias">Corrientes</div>
					<div class="provincias">Misiones</div>
					<div class="provincias">Entre Rios</div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias"></div>
					<div class="provincias2"></div>
				</div>
				<div class="derecha"></div>
			</div>
		</div>
	</body>
</html>
Siguiendo lo que me dijiste deberia quedar asi cierto? pero no hay forma sigue sin funcionar... aparte el script en java no toma a la capa por el id??? igualmente suprimi la palabra id por class pero tampoco funciono...

Saludos.
  #12 (permalink)  
Antiguo 07/09/2005, 08:35
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
no, si le quitas el id=derecha, cuando llames a la funcion, ésta no va a saber a quien le tiene que cambiar el fondo.

fijate, lo modifiqé para hacerlo de otra forma:
Cita:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Dev-PHP 2.0.12" /> <title>Untitled Page</title> <style type="text/css" media="screen"><!-- #ancla { height: 320px; width: 300px; margin: auto; border: 1px solid black} #titulo { height: 20px; width: 300px; border-bottom: 1px solid black; text-align: center; line-height: 17px; font-family: Verdana; font-size: 12px; font-weight: bold;} .contiene {width:300px; height:300px } .izquierda {width:150px; height:300px; float:left;} .derecha {width:149px; height:300px; float:right; border-left: 1px solid black; background-image: url(Images/mapa-argentina/mapa.gif);} .provincias { height: 16px; width: 150px; border-bottom: 1px dotted black; text-indent: 2px; font-family: Trebuchet MS; overflow: hidden; font-size: 13px} .provincias2 { height: 16px; width: 150px; text-indent: 2px; font-family: Trebuchet MS; } --></style> <script language="JavaScript"> function cambiar_fondo(id_capa,imagen){ document.getElementById(id_capa).style.background= "url(images/mapa-argentina/"+imagen+".gif)"; } </script> </head> <body> <div id="ancla"> <div id="titulo">Selecciona tu provincia:</div> <div class="contiene"> <div class="izquierda"> <div class="provincias">Capital Federal</div> <div class="provincias"><a href="#" onMouseOver="cambiar_fondo('derecha','buenos-aires')" onMouseOut="cambiar_fondo('derecha','mapa')">Bueno s Aires</a></div> <div class="provincias">Cordoba</div> <div class="provincias">Santa Fe</div> <div class="provincias">Mendoza</div> <div class="provincias">Corrientes</div> <div class="provincias">Misiones</div> <div class="provincias">Entre Rios</div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias"></div> <div class="provincias2"></div> </div> <div id="derecha" class="derecha"></div> </div> </div> </body> </html>

tanto el ONMOUSEOVER como el ONMOUSEOUT laman a la misma funcion, donde el primer parametro debe ser el id de la capa (en este caso DERECHA) y el segundo parametro es la imagen de fondo (que para buenos aires sería buenos-aires, (sin el .gif o el .jpg)).

probado en ie, firefox y opera.
__________________
by Capitán Buscapina
.
Última edición por Cap.Buscapina; 07/09/2005 a las 09:28
  #13 (permalink)  
Antiguo 07/09/2005, 09:45
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Muchisimas Gracias!!! lo unico tenes idea porque no se centra la capa ahora???
  #14 (permalink)  
Antiguo 07/09/2005, 09:56
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
creo que el problema es que al ser un background , y el tamaño menor que la capa, este se repite tipo mosaico.

una solución es agregar un parametro en esta linea

url(images/mapa-argentina/"+imagen+".gif) aqui iria algo"

pero no se como es para que no se repita y se centre.

si no , otra opcion, es que en ves de cambiar el fondo de la capa, trabajes directamente con imagenes a las cuales le cambies el atributo SRC (y que no cambiaría demaciado el codigo)
__________________
by Capitán Buscapina
.
  #15 (permalink)  
Antiguo 07/09/2005, 11:23
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 19 años, 4 meses
Puntos: 1
Era por la falta del doctype, saludos y gracias una ves mas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:14.