El título sobre la foto

Monde es
1

Hola,

Tenía un reto sencillo, tengo una serie de imágenes como documentos anexos a una sección, quiero que esos documentos aparezcan en el cabezote del sitio pero que cuando se pase el ratón por encima aparezca el título del documento.

Estaba seguro que se podía hacer con solo hojas de estilo pero no se puede. Así que tuve que buscar un pequeño javascript, el bucle es este:

#capa1{ position:absolute; left: 0; top: 0; width:968px; height:150px; } #capa2{ position:absolute; top: 80; left: 600px; width:350px; height:50px; color:#FFF; visibility:hidden; font-family: Arial, sanserif; font-size: 3.5em; } img{ border: 0; }

<BOUCLE_banners(DOCUMENTS){id_rubrique=6}{0,1}{par hasard}>
#EMBED_DOCUMENT
#TITRE
</BOUCLE_banners>

Solo funcionaba perfectamente.

Lo puse en un archivo incluido y lo inserté en código de mis páginas y el sitio se « despelotó », el banner aparecía sobre la esquina del sitio, todo lo demás quedaba debajo. Obviamente el tema es que la posición está definida como absoluta, así que probé con posiciones relativas y tampoco, no podía usar tampoco posiciones absolutas que ubicaran esta parte en la posición en que lo necesitaba porque el resto de la página se iba debajo.

Asi que hice lo que por acá llamamos un machetazo, metí todo esto en un frame y lo forcé a ponerse en el sitio en el que quería que estuviera, pero quedo con la sensación que eso debía ser mucho más sencillo y efectivo. Agradezco consejos.

Muchas gracias,

Germán

–

Germán Bustos
Educador, Consultor en Tecnologías de Información y Comunicación
ATARRAYA: tejedores de saber social
german@atarraya.org - german.bustos.f@gmail.com
Tel [+57] 3177381339
Bogotá 111221, Colombia

2

Hola Germán,

Yo haría algo así, crearía un contenedor al que le pondría de fondo la imagen, y dentro del contenedor pondría el título de la imagen, algo así como:

<BOUCLE_banners(DOCUMENTS){id_rubrique=6}{0,1}{par hasard}>
<div id="capa1" style="background-image:url([(#URL_DOCUMENT|url_absolue)])">
   <h2 id="capa2">#TITRE</h2>
</div>
</BOUCLE_banners>

luego a traves de jquery o javascript haría que capa2 se escondiera y apareciera cuendo te pones encima de capa1

espero que sirva de ayuda

Germán Bustos wrote:

Hola,

Tenía un reto sencillo, tengo una serie de imágenes como documentos anexos a una sección, quiero que esos documentos aparezcan en el cabezote del sitio pero que cuando se pase el ratón por encima aparezca el título del documento.

Estaba seguro que se podía hacer con solo hojas de estilo pero no se puede. Así que tuve que buscar un pequeño javascript, el bucle es este:

<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
<style>
#capa1{
    position:absolute;
    left: 0;
    top: 0;
    width:968px;
    height:150px;
}
#capa2{
    position:absolute;
    top: 80;
    left: 600px;
    width:350px;
    height:50px;
    color:#FFF;
    visibility:hidden;
    font-family: Arial, sanserif;
    font-size: 3.5em;
}
img{
    border: 0;
}

</style>
<BOUCLE_banners(DOCUMENTS){id_rubrique=6}{0,1}{par hasard}>
<a id="capa1" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')" href="#URL_SITE_SPIP" target="_top">#EMBED_DOCUMENT</a>
<a id="capa2"> #TITRE</a>
</BOUCLE_banners>

Solo funcionaba perfectamente.

Lo puse en un archivo incluido y lo inserté en código de mis páginas y el sitio se "despelotó", el banner aparecía sobre la esquina del sitio, todo lo demás quedaba debajo. Obviamente el tema es que la posición está definida como absoluta, así que probé con posiciones relativas y tampoco, no podía usar tampoco posiciones absolutas que ubicaran esta parte en la posición en que lo necesitaba porque el resto de la página se iba debajo.

Asi que hice lo que por acá llamamos un machetazo, metí todo esto en un frame y lo forcé a ponerse en el sitio en el que quería que estuviera, pero quedo con la sensación que eso debía ser mucho más sencillo y efectivo. Agradezco consejos.

Muchas gracias,

Germán

--
------------------------------------------------------------------
Germán Bustos
Educador, Consultor en Tecnologías de Información y Comunicación
ATARRAYA: tejedores de saber social
german@atarraya.org <mailto:german@atarraya.org> - german.bustos.f@gmail.com <mailto:german.bustos.f@gmail.com>
Tel [+57] 3177381339
Bogotá 111221, Colombia

* Atarraya http://atarraya.org/
* Paz, Fuerza y Alegría http://pazfuerzayalegria.net/
* Facebook Buy Real Facebook Likes | Pay for FB Likes - Profile.to
* Recomiendo Your Personal Dashboard | NETVIBES
-------------------------------------------------------------------
------------------------------------------------------------------------

_______________________________________________
Spip-es@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-es