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.