简体   繁体   English

悬停时显示图像标题

[英]Show Image Captions When Hovering

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. 我正在尝试使用javascript来显示图像的标题,只有在它悬停时,并且在没有图像悬停时显示默认标题。

<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实现这样的效果的任何建议?

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). 如果你想要li元素然后将alt更改为title (在元素和代码中)。

You even do not need JavaScript. 你甚至不需要JavaScript。 You can achieve it via CSS. 你可以通过CSS实现它。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM