/    Sign up×
Community /Pin to ProfileBookmark

dhtml rollover not working

Copy linkTweet thisAlerts:
Aug 03.2005

I am really new to this, I am hoping someone can help me. I created my new webpage using Frontpage, the idea was to have the menu item change color when the mouse rolls over. Th text is black with a white back ground, with the mouse over the text turns white and the background is blue. This was the first time I tried DHTML and when I preview the page it looks great. i published the page, and now that it is online the effect does not work, when you rollover the text it disapears!! I contacted my ISP and my Front page extensions are installed properly, They suggested I check my code, unfortunately I don’t know what to check, or even where to start. I don’t know code at all.
Can anyone help me???

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@HaganeNoKokoroAug 03.2005 — The easiest (and best) way to achieve that effect is with CSS:<style type="text/css">
.menuItem {
color:#000000;
background-color:#ffffff;
}
.menuItem:hover {
color:#ffffff;
background-color:#0000ff;
}
</style>
...
<a href="somepage.html" [color=blue]class="menuItem"[/color]>Test Link</a>This approach will work fine as long as you are using it on links.

Unfortunately, Internet Explorer only supports the :hover pseudo-class for the <a> tag, so that approach won't work in IE if the element is not a link. There is a solution, however, in the form of a Micro$oft-proprietary, IE-only CSS-ish-looking construct called behaviors. You create a file (I'll call it hover.htc)&lt;public:attach event="onmouseover" handler="hoverOn"&gt;
&lt;public:attach event="onmouseout" handler="hoverOff"&gt;
&lt;script type="text/javascript"&gt;
function hoverOn() {
element.className+=" hover";
}
function hoverOff() {
element.className=element.className.replace(/bhoverb/, "");
}
&lt;/script&gt;
Then, you change the CSS above to include the behavior, and another class called "hover"&lt;style type="text/css"&gt;
.menuItem {
color:#000000;
background-color:#ffffff;
[color=blue]behavior:url(hover.htc);[/color]
}
.menuItem:hover {
color:#ffffff;
background-color:#0000ff;
}
[color=blue].hover {
color:#ffffff;
background-color:#0000ff;
}[/color]
&lt;/style&gt;And your element (in this example, I'll use a <span>)&lt;span class="menuItem"&gt;Test Span&lt;/span&gt;This is one of the basic principles used to make pure-css menus work in MS Internet Explorer (see [url=http://www.vladdy.net/Demos/CSSNav.html]Vladdy's site[/url])

Of course, feel free to post some code and we'll see what we can do to fix it up.
Copy linkTweet thisAlerts:
@gtp20authorAug 04.2005 — HaganeNoKokoro:

I really appreciate the response; unfortunately I really don't understand it. I created a page for my business, and I really don't know a thing about web design, I just enjoy playing around with Front Page. Here is the site www.vantagemanagement.ca as you can see when you roll over the menu bar the text disappears. when I created the page the dhtml was a mouse rollover that turned the text from black with a white back ground to white text with a blue back ground. when I preview the site from front page it works perfectly, but when I actually publish it to the net, it doesn't work, I can't find the problem. Can you help?
Copy linkTweet thisAlerts:
@BlueRainAug 07.2005 — remove ALL 15 of these
[CODE] dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; background-color: #416774" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2"[/CODE]

remove
[CODE]<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>[/CODE]

remove
[CODE]<script language="JavaScript1.2" fptype="dynamicanimation" src="../../animate.js">
</script>[/CODE]

replace

[CODE]<style fprolloverstyle>A:hover {color: #FFFFFF}
</style>[/CODE]

with

[CODE]<style>
A:hover {
background-color: #0000FF;
color:#FFFFFF;
}
</style>[/CODE]
Copy linkTweet thisAlerts:
@klanga2049Jun 23.2006 — Thank you !


Oh great wise one

You hit the nail right on the head

I knew their was a way to bypass frontpage js.

It's been awhile since Ive coded




Don
×

Success!

Help @gtp20 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 6.15,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...