Show an image alt in a paragraph with Javascript

Go To StackoverFlow.com

1

Basically I have a slider and I want to show the alt of an image in a paragraph when it's hovered. I'm trying to set a variable with the content of the alt of the images using getElementByID and to insert it into that paragraph using JavaScript. I'm new to this... I got

    <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>
2012-04-04 01:42
by Ben Dubuisson
I got that: Ben Dubuisson 2012-04-04 01:52


0

Using your html, this fiddle will iterate through every img tag and add an event on hover that changes the description paragraphs internal html to match the image's alt text. You should probably add a class to the images you want and only process those, as this will add the effect to EVERY img tag on the page.

http://jsfiddle.net/HPfv7/

the good stuff:

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-04 01:57
by Collin Green
addEventListener is not supported by a good number of browsers in use - RobG 2012-04-04 02:09
I see. If maximum compatibility is your goal maybe you would benefit from using one of the popular javascript libs. My preference is mootools, but JQuery is more popular. They have nice easy interfaces to this kind of thing that works across 'a good number of browsers in use' - Collin Green 2012-04-04 04:16
If maximum compatiability is the goal, don't use one of the common libraries. They only support a subset of "popular" browsers. Though MyLibrary combined with a sound development methdology and application architecture will go a lot further than most - RobG 2012-04-04 07:21


0

I think you can do that using CSS. Here are good links to do it using CSS and Javascript:

Let me know.

2012-04-04 02:01
by Christian Vielma


0

Too many issues to deal with, so here's a working example:

<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-04 02:10
by RobG
Legend! you made it look so simple Thanks a million. I can't vote yet as I'm new.. - Ben Dubuisson 2012-04-04 22:52
Does evt gets replaced by image in the process ? also you call showalt(event) but defined showalt(evt), how does that work - Ben Dubuisson 2012-04-04 22:58
The listener passes a global event object to the function, where reference to it is assigned to the local evt variable. In javascript, parameters are passed by order - RobG 2012-04-05 05:05


0

This should work pretty well and efficiently

<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-04 02:13
by Eric
@Ben , if my answer worked for you can you vote up or accept it - Eric 2015-10-24 17:56