Foros del web, para los que viven de bits

August · 25-mar-2008, 03:37

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-mar-2008, 04:07

Hola August

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

Mensaje movido desde Css.

Saludos,

cehojac · 25-mar-2008, 04:44

Cita:

Iniciado por JavierB

Hola August

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

Mensaje movido desde Css.

Saludos,

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

August · 25-mar-2008, 09:45

Cita:

Iniciado por cehojac

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-mar-2008, 05:15

se ve que no me creen veanlo bien es puro css

Dalvenjha · 28-mar-2008, 08:29

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-mar-2008, 09:52

Pues vale, volvamos a Css

Mikmoro · 28-mar-2008, 12:58

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</a>

<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>

</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-mar-2008, 15:58

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-mar-2008, 16:52

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-mar-2008, 18:35

Cita:

Iniciado por Mikmoro

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-mar-2008, 03:56

Cita:

Iniciado por August

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,

juaniquillo · 29-mar-2008, 09:51

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...

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.

25-mar-2008, 03:37	#1 (permalink)
August Fecha de Ingreso: febrero-2005 Mensajes: 413	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

25-mar-2008, 04:07	#2 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.859	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, __________________ Lee las Políticas de los foros y escribe correctamente.

25-mar-2008, 04:44	#3 (permalink)
cehojac Fecha de Ingreso: marzo-2008 Mensajes: 323	Re: Al pasar por imagen se haga grande y al picarle mas grande Cita: Iniciado por JavierB Hola August Si quieres que haga algo al hacer click, tendrás que usar JavaScript. Mensaje movido desde Css. Saludos, he visto la web y es un Css que utiliza divs con javascript para hacer los pases de un div a otro.

25-mar-2008, 09:45	#4 (permalink)
August Fecha de Ingreso: febrero-2005 Mensajes: 413	Re: Al pasar por imagen se haga grande y al picarle mas grande Cita: Iniciado por cehojac 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 Última edición por August; 25-mar-2008 a las 09:59.

27-mar-2008, 05:15	#5 (permalink)
August Fecha de Ingreso: febrero-2005 Mensajes: 413	Re: Al pasar por imagen se haga grande y al picarle mas grande se ve que no me creen veanlo bien es puro css

28-mar-2008, 08:29	#6 (permalink)
Dalvenjha Fecha de Ingreso: febrero-2008 Mensajes: 10	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.

28-mar-2008, 09:52	#7 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.859	Re: Al pasar por imagen se haga grande y al picarle mas grande Pues vale, volvamos a Css __________________ Lee las Políticas de los foros y escribe correctamente.

28-mar-2008, 12:58	#8 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.961	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.

28-mar-2008, 15:58	#9 (permalink)
August Fecha de Ingreso: febrero-2005 Mensajes: 413	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

28-mar-2008, 16:52	#10 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.961	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.

28-mar-2008, 18:35	#11 (permalink)
August Fecha de Ingreso: febrero-2005 Mensajes: 413	Re: Al pasar por imagen se haga grande y al picarle mas grande Cita: Iniciado por Mikmoro 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

29-mar-2008, 03:56	#12 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.859	Re: Al pasar por imagen se haga grande y al picarle mas grande Cita: Iniciado por August 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, __________________ Lee las Políticas de los foros y escribe correctamente.

29-mar-2008, 09:51	#13 (permalink)
juaniquillo Colaborador Fecha de Ingreso: noviembre-2005 Ubicación: San Juan Mensajes: 3.794	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... 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. __________________ Por fin.. tengo algo parecido a un blog Sólo espero escribir un artículo algún dia...

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado