algo similar a flash pero con css

virla · #1 (**permalink**) 07/08/2008, 12:16

Estoy haciendo una publi que contiene tres botones que al pasar por arriba muestra una imagen de fondo, llegue hasta la parte de los botones pero no se como hacer lo demas, por ahi alguno de los maestros me pueda decir como o en donde hay algo similar para estudiar el codigo
aca mi codigo

Código:

#ContPubli01 .ContMenuPubl01       { width: 838px; height: 135px; position: relative; top: 205px; }
.ContMenuPubl01 .btoPubli a        { width: 272px; height: 135px; float: left; background: url(dblog/template/RebCom/gfx/btoPub_link.png) no-repeat; }
.ContMenuPubl01 .btoPubli a:hover  { background: url(dblog/template/RebCom/gfx/btoPub_hover.png) no-repeat; }
-->
</style>

    <div id="ContPubli01">
      <div class="ContMenuPubl01">
        <div class="btoPubli"><a href="#" style="margin-right: 10px;"><img src="../<%=MiFoto%>" width="272px" height="135px" border="0" /></a></div>
        <div class="btoPubli"><a href="#" style="margin-right: 10px;"><img src="../<%=MiFoto%>" width="272px" height="135px" border="0" /></a></div>
        <div class="btoPubli"><a href="#"><img src="../<%=MiFoto%>" width="272px" height="135px" border="0" /></a></div>
      </div>
    </div>

desde ya muchas gracias al que pueda ayudarme

Mikmoro · #2 (**permalink**) 07/08/2008, 12:42

No entiendo muy bien tu consulta: si en los enlaces tienes una imgen incrustada, aunque cambies el fondo al pasar el ratón, éste quedará detrás de la imagen y no se verá.

Lo dicho, imagino que es que no te he entendido.

virla · #3 (**permalink**) 07/08/2008, 12:52

claro pero la imagen del voton es en trasparente en realidad es texto y la otra imagen tiene transparencia

Mikmoro · #4 (**permalink**) 07/08/2008, 14:38

De acuerdo. Y entonces... ¿cuál es el problema? ¿qué es lo que estás queriendo hacer y no sale?

virla · #5 (**permalink**) 08/08/2008, 06:01

un boton vale mas que mil palabras o algo asi es el dicho
http://www.preview.com.br/
al ingresar a ese sitio tiene una publi o algo asi como lo que quiero hacer donde pasas por arriba de los botones y cambia la imagen de fondo del contenedor y al presionar ingresa a la opcion deseada
Se que el de la pagina esta hecha con flash pero yo de flash nada y se que en css y por ahi con alguna convinacion de javascript se puede hacer pero estoy casi seguro que con solo css es posible

Mikmoro · #6 (**permalink**) 08/08/2008, 15:57

Igual este ejemplo te puede dar una idea de cómo se hace eso en CSS.

Aquí la hoja de estilo

virla · #7 (**permalink**) 11/08/2008, 06:06

Bueno amigo eso me funciono super bien salvo por un par de cosas, que por ahi vos sabras como se puede hacer

la cosa es que ahora me queda me queda como si fueran pestañas y lo que necesito es que sea como lo que esta en la pagina que deje que lo que vendria a ser pestañas este dentro y que siempre esten visibles sea cual sea la imagen de fondo se vean las dos pestañas he intentado un par de cosas pero no me funcionan

dejo el codigo por las moscas

css

Código:

*                   { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; outline: 0px }
HTML                { WIDTH: 100%; HEIGHT: 100% }
BODY                { WIDTH: 100%; : 100% }
#contenedor         { width: 840px; height: 350px; padding: 0px 20px 0px 20px; POSITION: relative; }
#contenido          { width: 838px; height: 350px; top:-135px; left: 0px; !important POSITION: absolute; }
#explicacion        { MARGIN: 0px }
UL                  { width: 838px; height: 135px; LIST-STYLE-TYPE: none; }
LI                  { width: 272px; height: 135px; FLOAT: left; }
A                   { width: 272px; height: 135px; DISPLAY: inline-block; background: url(FCSS - Hosting_archivos/btoPub_link.png) no-repeat; }
A:hover             { POSITION: relative; background: url(FCSS - Hosting_archivos/btoPub_hover.png) no-repeat; }
A SPAN.solapa       { WIDTH: 838px; height: 135px; DISPLAY: none; LEFT: 18px; POSITION: absolute; TOP: 21px; }
A:hover SPAN.solapa { DISPLAY: block }
SPAN.texto_tab      { DISPLAY: block; LEFT: 0px; }
P                   { DISPLAY: block; }
#texto1             { LEFT: 0px; TOP: -67px; }
#texto2             { LEFT: -272px; TOP: -67px; }
#texto3             { LEFT: -544px; TOP: -67px; }
#texto4             { LEFT: 0px; }

