PDA

View Full Version : onmouseover event



todorstoianov
12-26-2006, 09:59 PM
I have a table with two columns.
<table>
<tr><td><a href="...">Text here</a></td>
<td></td></table>
I want when I move the mouse pointer on the "Text here" in the first column, the picture appears in the second blank column, but the text to stay in place. And when I move out the mouse pointer the picture disappears.
Is there a way to do that with DHTML?
Thanking you in advance.
And please excuse my english.:)

djr33
12-27-2006, 04:01 AM
<a href="image.jpg" onMouseover="return false; document.divname.innerHTML='<img src=\"+this.href+''\">';">click me</a>
Make a div in the place you want it to appear.
Since I'm not great at javascript, I'm not sure if that will work, but I'm hoping it'll help you to get a bit closer.
Basically, as a backup, it points to the image, so if javascript isn't enabled, they go to the picture. That's good. If it is enabled, it uses return false to not go to the link and instead changes the html of <div> 'divname' to an image tag including 'this.href' which means what the link is pointing to.
Good luck.

codeexploiter
12-27-2006, 04:29 AM
<html>
<head>
<script type="text/javascript">
function doIt(objName,status)
{
var obj = document.getElementById(objName);


if(status == 0)
obj.style.visibility = "visible";
else
obj.style.visibility = "hidden";
}
</script>
</head>
<body>
<table width="300">
<tr>
<td width="100"><a href="#" onmouseover="doIt('test',0);" onmouseout="doIt('test',1);">This is a test</td>
<td width="200"><img id="test" src="n.jpg" border="0" style="visibility:hidden;"></td>
</tr>
</table>

djr33
12-27-2006, 06:57 AM
Would my approach work? (Assuming the syntax were correct.)
And... er.. yeah, I forgot the onmouseout :p

todorstoianov
12-28-2006, 05:00 PM
Thank you very much guys. It really works. :)