/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Roll over HELP!

Copy linkTweet thisAlerts:
Nov 02.2007

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>

[/CODE]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 02.2007 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;rollover&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="application/javascript"&gt;
function showHide(parent) {
var aDD=parent.getElementsByTagName('dd');
for(var dd=0; dd&lt;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&lt;aDT.length; i++) {
aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
showHide(aDT[i].parentNode);
}
};
&lt;/script&gt;

&lt;style type="text/css"&gt;

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;dl&gt;
&lt;dt&gt;I. Hotel "Metropol" Ohrid&lt;/dt&gt;
&lt;dd&gt;The hotel has its own parking space for its guests for 100 cars.&lt;/dd&gt;
&lt;/dl&gt;
&lt;dl&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@dandaman2007authorNov 02.2007 — I ****ing lvoe you.......

Thanks buddy, Appreciated!
Copy linkTweet thisAlerts:
@dandaman2007authorNov 02.2007 — 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
Copy linkTweet thisAlerts:
@FangNov 03.2007 — &lt;style type="text/css"&gt;
dl {overflow:hidden;}
dt {font-weight:bold;}
dt, dd {float:left;}
&lt;/style&gt;
Copy linkTweet thisAlerts:
@dandaman2007authorNov 05.2007 — 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>[/CODE]
Copy linkTweet thisAlerts:
@FangNov 05.2007 — Use:&lt;script type="text/javascript"&gt;Although application is correct, IE does not recognize it.
Copy linkTweet thisAlerts:
@dandaman2007authorNov 05.2007 — Thanks buddy,

Any suggestions to my other thread?
×

Success!

Help @dandaman2007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...