PDA

View Full Version : Mouseover = Image + text in cell



Eclyps19
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!

Twey
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>';">
<tr>
<td id="addImage"></td>
<td id="addText"></td>
</tr>
</table>
One question: Eclipse or NetBeans? :)

Eclyps19
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.

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

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

Twey
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.

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

<body>

<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>
</body>
</html>


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.

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

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

sleric
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:

http://www.citynightslimousine.com/casanuestra.html

http://www.citynightslimousine.com/dutchhenry.html

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:

Twey
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.

Eclyps19
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...

hairpuller
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>

</table>

Twey
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.

hairpuller
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>

</table>

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