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 を画像の代替テキストと一致するように変更します。おそらく、必要な画像にクラスを追加して、それらのみを処理する必要があります。これにより、ページ上のすべての 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 に答える