Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Al pasar por imagen se haga grande y al picarle mas grande (http://www.forosdelweb.com/f53/pasar-por-imagen-haga-grande-picarle-mas-grande-568937/)

August 25/03/2008 03:37
Al pasar por imagen se haga grande y al picarle mas grande
 
Hola

Vi este ejemplo http://www.cssplay.co.uk/menu/lightbox3, solo quiero saber como le puedo hacer para al pasar por una imagen se haga grande y al hacer click se haga mucho mas grande, igual que en el ejemplo, pero sin haber la existencia de las pestañas a las cuales les pasan el raton y se aparece la galeria

A las pestañas que no quiero ver son las de Portraits, Landscapes, Birds

JavierB 25/03/2008 04:07
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Hola August

Si quieres que haga algo al hacer click, tendrás que usar JavaScript.

Mensaje movido desde Css.

Saludos, :adios:

cehojac 25/03/2008 04:44
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Cita:
Iniciado por JavierB (Mensaje 2335194)
Hola August

Si quieres que haga algo al hacer click, tendrás que usar JavaScript.

Mensaje movido desde Css.

Saludos, :adios:
he visto la web y es un Css que utiliza divs con javascript para hacer los pases de un div a otro.

August 25/03/2008 09:45
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Cita:
Iniciado por cehojac (Mensaje 2335210)
he visto la web y es un Css que utiliza divs con javascript para hacer los pases de un div a otro.
Es que no usa javascript, desahabiliten el javascript en el mozilla y sigue funcionando, nada mas para que vean, chequenlo bien no invoca ninguna funcion de JS

August 27/03/2008 05:15
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
se ve que no me creen veanlo bien es puro css

Dalvenjha 28/03/2008 08:29
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Ayayay caracas!! pues usa el Z:index y el img:hover pxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!! con el z index haces que se ponga por encima con el ikmg:hover le subes tamaño y con el active creo podrías hacer que sea más grande.

JavierB 28/03/2008 09:52
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Pues vale, volvamos a Css

Mikmoro 28/03/2008 12:58
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Sólo tienes que coger el código fuente y ver cómo está hecho.
Aplicándole unas pequeñas modificaciones, puedes eliminar las dos solapas que no querías y hacer que de inicio la galería esté a la vista.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

/* slides styling */

.photo {width:720px; height:600px; background:url(lbox/back.jpg) no-repeat center center; text-align:left; position:relative;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a ul li,
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a ul li a,
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a ul li a img,
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a ul li a img.large,
.photo ul.topic li ul li a img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}

.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}

.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;} </style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#portrait1"><img src="lbox/portrait1a.jpg" alt="" title="" /><img class="large" src="lbox/portrait1.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="lbox/portrait2a.jpg" alt="" title="" /><img class="large" src="lbox/portrait2.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="lbox/portrait3a.jpg" alt="" title="" /><img class="large" src="lbox/portrait3.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div></body>
</html>
No tengo las fotos, por eso no estoy seguro del todo de si funciona bien.
Recuerda que el autor pide encarecidamente que si vas a usar su codigo, al menos lo cites y mantengas su cabecera del css:

Cita:
/* ================================================== ==============
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
Mikel.

August 28/03/2008 15:58
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
jejeje si ya lo habia logrado modificar, se tardaron en creerme que si era css, jejeje, de cualquier modo gracias sera para la otra

Saludos

Mikmoro 28/03/2008 16:52
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Bueno, lamento decepcionarte pero cssplay exite hace bastante tiempo, y creo que por aquí todos sabemos qué cosas hacen sólo con css.

Saludos.

Mikel.

August 28/03/2008 18:35
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Cita:
Iniciado por Mikmoro (Mensaje 2341019)
Bueno, lamento decepcionarte pero cssplay exite hace bastante tiempo, y creo que por aquí todos sabemos qué cosas hacen sólo con css.

Saludos.

Mikel.
ya lo se, pero todos andaban diciendo que era javascript, a poco no te habias dado cuenta? jejeje

JavierB 29/03/2008 03:56
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
Cita:
Iniciado por August (Mensaje 2340964)
jejeje si ya lo habia logrado modificar, se tardaron en creerme que si era css, jejeje, de cualquier modo gracias sera para la otra

Saludos
Pues sí, lo de hacer click en una imagen suena, y mucho a JavaScript.

Visito esa página con frecuencia y nunca deja de asombrarme.

Saludos, :adios:

juaniquillo 29/03/2008 09:51
Re: Al pasar por imagen se haga grande y al picarle mas grande
 
yo también me quedé atónito al saber que era solo css. Lo primero que pensé cuando la vi fue: Uhhhhhhh!!! Yo creía que los de CSSPLAY no usaban javascript... :pensando:

Pero lo más admirable es que lo que hacen en esa pagina con experimentos que muchas veces no funcionan en todos los browsers, pero esta galería funciona bien todos los browser modernos.


La zona horaria es GMT -6. Ahora son las 10:38.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.