beginner: getting position of item in array on mouseover

unicown · 11-21-2012, 11:12 AM

Hi, I am trying to make it so that when you hover over a specific image, the script grabs the title from that image and places it in a paragraph. At the moment, nothing happens when I hover over any image. I don't fully understand why it's not working but my guess would be it's because I should of specified the img position on mouseover (getImgs[x].onmouseover= imgOnHover

. How do I get the position of the item in that array that's being hovered over? is there a better way to write this code without changing the HTML?

Code:

<html>
<head>
<title>blah</title>
<script>
function init() {
var holder = document.getElementById("holder");
var getImgs = holder.getElementsByTagName("img");
var placeHere = document.getElementById("insert_here");

for(x=0; x<getImgs.length; x++){
getImgs[x].onmouseover= imgOnHover;

function imgOnHover() {
var getTitle = getImgs[x].title;
placeHere.innerHTML = getTitle;
}

}

}
window.onload = init;
</script>
</head>
<body>
<div id="holder">
<img src="image.jpg" title="one">
<img src="image.jpg" title="two">
<img src="image.jpg" title="three">
<img src="image.jpg" title="four">
<img src="image.jpg" title="five">
<img src="image.jpg" title="six">
<img src="image.jpg" title="seven">
</div>
<p id="insert_here"></p>
</body>
</html>

devnull69 · 11-21-2012, 11:22 AM

Magic keyword: "this"

Code:

function imgOnHover() {
   var getTitle = this.title;
   placeHere.innerHTML = getTitle;
}

unicown · 11-21-2012, 11:33 AM

/facepalm

thank you lol

Philip M · 11-21-2012, 12:10 PM

Code:

<script type = "text/javascript">
function getTitle(which) {
var t  = which.title;
alert (t);
}
</script>

<div id="holder">
<img src="image.jpg" title="one" onmouseover = "getTitle(this)">
<img src="image.jpg" title="two" onmouseover = "getTitle(this)">
</div>