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>
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.
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
I think you can do that using CSS. Here are good links to do it using CSS and Javascript:
Let me know.
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>
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>