[RESOLVED] Roll over HELP!

**dandaman2007** · 11-02-2007, 07:08 AM

Hi all,

I have this little javascript that it kind of like a traditional "Menu Tree" application.

Basically i want to alter the code to expand upon rollover and then close back up upon rollout. Any ideas people? Javascript itsnt really my thing if i'm honest. I know a bit though.

Thanks all

Code:

	<script language="javascript" type="text/javascript">
		function Toggle(item) {
		   obj=document.getElementById(item);
		   visible=(obj.style.display!="none")
		   key=document.getElementById("x" + item);
		   if (visible) {
			 obj.style.display="none";
			 key.innerHTML="[+]";
		   } else {
			  obj.style.display="block";
			  key.innerHTML="[-]";
		   }
		}
	</script>
	
    <B><A id=x1 href="javascript:Toggle('1')">[+]</A>&nbsp;<A href="javascript:Toggle('1')">I. Hotel “Metropol” Ohrid</A></B>
		<BR>
		  <DIV id=1 style="DISPLAY: none; MARGIN-LEFT: 2em">
				<div id="Font">
						The hotel has its own parking space for its guests for 100 cars.
					</h1>
				</div>
			</DIV>

**Fang** · 11-02-2007, 08:37 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="application/javascript">
function showHide(parent) {
var aDD=parent.getElementsByTagName('dd');
for(var dd=0; dd<aDD.length; dd++) {
    aDD[dd].style.display=(aDD[dd].style.display=='none')? 'block' : 'none';
    }
}

window.onload=function() {
var aDT=document.getElementsByTagName('dt');
for(var i=0; i<aDT.length; i++) {
    aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
    showHide(aDT[i].parentNode);
    }
};
</script>

<style type="text/css">
 
</style>

</head>
<body>
<dl>
<dt>I. Hotel "Metropol" Ohrid</dt>
<dd>The hotel has its own parking space for its guests for 100 cars.</dd>
</dl>
<dl>
</body>
</html>

**dandaman2007** · 11-02-2007, 08:42 AM

I ****ing lvoe you.......

Thanks buddy, Appreciated!

**dandaman2007** · 11-02-2007, 09:35 AM

Hi again,

Thanks for the help fang.

Although this did fix my problem, which is cool. I now want to ask something else.

Is it possible to have the rollove text appear on the same line as the static text?

Basically what i am trying to do is have a table with 2 collums, i want the static text in the left colum and the rollover text to appear in the right collum.

I tried just putting the tags in to the relevant colums but the script then didnt work.

Thanks

Dan

**dandaman2007** · 11-02-2007, 11:56 AM

bump

**Fang** · 11-03-2007, 02:42 AM

Code:

<style type="text/css">
dl {overflow:hidden;}
dt {font-weight:bold;}
dt, dd {float:left;} 
</style>

**dandaman2007** · 11-05-2007, 04:53 AM

Thanks again Fang,

One last thing, well i hope its one last thing lol

Any ideas why this works fine in Firefox but doesnt work in IE?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="application/javascript">
function showHide(parent) {
var aDD=parent.getElementsByTagName('dd');
for(var dd=0; dd<aDD.length; dd++) {
    aDD[dd].style.display=(aDD[dd].style.display=='none')? 'block' : 'none';
    }
}

window.onload=function() {
var aDT=document.getElementsByTagName('dt');
for(var i=0; i<aDT.length; i++) {
    aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
    showHide(aDT[i].parentNode);
    }
};
</script>

<style type="text/css">
dl 
	{
		overflow:hidden;
		margin-left:0px;
	}
dt
	{
		font-weight:bold;
		margin-left:0px;
	}
	
dt, dd
	{
		float:left;
		margin-left:0px;
	} 
</style>

</head>
<body>
<dl>
<dt><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#00FF99">Toshiba Test Rollover</td></tr></table></dt>
<dd><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#CC0000">This is a test</td></tr></table></dd>
</dl>
<br>
<br>
<dl>
<dt><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#00FF99">Toshiba Test Rollover</td></tr></table></dt>
<dd><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#CC0000">This is a test</td></tr></table></dd>
</dl>
</body>
</html>