1

基本上我有一个滑块，当它悬停时，我想在段落中显示图像的 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>
4

4 回答 4

0

使用您的 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​​
于 2012-04-04T01:57:26.057 回答
0

我认为你可以使用 CSS 来做到这一点。以下是使用 CSS 和 Javascript 进行此操作的好链接：

让我知道。

于 2012-04-04T02:01:16.643 回答
0

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

<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>
于 2012-04-04T02:10:54.330 回答
0

这应该工作得很好而且很有效

<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>
于 2012-04-04T02:13:20.383 回答