Foros del Web » Creando para Internet » CSS »

algo similar a flash pero con css

Estas en el tema de algo similar a flash pero con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/08/2008, 13:16
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
algo similar a flash pero con css

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #2 (permalink)  
Antiguo 07/08/2008, 13:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 07/08/2008, 13:52
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

claro pero la imagen del voton es en trasparente en realidad es texto y la otra imagen tiene transparencia
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #4 (permalink)  
Antiguo 07/08/2008, 15:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

De acuerdo. Y entonces... ¿cuál es el problema? ¿qué es lo que estás queriendo hacer y no sale?
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 08/08/2008, 07:01
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla

Última edición por virla; 08/08/2008 a las 07:02 Razón: modificar
  #6 (permalink)  
Antiguo 08/08/2008, 16:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

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

Aquí la hoja de estilo
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 11/08/2008, 07:06
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla

Última edición por virla; 11/08/2008 a las 07:07 Razón: correccion
  #8 (permalink)  
Antiguo 11/08/2008, 08:49
Avatar de c0lo  
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires
Mensajes: 281
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
Nuestro amo juega al esclavo // de esta tierra que es una herida
que se abre todos los días // a pura muerte, a todo gramo.
Violencia es mentir.
  #9 (permalink)  
Antiguo 11/08/2008, 11:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

Cita:
Iniciado por virla Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 11/08/2008, 12:00
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

ok agradezco, yo pense que podia hacerse con eso, pero no se bien como es que funciona
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #11 (permalink)  
Antiguo 11/08/2008, 17:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: algo similar a flash pero con css

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 11/08/2008, 17:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

Cita:
Iniciado por virla Ver Mensaje
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? Ver Mensaje
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........
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 11/08/2008, 18:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

Por cierto, kseso?: ¿habías visto este?
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 11/08/2008, 18:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: algo similar a flash pero con css

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 14/08/2008, 06:50
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

amigos alguien sabe si se puede hacer esto? y como poder hacerlo?
gracias
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #16 (permalink)  
Antiguo 14/08/2008, 09:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

¿Has investigado algo a partir del código que te pasé?
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 14/08/2008, 09:09
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #18 (permalink)  
Antiguo 14/08/2008, 10:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: algo similar a flash pero con css

No, me refiero a este que te puse en el mensaje número #12.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 14/08/2008, 10:58
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: algo similar a flash pero con css

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:19.