在带有 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，此小提琴将遍历每个 img 标签并在 hover 上添加一个事件，该事件更改内部 html 的描述段落以匹配图像的替代文本。 您可能应该将 class 添加到您想要的图像中，并且只处理这些图像，因为这会将效果添加到页面上的每个 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​​

Answer 2

我想你可以使用 CSS 来做到这一点。这里有很好的链接，可以使用 CSS 和 Javascript 来做到这一点：

• CSS 链接、文本和图像的鼠标悬停

• 创建鼠标悬停替代文字效果

• 类似 Alt Text 的效果：是否有用于此的 JS 事件/行为

让我知道。

Answer 3

要处理的问题太多，所以这里有一个工作示例：

<script type="text/javascript">

    function showAlt(evt) {

    // W3C event model uses event.target, IE event model uses event.srcElement
    var tgt = evt.target || evt.srcElement
    var el = document.getElementById('description');

    // Make sure tgt and el aren't undefined
    if (tgt && el) {

      // Use if el has no other content
      // Deal with the case where tgt doesn't have an alt property,
      // or the property has no value
      el.innerHTML = tgt.alt || '';
    }
}

</script>

<!-- Delegate event to parent element so only one listener -->
<!-- Pass the event object to the function, fixes cross browser issues -->
<ul onmouseover="showAlt(event);">
  <li><a href="#"><img src="a.jpg" alt="I am a"></a>
  <li><a href="#"><img src="b.jpg" alt="b am I"></a>
</ul>


<p style="text-align: center;" id="description"></p> 

Answer 4

这应该可以很好且高效地工作

<ul>
    <li class="slider"><a href="http://www.thelollypot.co.nz" target="_blank"><img src="images/thelollypot.jpg" alt="The Lolly Pot" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.tussockpeak.co.nz" target="_blank"><img src="images/tussockpeak.jpg" alt="Tussock Peak Motor Lodge" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.mbbh.co.nz" target="_blank"><img src="images/mbbh.jpg" alt="Monteith's Hanmer" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmerevents.co.nz" target="_blank"><img src="images/hanmerevents.jpg" alt="HanmerEvents" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmersecurity.co.nz" target="_blank"><img src="images/hsss.jpg" alt="HSSS" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmersprings.info" target="_blank"><img src="images/hanmerspringsinfo.jpg" alt="HanmerSprings.info" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmertech.com" target="_blank"><img src="images/hanmertech.jpg" alt="HanmerTech" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.chantellinis.com" target="_blank"><img src="images/chantellinis.jpg" alt="Chantellinis" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.theplanner.co.nz" target="_blank"><img src="images/theplanner.jpg" alt="The Planner" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmerweddings.co.nz"><img src="images/hanmerweddings.jpg" alt="Hanmer Weddings" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.kiwistamps.co.nz"><img src="images/kiwistamps.jpg" alt="KiwiStamps" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.tailormadesuits.co.nz"><img src="images/tailormadesuits.jpg" alt="Tailor Made Suits" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.buybodybuildingsupplements.co.nz"><img src="images/buybbs.jpg" alt="Bodybuilding Supplements" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.whatever-brass.co.nz"><img src="images/whatever.jpg" alt="Whatever! Brasserie" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.grumstours.com"><img src="images/grumstours.jpg" alt="Grums Tours" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.activityhanmer.co.nz"><img src="images/activityhanmer.jpg" alt="Activity Hanmer" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.annerleigh.co.nz"><img src="images/annerleigh.jpg" alt="Annerleigh B & B" onmouseover="onhover(this)"/></a></li>
    <li class="slider"><a href="http://www.hanmerfashion.co.nz"><img src="images/hanmerfashion.jpg" alt="Hanmer Fashion" onmouseover="onhover(this)"/></a></li>
</ul>
<p style="text-align:center" id="description"></p>
<script>
(function() {
    "use strict";
    var desc = document.getElementById("description");
    function out(e) {
        e || (e = window.event);
        desc.innerHTML = "";
        delete (e.target || e.srcElement).onmouseout;
    }
    window.onhover = function(img) {
        desc.innerHTML = img.alt;
        img.onmouseout = out;
    };
}());
</script>