html

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html4...1224/loose.dtd">
<HTML lang=es-es xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>FCSS - Hosting</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1"><LINK 
media=all href="FCSS%20-%20Hosting_archivos/solapashover.css" type=text/css 
rel=stylesheet>
<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
 <BODY>
  <DIV id=contenedor>
     <UL>
    <LI>
                    <A href="#">
                        <SPAN class="solapa" id="texto1">
                            <SPAN class=texto_tab><img src="FCSS - Hosting_archivos/Publi1.png"></SPAN>
                        </SPAN>
                     <img src="FCSS - Hosting_archivos/5mini.jpg">
                    </A>
       </LI>
               <LI>
                 <A href="#">
                        <SPAN class=solapa id=texto2>
                            <SPAN class=texto_tab>
                                <img src="FCSS - Hosting_archivos/Publi02.png">
                            </SPAN>
                        </SPAN>
                     <img src="FCSS - Hosting_archivos/9mini.jpg">
                    </A>
    </LI>
               <LI>
                 <A href="#">
                        <SPAN class=solapa id=texto3>
                            <SPAN class=texto_tab>
                                <img src="FCSS - Hosting_archivos/publi03.png">
                            </SPAN>
                        </SPAN>
                     <img src="FCSS - Hosting_archivos/10mini.jpg">
                    </A>
    </LI>
            </UL>
   <DIV id=contenido>
    <DIV id=explicacion></DIV>
  </DIV>
 </DIV>
 </BODY>
</HTML>

espero puedas darme una mano
gracias

c0lo · #8 (**permalink**) 11/08/2008, 07:49

Cita:

Iniciado por Mikmoro

Igual este ejemplo te puede dar una idea de cómo se hace eso en CSS.

Aquí la hoja de estilo

¡Guau!

Muy buen ejemplo, super interesante! Funciona hasta en el 6 :). Gracias

Saludos

Mikmoro · #9 (**permalink**) 11/08/2008, 10:20

Cita:

Iniciado por virla

la cosa es que ahora me queda me queda como si fueran pestañas y lo que necesito es que sea como lo que esta en la pagina que deje que lo que vendria a ser pestañas este dentro y que siempre esten visibles sea cual sea la imagen de fondo se vean las dos pestañas he intentado un par de cosas pero no me funcionan

Eso tiene una extraordinaria complicación para IE6, porque este navegador tiene problemas con el z-index y el posicionamiento en profundidad de las capas. Lo miraré a ver, pero creo que no a va ser fácil de conseguir.

virla · #10 (**permalink**) 11/08/2008, 11:00

ok agradezco, yo pense que podia hacerse con eso, pero no se bien como es que funciona

kseso? · #11 (**permalink**) 11/08/2008, 16:28

Cita:

Iniciado por Mikmoro

Igual este ejemplo te puede dar una idea de cómo se hace eso en CSS.

Aquí la hoja de estilo

Jeje, me lo quedo, y me estoy

iniciar una campaña para que se cambie el 403/404 por un index

Un saludo.

Mikmoro · #12 (**permalink**) 11/08/2008, 16:53

Cita:

Iniciado por virla

ok agradezco, yo pense que podia hacerse con eso, pero no se bien como es que funciona

Mira, como te decía, este ejemplo como siempre funciona perfectamente en Firefox, Opera, Safari, pero el estúpido Explorer no sabe cambiar el z-index (nivel de profuncidad) a las capas con los pseudo-elementos, y por eso no es posible hacer que al mostrar una foto de fondo no quede por encima de los enlaces que estén antes que él, o al menos yo no la conozco.

Si se me ocurre algo ya te lo diré.

Cita:

Iniciado por kseso?

Jeje, me lo quedo, y me estoy

iniciar una campaña para que se cambie el 403/404 por un index

Un saludo.

Ya sabes que lo del index me da una pereza........

Mikmoro · #13 (**permalink**) 11/08/2008, 17:02

Por cierto, kseso?: ¿habías visto este?

kseso? · #14 (**permalink**) 11/08/2008, 17:54

Ta güeno

500 clik´s con ff y el firebug chispeando y nada (creí que era yo y eché otras tantas miradas al reloj).
Me has hecho cargar el ie de mierda$oft para descubrir ese otro efecto.

Y con Opera, si sueltas, el pájaro vuela

Pero el anterior me viene de perlas para un par dehuecos libres que me han quedado en el blog y que no quería usar más js.
SIGO RECLAMANDO EL INDEX!!!

P.D.: aunque al final no utilicé tu menú, me he permitido esto (bottom left).
Un saludo

virla · #15 (**permalink**) 14/08/2008, 05:50

amigos alguien sabe si se puede hacer esto? y como poder hacerlo?
gracias

Mikmoro · #16 (**permalink**) 14/08/2008, 08:07

¿Has investigado algo a partir del código que te pasé?

virla · #17 (**permalink**) 14/08/2008, 08:09

si amigo lo que te comente anteriormente, todo funciona bien pero me queda en formato de pestañas fura del marco y necesito que queden dentro del marco y que las imagenes a mostrar no me tapen las pestañas como en el ejemplo que deje

Mikmoro · #18 (**permalink**) 14/08/2008, 09:42

No, me refiero a este que te puse en el mensaje número #12.

virla · #19 (**permalink**) 14/08/2008, 09:58

perdon amigo ese lo no vi y si esta super bueno, ya le meto mano a eso, te agradezco la ayuda, muchas gracias fue muy util