MooImageHover

ver AQUÍ, de momento...


---------------------

Bien: Como véis, cada imagen, al pasar el ratón sobre ella, presenta un texto transparente u otra imagen. Además, pueden contener un vínculo. Podéis encontrar el hack original en kevinandre.com.

Así se hace:

.- Un CSS genérico:

#image1, #image2, #image3 {
text-align: center;
height: 100px;
width: 408px;
border: 1px solid #111;
}
#image1 img, #image2 img, #image3 img {
}
/* examples classes */
.text-class1 {
font-weight: bold;
font-size: 35px;
color: #FFF;
white-space: nowrap;
}

.- SCRIPTS: Un Mootools combinado con ImageHover, más otro script con las especificaciones de vínculos y textos de cada imagen.

<script charset='utf-8' src='http://.../MooImageHover-p.js' type='text/javascript'/>





<script charset='utf-8' src='http://.../shCore.js' type='text/javascript'/>





<script charset='utf-8' type='text/javascript'>

window.addEvent(&quot;domready&quot;, function(){

dp.SyntaxHighlighter.HighlightAll(&#39;code1&#39;);

dp.SyntaxHighlighter.HighlightAll(&#39;code2&#39;);

dp.SyntaxHighlighter.HighlightAll(&#39;code3&#39;);

new MooImageHover($(&#39;image3&#39;), { text: &#39;MOO&#39; });

new MooImageHover($(&#39;image2&#39;), { useImage: true, imageSrc: &#39;http://kevinandre.com/lib/img/examples/hoverdownload.gif&#39;, link: &#39;http://kevinandre.com/lib/img/examples/hoverimg2.jpg&#39; });

new MooImageHover($(&#39;image1&#39;), { text: &#39;Es más complicado de lo que parece&#39;, textClass: &#39;text-class1&#39;, link: &#39;http://kevinandre.com/site/photography&#39; });

});

</script>

.- HTML: Atentos a las clases:
<div class='mainbox'>

<div id='image3'><img src='http://kevinandre.com/lib/img/examples/hoverimg3.jpg'/></div>



<br/>





<div id='image1'><img src='http://kevinandre.com/lib/img/examples/hoverimg1.jpg'/></div>



<br/>



<div id='image2'><img src='http://kevinandre.com/lib/img/examples/hoverimg2.jpg'/></div>