View Full Version : Mouseover = Image + text in cell

10-07-2005, 03:08 PM
Okay, i've been doing java for a couple of years now, but just started javascript. What I need is to have a mouseover event put an image in one cell of a table and text in another cell. Any help would be greatly appreciated. Thanks!

10-07-2005, 04:39 PM
<table onmouseover="document.getElementById('addImage').innerHTML = '<img src=\'image.png\'/>'; document.getElementById('addText').innerHTML = '<p>Text goes here</p>';">
<td id="addImage"></td>
<td id="addText"></td>
One question: Eclipse or NetBeans? :)

10-15-2005, 01:11 PM
why can i not get this working? I think i'm just an idiot... =(

If i put it between the <script> it doesn't make the table but if i put it outside the <script> it doesn't do the mouse over... sorry i'm such a noob with this.

10-15-2005, 01:14 PM
Hm, what's your error?

10-15-2005, 01:19 PM
wow you're quick... no error just look at the previous post

10-15-2005, 01:43 PM
Don't put it in <script> tags, just add the above onmouseover event to whatever you want to mouseover, and set the IDs of the two cells for the content to appear in as above.

10-15-2005, 02:00 PM
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<p><img src="file:///C|/Documents%20and%20Settings/Renee/My%20Documents/Websites/slickandbubbas.jpg" width="89" height="48" onmouseover="document.getElementById('addImage').innerHTML = '<img src=\'image.png\'/>'; document.getElementById('addText').innerHTML = '
<p>Text goes here</p>';"></p>

<table width="472" height="128" border="1" >
<tr> <td id="addImage"></td> <td id="addText"></td> </tr> </table>

What i've got is just a picture at the top, i want the mouseover on that, and then the 2 cells at the bottom to display something.

10-15-2005, 02:10 PM
Take the newline away from before the paragraph.

10-15-2005, 02:15 PM
wow... something so simple... thanks a lot =)

10-19-2005, 08:35 AM
Does this script work with firefox and all other browsers. I'm havin a hard time getting it to work. I'm slightly rookie noob. go to:



Hopefuly by looking at those 2 pages you'll understand what i'm trying to accomplish by using script like this instead of having seperate html files for each winery info and the refresh blink of the seperate html files can be annoying too. I'm using dreamweaver, and a noobie at it. I'm a lil over my head as I'm sure you'll notice what I've been producing as a hobby.

anyone help.... :confused:

10-19-2005, 03:03 PM
Seems to work. Something you might want to do is specify the page to have a white background, because with my dark cyan default background it looks rather odd.

10-28-2005, 08:11 PM
I had a problem with that too... the client said it didn't work but it worked fine for me... hmmm...

06-12-2007, 07:03 PM
I know this is an old post but found it and this seems to be what I want to do. I'm having the same issue as the previous poster, I have my picture, but nothing is happening on mouseover, what am I doing wrong? Here is my code:

<p><img src="images/compass.jpg" width="89" height="48" onmouseover="document.getElementById('addImage').innerHTML = '<img src='images/compassovr.jpg'/'>'; document.getElementById('addText').innerHTML = '</p>
<p>Test Test Test</p>';">
<table width="472" height= "128" border="1" >
<tr> <td id="addImage"></td> <td id="addText"></td> </tr>


06-12-2007, 10:02 PM
Well your problem is simple: your string syntax is broken. You need to escape those quotes, which must be done using HTML entities since it's an HTML attribute:
onmouseover="document.getElementById('addImage').innerHTML = '<img src=&quot;images/compassovr.jpg&quot;>'; document.getElementById('addText').innerHTML = '<p>Test Test Test</p>';">That leading </p> and the '/' on the end of your image tag are also invalid, so I removed them. You should also look into using proper DOM methods rather than the non-standard innerHTML.

06-13-2007, 03:03 PM
Thanks for the quick reply, I copied your code into my document and it still doesn't work. Sorry, not really good at this. Here is my code now:

<img src="images/compass.jpg" width="89" height="48" onmouseover="document.getElementById('addImage').innerHTML = '<img src="images/compassovr.jpg">'; document.getElementById('addText').innerHTML = '<p>Test Test Test</p>';">

<table width="472" height= "128" border="1" >
<tr> <td id="addImage"></td> <td id="addText"></td> </tr>


Also, not sure what you meant by proper DOM methods.