Page 1 of 1

Onmouseover doesn't yield expected results.

Posted: Tue Jul 19, 2011 2:51 pm
by drayarms
I'm trying to use an onmouseover event to change the content of an image tag. So basically, the image tag has a default picture which the user can see when he visits the page. Then on rolling the mouse over this image, I want another image (003.jpg) located on my server in a folder called images, to be displayed in the image tag. So I created this function that should do the job and placed it in the head of my document.

Code: Select all

<script type='text/javascript'>

		function display_pic() {document.getElementbyId('poster_picture_content').innerHTML.src= 'images/003.jpg'}

</script>
And here is the image tag, located in the body section where I want 003.jpg to be displayed after the event is triggered.

Code: Select all

<img id='poster_picture_content' onmouseover='display_pic()'  src=\"images/" . $row['image'] . "\" width=\"280\" max-height=\"308\" />
Well I've been frying my brains, trying to figure out why the code wouldn't work. Any ideas? Thanks.

Re: Onmouseover doesn't yield expected results.

Posted: Tue Jul 19, 2011 4:15 pm
by sspatel82
Here is your solution:

Code: Select all

<img id='poster_picture_content' onmouseover='display_pic()'  src=\"images/" . $row['image'] . "\" width=\"280\" max-height=\"308\" />
<script type='text/javascript'>

	function display_pic() {
		document.getElementById('poster_picture_content').src= 'images/003.jpg'
	}

</script>
Two mistakes in your existing code...
(1) you wrote getElementbyId instead of getElementById.
(2) instead of document.getElementById('poster_picture_content').innerHTML.src you need document.getElementById('poster_picture_content').src

done my friend....

---------------
Sanket Patel

Re: Onmouseover doesn't yield expected results.

Posted: Tue Jul 19, 2011 5:46 pm
by califdon
Just to add, for clarification, innerHTML refers to text and other elements contained between an opening tag and its closing tag. What you are trying to change is one of the attributes of an <img tag (which doesn't have a closing tag, so it doesn't have an innerHTML property.

Re: Onmouseover doesn't yield expected results.

Posted: Tue Jul 19, 2011 9:43 pm
by drayarms
thank you guys. i now realize my mistake(s). and the code works perfectly on all browsers.

Re: Onmouseover doesn't yield expected results.

Posted: Tue Aug 16, 2011 10:55 pm
by danwguy
why even run a function for that, why not just do something simpler like... "<img id='poster_picture_content' onmouseover='this.src=\"images/003.png\"' src=\"images/" . $row['image'] . "\" width=\"280\" max-height=\"308\" />

Re: Onmouseover doesn't yield expected results.

Posted: Tue Aug 16, 2011 11:02 pm
by califdon
If that's the only place you'll use the function, there's no reason. Do it either way. In general, though, it is often simpler to write a function once, especially if it has several lines of code, than to write it inline in each <img > tag.