Foros del Web - Ver Mensaje Individual

emprear · #9 (**permalink**) 09/12/2011, 11:48

Asi está mas claro
la cosa cambia un poco, ahora donde estaba el menu aparecería una descripción

podés hacer esto

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" />
 
<style type="text/css">
/*<![CDATA[*/
 
div.contiene_foto{
width: auto;
height:auto;
float: left;
}
 
div#desc{
width:200px;
height:200px;
float: left;
border: solid 1px # 000;
margin-left: 5px;
font-family: arial, sans-serif;
color: red;
}
/*]]>*/
</style>
</head>
<body>
<div class="contiene_foto">
<img src="uno.jpg" width="100" height="100" alt="imagen 1"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 1';"  onmouseout="document.getElementById('desc').innerHTML='';" /><br />
<img src="dos.jpg" width="100" height="100" alt="imagen 2"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 2';"  onmouseout="document.getElementById('desc').innerHTML='';"/><br /> 
<img src="tres.jpg" width="100" height="100" alt="imagen 3"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 3';"  onmouseout="document.getElementById('desc').innerHTML='';"/><br />
</div>
<div id="desc">
<!-- descripción -->
</div>
</body>
</html>

el principio es similar, lo hacemos con javascript, pero en el mouseover en lugar de estar cambiando el valor del src para una imagen, hacemos que se cambie otra propiedad, el innerHTML del div que contiene la descripción. fijate que dicha div, ahora tiene un id, en lugar de un class, porque es necesario identificarla inequivocamente en el documento

Saludos