在Javascript中显示图像中的图像alt

Question

基本上我有一个滑块，我想在一个段落中显示一个图像的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标签和悬停改变说明添加事件段落内部的HTML图像的ALT文本匹配。您可能应该为所需的图像添加一个类并仅处理这些图像，因为这会将该效果添加到页面上的每个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 mouseover for links, text, and images

• Creating a mouseover alt text effect

• Alt Text-like effect: Is there a JS event/behavior for this

让我知道。

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>