javascript - Show Image Captions When Hovering - Stack Overflow

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?

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?

• javascript
• html
• caption

Share Improve this question Follow asked May 18, 2012 at 21:44 RichRich 1,15633 gold badges1717 silver badges3737 bronze badges 2

• Can you not use alt="Caption"? – mawburn Commented May 18, 2012 at 21:48
• I could probably use title=, but I don't know how I'd implement to fit the requirements of the desired effect. – Rich Commented May 18, 2012 at 21:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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).

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

See it in action at jsFiddle: http://jsfiddle/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;
}​