rollOrDie Posted July 28, 2008 Share Posted July 28, 2008 Im trying to code a function that will make the value of a paragraph element equal to the title attribute of an image, whenever the image is hovered. Basically my script puts every <img> tag into an array, and checks to see if it is inside a div with the id of 'portThumbWebsite'. if it is in that div, it is supposed to make the paragraph value change so that it is the same as the image's title attribute. Instead, the onMouseOver event handler just seems to be ignored, and the paragraphs value is just set to be the same as the last index of the array of image titles. Maybe the code will help to explain! // display the name of the project on thumb hover function thumbChange (thumbTitle) { // set pWebsite equal to image title on hover pWebsite = document.getElementById ('pWebsite'); pWebsite.firstChild.nodeValue = thumbTitle; } function portTitleDisplay () { // declare variables divPortThumb = document.getElementsByTagName ('img'); thumbId = new Array (); thumbTitle = new Array (); // loop through thumb id's titles num = divPortThumb.length; // declare index to be used as array indexes index = 0; for (i = 0; i < num; i ++) { // only perform in specified div divPortThumbId = divPortThumb[i].parentNode.parentNode.parentNode.id; if (divPortThumbId == 'portThumbWebsite') { thumbId[index] = divPortThumb[i].id; thumbTitle[index] = divPortThumb[i].title; // change value of pWebsite on hover of thumb thumbId[index].onMouseOver = thumbChange (thumbTitle[index]); index ++; } } } window.onload = portTitleDisplay; Does anyone know what I might be doing wrong? There appears to be no actual errors in the syntax. Quote Link to comment Share on other sites More sharing options...
lemmin Posted July 28, 2008 Share Posted July 28, 2008 There are a few things that are weird about your code: First thing I noticed was that you get ALL of the img objects and then check if they belong to a certain div. Why don't you just start out by getting all of the img tags that belong to the div? the "onmouseover" event should be all lowercase and when you dynamically set an event like that, you have to set it to a function. Also, if you had set it to a function, it wouldn't have the index that you specify because it is a separate function. Anyway, try doing it like this: <html> <head> <SCRIPT LANGUAGE="JScript"> function portTitleDisplay() { var imgs = document.getElementById('portThumbWebsite').getElementsByTagName('img'); for (var i=0;i<imgs.length;i++) imgs[i].onmouseover = function() {pWebsite.innerText = this.src;}; } </SCRIPT> </head> <bodY onload="portTitleDisplay()"> <p id="pWebsite"></p> <div id="portThumbWebsite"> <img src="1.jpg" title="Title1"> <img src="2.jpg" title="Title2"> </div> </body> </html> You can use "this" as the object that the event is fired on. Quote Link to comment Share on other sites More sharing options...
rollOrDie Posted July 28, 2008 Author Share Posted July 28, 2008 thanks Ill give it a try! I'd been thinking of a way to only search the div for images, I didnt know you could do it like that! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.