Onmouseover doesn't yield expected results.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Onmouseover doesn't yield expected results.

Post 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.
sspatel82
Forum Newbie
Posts: 9
Joined: Tue Jul 19, 2011 10:52 am

Re: Onmouseover doesn't yield expected results.

Post 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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Onmouseover doesn't yield expected results.

Post 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.
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Re: Onmouseover doesn't yield expected results.

Post by drayarms »

thank you guys. i now realize my mistake(s). and the code works perfectly on all browsers.
danwguy
Forum Contributor
Posts: 256
Joined: Wed Nov 17, 2010 1:09 pm
Location: San Diego, CA

Re: Onmouseover doesn't yield expected results.

Post 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\" />
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Onmouseover doesn't yield expected results.

Post 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.
Post Reply