My goal here is to take an example from my book that displays different book covers upon button presses. The new part I need to add is to add an event listener that displays the title of the book when you hover over an image.
Note** I am using the title attribute to achieve showing the title when hovering, but I have to have the title text display under the book that has been hovered over
Why won't this work?
document.addEventListener("mouseover", function(){
document.getElementById("image").innerHTML = title;
});
I've included a link to my website as that would be easier than pasting all of the code. I am very new to using the DOM and AJAX in general. I'm not looking for any answers, just some help on understanding what I may be doing wrong.
http://ualr.edu/gawalker1/16%20CH%20HW/PullImagesOntoPage.html
What you're trying to do, I think, is event delegation. In order to do that, you have the right idea to listen on the parent element, like
document.addEventListener("mouseover", function(e){ ... });
(You must capture the event object, passed in as the first argument of the event listener function, which I've named e here.)
What you want to do is look at e.target, which is the element within document currently targeted by the mouseover event, and use its title property.
document.addEventListener("moveover", function(e) {
if(e.target && e.target.nodeName == "IMG") {
document.getElementById("image").innerHTML = e.target.title;
}
});
This will check the mouse has entered an <img> element, and if so, it will set innerHTML of the element with id="image" (which is currently missing from your page, but I assume you'll add it, or chose another ID that does exist on the page).
If you later have other images you don't want this behavior to apply to, you can either choose a more selective parent than the whole document, or add more conditions to the filtering if condition, like ... && e.target.class == "hover-target" to limit the behavior to images with a particular class.
apsillers answer is a great answer but I am assuming you were trying to target the image element with document.getElementById('image') and append a title to it. Also, my implementation uses the mouseover event only for image elements.
var images = document.getElementsByTagName('img'); // gets all images nodes and stores in an array
for (var i = 0, len = images.length; i < len; i++) { // loops through images array
images[i].addEventListener("mouseover", function() { // adds mouseover event to all image nodes
if (!this.hasTitle) { // checks if the image has a title (property that I have added)
var div = document.createElement("div"); // create new div element
var titleNode = document.createTextNode(this.title); // create text node with title of the image being hovered
div.appendChild(titleNode); // append text node to div element
insertAfter(div, this); // insert after image element
this.hasTitle = true; // set hasTitle to true
}
});
}
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}<div id="covers">
<ul>
<li><img title="Simply C++" src="http://test.deitel.com/images/thumbs/simplycpp.jpg"></li>
<li><img title="Simply VB 2008" src="http://test.deitel.com/images/thumbs/simplyvb2008.jpg"></li>
<li><img title="Simply Java" src="http://test.deitel.com/images/thumbs/simplyjava.jpg"></li>
</ul>
</div>The insertAfter function is from this stackoverflow answer.
</div>