...

View Full Version : show/hide



dddm
06-06-2006, 01:23 AM
Hello, ok I need a script so that when the user mouses over b '<div id="a"></div>' is hidden and '<div id="b"></div>' is shown and when they mouse out 'b' is hidden and 'a' is shown and when the page loads 'a' is shown. Iv been looking everywhere for a script and cant find one. Any ideas?


<a onMouseOver="show('b')" onMouseOut="hide('b');show('a')">b</a>
<div id="a">content a</div>
<div id="b">content for b</div>

or something like that

Kravvitz
06-06-2006, 02:18 AM
Here's one way to do that.

<script type="text/javascript">
if(document.all && !document.getElementById) { //IE4 support
document.getElementById = function(id) { return document.all[id]; }
}
function show(id) {
if(!document.getElementById) return;
document.getElementById(id).style.display='';
}
function hide(id) {
if(!document.getElementById) return;
document.getElementById(id).style.display='none';
}
</script>

Oakendin
06-06-2006, 03:00 AM
http://www.codingforums.com/showthread.php?t=30448

dddm
06-06-2006, 04:29 AM
Thanks Oakendin, one more question as you can see on my page http://digitaldreamdoor.sytes.net (rollover "a | b | c") even when the rows are hidden they still take up space. How can I fix this?

Kravvitz
06-06-2006, 04:38 AM
Use the display property instead of the visibility property.

The code in that thread is a bit dated.

dddm
06-06-2006, 05:29 AM
Thanks Kravvitz, I wasn't able to get your code working. (im not very good with javascript)

Kravvitz
06-06-2006, 05:33 AM
Sorry. I forgot the style object. I edited the code I posted earlier. Try it again.

dddm
06-06-2006, 05:47 AM
Now it works. Thank you very much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum