javascript - 使用 Javascript 在段落中显示图像 alt

Question

基本上，我有一个 slider ，我想在悬停时在段落中显示图像的 alt。 我正在尝试使用 getElementByID 设置一个包含图像 alt 内容的变量，并使用 JavaScript 将其插入到该段落中。我是新来的... 我得到了

    <script>
function linkDescription(){
           onmouseover=function() {
                         var newText = document.getElementById("website").alt
                         var placeToInsert = document.getElementById("description")
                         placeToInsert.appendChild(newText);
                     }
                     nodeAt.onmouseout=function() {
                           this.className="";
                     }
              }

window.onload=linkDescription;

</script>

<ul>
                    <li class="slider"><a href="http://www.thelollypot.co.nz" target="_blank"><img src="images/thelollypot.jpg" alt="The Lolly Pot" id="website"></a></li>
                    <li class="slider"><a href="http://www.tussockpeak.co.nz" target="_blank"><img src="images/tussockpeak.jpg" alt="Tussock Peak Motor Lodge" id="website"></a></li>
                    <li class="slider"><a href="http://www.mbbh.co.nz" target="_blank"><img src="images/mbbh.jpg" alt="Monteith's Hanmer" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmerevents.co.nz" target="_blank"><img src="images/hanmerevents.jpg" alt="HanmerEvents" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmersecurity.co.nz" target="_blank"><img src="images/hsss.jpg" alt="HSSS" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmersprings.info" target="_blank"><img src="images/hanmerspringsinfo.jpg" alt="HanmerSprings.info" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmertech.com" target="_blank"><img src="images/hanmertech.jpg" alt="HanmerTech" id="website"></a></li>
                    <li class="slider"><a href="http://www.chantellinis.com" target="_blank"><img src="images/chantellinis.jpg" alt="Chantellinis" id="website"></a></li>
                    <li class="slider"><a href="http://www.theplanner.co.nz" target="_blank"><img src="images/theplanner.jpg" alt="The Planner" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmerweddings.co.nz"><img src="images/hanmerweddings.jpg" alt="Hanmer Weddings" id="website"></a></li>
                    <li class="slider"><a href="http://www.kiwistamps.co.nz"><img src="images/kiwistamps.jpg" alt="KiwiStamps" id="website"></a></li>
                    <li class="slider"><a href="http://www.tailormadesuits.co.nz"><img src="images/tailormadesuits.jpg" alt="Tailor Made Suits" id="website"></a></li>
                    <li class="slider"><a href="http://www.buybodybuildingsupplements.co.nz"><img src="images/buybbs.jpg" alt="Bodybuilding Supplements" id="website"></a></li>
                    <li class="slider"><a href="http://www.whatever-brass.co.nz"><img src="images/whatever.jpg" alt="Whatever! Brasserie" id="website"></a></li>
                    <li class="slider"><a href="http://www.grumstours.com"><img src="images/grumstours.jpg" alt="Grums Tours" id="website"></a></li>
                    <li class="slider"><a href="http://www.activityhanmer.co.nz"><img src="images/activityhanmer.jpg" alt="Activity Hanmer" id="website"></a></li>
                    <li class="slider"><a href="http://www.annerleigh.co.nz"><img src="images/annerleigh.jpg" alt="Annerleigh B & B" id="website"></a></li>
                    <li class="slider"><a href="http://www.hanmerfashion.co.nz"><img src="images/hanmerfashion.jpg" alt="Hanmer Fashion" id="website"></a></li>
                </ul>
                <p style="text-align: center;" id="description">TEXT</p>

Answer 1

使用您的 html，此 fiddle 将迭代每个 img 标签，并在悬停时添加一个事件，该事件会更改描述段落内部 html 以匹配图像的替代文本。您可能应该向您想要的图像添加一个类，并且只处理这些图像，因为这会将效果添加到页面上的每个 img 标记。

http://jsfiddle.net/HPfv7/

好东西:

images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    image = images[i];
    image.addEventListener( 'mouseover', function() {
        document.getElementById('description').innerHTML = this.alt;
    }); // end addEvent
} // end for​​