Moofilm (Tooltips-fader para imágenes)

Tooltips

Es una tooltip que aparece sobre un fondo en la imagen sobre la que se pasa el ratón, con la información de la misma y, si se quiere, un link.

Un ejemplo para entender mejor cómo funciona: pasad el ratón sobre el dibujo de una flor que hay en la sidebar de Este Blog; o entrad en la demo de la web del hack webhike.

A ver cómo se hace:

.- Vamos a colocar un CSS:

.use_credits {
display:none;
}

.moofilm {
text-align: center;
border: 0px none;
color: white;
background-color: black;
}

.film_title {
color:Pink;
margin-top:20px;
font-size: 14px;
font-weight: bold;
}

.film_info {
font-size: 0.85em;
line-height: 1.3em;
padding:5px;
margin:0 10px;
}

.film_link {
font-weight: bold;
color:lime;
}

.film_link:hover {
color:lime;
font-size:1.3em;
}

.- Los SCRIPTS: que podéis bajar en la página que os he dado. OJO CON EL MOOTOOLS... porque aquí se está aplicando ya la nueva versión Beta.

<script src='http://.../mootools-beta-1.2b2.js' type='text/javascript'/>

<script src='http://.../moofilm.0.4.js' type='text/javascript'/>







<script type='text/javascript'>

// var jQuery = jQuery.noConflict();

window.addEvent(&#39;domready&#39;, function() {

var credits = new MooFilm();

});

</script>

¡OJO!: Esta línea // var jQuery = jQuery.noConflict(); no va en el script original: la he incluído yo en mi blog de pruebas para evitar futuros conflictos con query, de manera que podéis eliminarla.

.- HTML: he probado a insertar este hack en una entrada, y no ha habido forma humana de que funcionase allí... la verdad que ni idea porqué :( . En cualquier otro lugar del blog (footer, sidebar, pie de entradas, cabecera...) funciona sin problemas (tengo que investigar más a fondo los scripts).

<ul class='items'>

<li class='item'>



<a class='use_film' href='http://cafe-junio.blogspot.com/' target='_blank' title='Flor'><img src='http://.../FlorBoli.jpg'/>

<div class='use_credits'>Flor: <br/>Dibujo con boli</div>

</a>

</li> </ul>