Show Image Captions When Hovering

Question

I'm trying to use javascript to show the caption of an image only when it's being hovered, and have a default caption displayed when no image is hovered.

<ul class="logos">
    <li class="image-1"></li>
    <li class="image-2"></li> 
    <li class="image-3"></li> 
    <li class="image-4"></li> 
    <li class="image-5"></li>  
</ul>

<div class="captions">
    <p>Default caption</p>
    <p>This is a caption for the first logo</p>
    <p>This is a caption for the second logo</p>
    <p>This is a caption for the third logo</p>
    <p>This is a caption for the fourth logo</p>
    <p>This is a caption for the fifth logo</p>
</ul>

Any advice on how I could implement such an effect with javascript?

Answer 1

There's a better way to structure your page:

<script language="javascript" type="text/javascript">

    // sets the caption for the clicked img
    function caption(img){
       // finds the element with an id="caption"
       var ctrl = document.getElementById("caption");

       // sets the text of the element = the alt property of the img
       alert(img.alt);
       ctrl.innerText = img.alt;

       // sets the css display property = block (shows the element)
       ctrl.style.display = "block";

       // hides the defaultCaption element
       document.getElementById("defaultCaption").style.display = "none";
    }

    // shows the defaultCaption and hides the caption div
    function clearCaption() {
       document.getElementById("defaultCaption").style.display = "block";
       document.getElementById("caption").style.display = "none";
    }
 </script>

<ul class="logos">
    <!--
       alt : an alternative text description for an image
       onmouseover : event handler that fires as the mouse moves over image
       onmouseout : event handler that fires as the mouse moves off the image
    -->
    <li><img class="image-1" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
    <li><img class="image-2" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
    <li><img class="image-3" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
    <li><img class="image-4" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
    <li><img class="image-5" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
</ul>

<div id="caption" style="display:none"></div>
<div id="defaultCaption">default caption text</div>

UPDATED: Hadn't spotted that the image tags were malformed? - I've rewritten it as a list of images.

If your want li elements then change alt to title (in the elements and the code).

Answer 2

You even do not need JavaScript. You can achieve it via CSS.

See it in action at jsFiddle: http://jsfiddle.net/phusick/n6wTr/

Markup:

<div class="container">
    <ul class="logos">
        <li class="image i1">
            <p class="caption">1st caption</p>
        </li>
        <li class="image i2">
            <p class="caption">2nd caption</p>        
        </li> 
        <li class="image i3">
            <p class="caption">3rd caption</p>                
        </li> 
    </ul>
</div>

CSS:

div.container {
    position: relative;
    padding-top: 2em;
}

li.image p.caption {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

li.image:hover p.caption {
    display: block;
}​