YoelMontes

MOUSEOVER->descripción para cada imagen

by cristian_cena

HTML

<div id="wrap">
<img class="image" src="http://www.abcfotos.com/images/fotos-paisaje-helado-p.jpg" alt="lorem ipsum img 1 ... <br />lorem ipsum img 1 ..."/>
<img class="image" src="http://beforeitsnews.com/ckfinder/userfiles/0000000000005477/images/volcano3.jpg" alt="lorem ipsum img 2 ..."/>
</div>    
<p id="text"><!-- contenido por defecto--></p>

CSS

p{outline:1px solid red;}

JavaScript

$(".image").hover(
    function(){
        var desc = $(this).attr("alt");
        $("#text").html(desc);
    },
    function(){
        //opcionalmente vaciamos <p>:
        //$("#text").empty();
    }
);