imagenes que se emplifican

jcouoh · #1 (**permalink**) 12/07/2010, 14:09

Hola amigos,

Tengo una pagina que estoy haciendo el cual hace lo siguiente, cuando coloco mi cursor sobre un thumbnail esta se amplifica, es decir me muestra completa la imagen sobre el mismo thumbnail. lo cual es lo que quiero hacer, solo me gustaria añadir algo mas, quisiera que cuando se lea mi pagina en el navegador esta me muestre las imagenes en forma de marquee, es decir que se deslicen de derecha a izquierda.

si me pueden ayudar se los agradecere,

ahora les pongo mi codigo:

Código HTML:

<!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" />
<title>Create Resizing Thumbnails With Overflow Property</title>
<meta name="description" content="Create Resizing Thumbnails With Overflow Property">
</meta>

<style>

/* general */

	body {
		margin:0;
		padding:40px 80px;
		background:#fff;
		font:70% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
	}
	
	h1, h2{
		font-size:180%;
		font-weight:normal;
		color:#555;
	}
	h2{
		font-size:140%;
	}	
	p{
		margin:1em 0;
	}
	p.text{
		width:500px;
	}	
	a{
		color:#f20;
		text-decoration:none;
	}
	a:hover{
		color:#999;
	}
	img{
		border:none;
	}

/* // general */

/* thumbnail list */

	ul#thumbs, ul#thumbs li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	ul#thumbs li{
		float:left;
		margin-right:5px;
		border:1px solid #999;	
		padding:2px;
	}
	ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;		
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}
	
	/* mouse over */
	
		ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}
		ul#thumbs a:hover img{
			border:1px solid #999;	
			background:#fff;
			padding:2px;			
		}	
	
	/* // mouse over */

	/* clearing floats */
	
		ul#thumbs:after, li#thumbs:after{
			content:"."; 
			display:block; 
			height:0; 
			clear:both; 
			visibility:hidden;
			}
		ul#thumbs, li#thumbs{
			display:block;
			}
		/*  \*/
		ul#thumbs, li#thumbs{
			min-height:1%;
			}
		* html ul#thumbs, * html li#thumbs{
			height:1%;
			}	
	
	/* // clearing floats */




</style>
</head>
<body>


	
	<ul id="thumbs">
		<li><a href="http://cssglobe.com/"><img src="imagenes/002.jpg" /></a></li>
		<li><a href="http://cssglobe.com/"><img src="imagenes/image.jpg" /></a></li>
		<li><a href="http://cssglobe.com/"><img src="imagenes/image.jpg" /></a></li>
		<li><a href="http://cssglobe.com/"><img src="imagenes/image.jpg" /></a></li>
		<li><a href="http://cssglobe.com/"><img src="imagenes/image.jpg" /></a></li>
	</ul>
	
	


</body>
</html>

Saludos y de antemano muchas gracias por sus comentarios

jcouoh · #2 (**permalink**) 20/07/2010, 13:32

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

Jokuto · #3 (**permalink**) 28/07/2010, 08:31

Ok, a ver si he entendido bien tu problema, quieres que pare al pasar el raton por encima y cuando este fuera vuelva a moverse, no??
Pues pon onmouseout=""; al lado de onmouseover="" y ys estara.

jcouoh · #4 (**permalink**) 28/07/2010, 14:50

Gracias Jokuto, estare checando si lo puedo hacer. muchas gracias