Estoy tratando de tener una galeria de thumbnails que se deslicen y que cuando yo coloque mi cursor encima de la imagen la galeria deje de deslizrse y me muestre una imagen mas grande del thumbnail.
Aqui les dejo lo que he podido recopilar:
Código HTML:
html><head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#conten
{
height:83px;
}
.thumbnail{
position: relative;
top: 5px;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -10px;
left: -15px; /*position where enlarged image should offset horizontally */
}
</style>
<script language="JavaScript">
function function1(){
document.all.myMarquee.stop();
}
function function2(){
document.all.myMarquee.start();
}
</script>
</head>
<body>
<div id=conten>
<marquee align="left" id="myMarquee" width="900">
<a class="thumbnail" href="#thumb"><img src="tours/aktun-s.jpg" onmouseover="function1()" width="71px" height="53px" border="0" ><span><img
src="tours/aktun-b.jpg" onmouseout="function2()" ><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="tours/chichen-s.jpg" onmouseover="function1()" width="71px" height="53px" border="0" ><span><img
src="tours/chichen-b.jpg" onmouseout="function2()" ><br />So real, it's unreal. Or is it?</span></a></marquee>
</div>
<hr>
</body></html> si alguien puede ayudarme se lo agradeceré
Jorge