DHTML Help

Mouseover behavior is only working in Explorer

[IanKelley]

This is much easier to see than to explain.

Since I can't post here... please email or stickymail me for the url.

Any help would be appreciated.

[BlobFisk]

Hey Ian,

Just had a very quick peek at the code (when I get more time I'll have a closer look).. but I think part of the problem with non IE browsers not showing the rollovers is that they don't support the onmouseover and onmouseout event on anything that is not an anchor.

I'll get back to you when I've had more time to look at it...

[ggrot]

Yep, you pretty much need an anchor. Try linking to #, that means basically linking to nowhere - the browser doesn't try to go anywhere.

[IanKelley]

Thanks for the comments ggrot :-)

I've used onmouseovers on div tags with both Netscape and Opera... they work fine. Also, I've tried replacing the <div> tags with <a href> just to be sure and it didn't work.

About using href="#"... Most browsers actually will go somewhere... they'll go to the top of the page. Kind of a sloppy way to do it. If you're going to use that method add "return false;" to the onclick event.

[tedster]

For those playing along at home, the page in question is the one currently in IanKelley's profile.

Ian writes:

The code I'm including below works in IE (error free)... (I've left all the js and css in the main file to make it easier to see what's going on).

However, I get nothing in Netscape and Opera. Using the NS javascript console I get "x not defined" (you'll see what I mean if you check it).

I'm not really a javascript/DOM expert in terms of cross browser compatibility... I spend more time with perl and PHP than with client side scripting... I'm sure it's something obvious.

<script language="javascript" type="text/javascript">
var ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var ie4=(document.all && !document.getElementById)? true : false;
var ie5=(document.getElementById && document.all)? true : false;
var ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var hack;
var op=0;
var opi;
</script>
<script language="javascript" type="text/javascript">
function hoverInfo(soup,fiveManTent) {
soup.style.display = 'none';
fiveManTent.style.display = 'block';
}
function moreInfo(soup,off) {
if (off == "1") {
if(ie4¦¦ie5)soup.style.filter='alpha(opacity=0)';
if(ns6)soup.style.MozOpacity=0;
op = 0;
soup.style.display = 'none';
clearInterval (opi);
}
else {
soup.style.display = 'block';
hack = soup;
opi = setInterval ('fade()', 35);
}
}
function fade() {
if (op <= 100) {
op+=5;
if(ie4¦¦ie5)hack.style.filter="alpha(opacity="+ op +")";
if(ns6)hack.style.MozOpacity=AT.ieop/100;
} else clearInterval (opi);
}
function over(soup,bgCol,off) {
if (off == "1") {
soup.style.backgroundColor = bgCol;
soup.style.padding ='2px';
soup.style.textIndent ='13px';
}else{
soup.style.backgroundColor = bgCol;
soup.style.paddingLeft ='3px';
soup.style.textIndent ='0px';
if(ie4¦¦ie5)soup.style.cursor = 'hand';
else soup.style.filter='alpha(opacity=0)';
}
}
</script>