...

View Full Version : onmouseover JS fails in mozilla



jolene
01-20-2005, 10:56 PM
I have this JS code for an onmouseover link infobox. It works in IE and Opera but not in Mozilla or Firebird. Any idea of how to alter it for better cross browser recognition? here is the code:

<script language="JavaScript" type="text/javascript">
function showInfobox(info) {
var posX = 0;
var posY = 0;
var loc = window.event;
if(loc.pageX || loc.pageY) {
posX = loc.pageX;
posY = loc.pageY;
}
else if(loc.clientX || loc.clientY) {
posX = loc.clientX + document.body.scrollLeft;
posY = loc.clientY + document.body.scrollTop;
}
document.all('infobox').innerText = info;
var boxX = posX+5;
var boxY = posY-5;
document.getElementById('infobox').style.left = boxX;
document.getElementById('infobox').style.top = boxY;
document.getElementById('infobox').style.display = "block";
}

function hideInfobox() {
document.all('infobox').innerText = '';
document.getElementById('infobox').style.display = "none";
}

</script>
</head>
<body>

<span onmouseover="showInfobox('Some poems')" onmouseout="hideInfobox()">
<a href="http://www.leonardcohenfiles.com/mirror.html" >Leonard Cohen</a>
</span>
</body>

Thank you.

hemebond
01-21-2005, 03:13 AM
document.all is not part of the standard. Use document.getElementById to reference an object.

glenngv
01-21-2005, 04:12 AM
And use innerHTML or DOM instead of innerText.

jolene
01-21-2005, 10:08 PM
ok, I tried those changes as follows but still fails in Mozilla. Did I make the changes corectly?


<script language="JavaScript" type="text/javascript">
function showInfobox(info) {
var posX = 0;
var posY = 0;
var loc = window.event;
if(loc.pageX || loc.pageY) {
posX = loc.pageX;
posY = loc.pageY;
}
else if(loc.clientX || loc.clientY) {
posX = loc.clientX + document.body.scrollLeft;
posY = loc.clientY + document.body.scrollTop;
}
document.getElementById ('infobox').innerHTML = info;
var boxX = posX+10;
var boxY = posY-10;
document.getElementById('infobox').style.left = boxX;
document.getElementById('infobox').style.top = boxY;
document.getElementById('infobox').style.display = "block";
}

function hideInfobox() {
document.getElementById ('infobox').innerHTML = '';
document.getElementById('infobox').style.display = "none";
}

</script>

Thank you

caio
01-22-2005, 01:22 PM
The following is a revised code that at least does not give errors on Mozilla.

Caio



<html>
<head>
<script language="JavaScript" type="text/javascript">
function showInfobox(e, info) {
var posX = 0;
var posY = 0;
var loc = e || window.event;
if(loc.pageX || loc.pageY) {
posX = loc.pageX;
posY = loc.pageY;
} else {
if(loc.clientX || loc.clientY) {
posX = loc.clientX + document.body.scrollLeft;
posY = loc.clientY + document.body.scrollTop;
}
}
document.getElementById ('infobox').innerHTML = info;
var boxX = posX+10;
var boxY = posY-10;
document.getElementById('infobox').style.left = boxX;
document.getElementById('infobox').style.top = boxY;
document.getElementById('infobox').style.display = "block";
}

function hideInfobox() {
document.getElementById ('infobox').innerHTML = '';
document.getElementById('infobox').style.display = "none";
}

</script>
</head>
<body>

<span id="infobox" onmouseover="showInfobox(event, 'Some poems')" onmouseout="hideInfobox()">
<a href="http://www.leonardcohenfiles.com/mirror.html" >Leonard Cohen</a>
</span>
</body>

jolene
01-22-2005, 10:07 PM
oh..I see that those alterations dont work in IE or Opera either. So I'm still using my original JS code. I wonder how I could get it working in Mozilla, or is there some other similar code that would be better for cross browser?
Thank you.

Puffin the Erb
01-22-2005, 10:59 PM
This should work :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>
<head>
<title>Info</title>
<script language="JavaScript" type="text/javascript">
function showInfobox(myinfo,event) {
var posX = 0;
var posY = 0;

if(event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
}
else if(event.clientX || event.clientY) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
document.getElementsByTagName("span")[1].childNodes[0].nodeValue = myinfo;
var boxX = posX+5;
var boxY = posY-5;
document.getElementById('infobox').style.left = boxX;
document.getElementById('infobox').style.top = boxY;
document.getElementById('infobox').style.display = "block";
}

function hideInfobox() {
document.getElementsByTagName("span")[1].childNodes[0].nodeValue = "";
document.getElementById('infobox').style.display = "none";
}

</script>
</head>
<body>

<span onmouseover="showInfobox('Some poems', event)" onmouseout="hideInfobox('Some poems', event)">
<a href="http://www.leonardcohenfiles.com/mirror.html">Leonard Cohen</a>
</span>

<span id="infobox">&nbsp;</span>

</body>

jolene
01-23-2005, 08:09 PM
Great, yes your code works in Mozilla, but I tried to modify it to include more links and can't get it to work right - the infobox always appears in the same place, not next to its corresponding link.
This is my modified code:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>

<title>Info</title>


<style type="text/css">
#infobox {
position : absolute;
left : 0px;
top : 0px;
background-color : #C0FFCC;
color : #000000;
padding : 3px;
border : solid 1px green;
font-size : 10px;
display : none;
}
</style>
<script language="JavaScript" type="text/javascript">
function showInfobox(myinfo,event) {
var posX = 10;
var posY = 10;

if(event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
}
else if(event.clientX || event.clientY) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
document.getElementsByTagName("span")[1].childNodes[0].nodeValue = myinfo;
var boxX = posX+5;
var boxY = posY-5;
document.getElementById('infobox').style.left = boxX;
document.getElementById('infobox').style.top = boxY;
document.getElementById('infobox').style.display = "block";
}

function hideInfobox() {
document.getElementsByTagName("span")[1].childNodes[0].nodeValue = "";
document.getElementById('infobox').style.display = "none";
}

</script>
</head>
<body>

<span onmouseover="showInfobox('Some poems', event)" onmouseout="hideInfobox('Some poems', event)">
<a href="http://www.leonardcohenfiles.com/mirror.html">Leonard Cohen</a>
</span>
<br/>

<span onmouseover="showInfobox('Some background on Oscar Wilde', event)" onmouseout="hideInfobox('Some background on Oscar Wilde', event)">
<a href="http://www.catholiceducation.org/articles/arts/al0010.html" > Oscar Wilde</a>
</span>

<br /><br />




<span onmouseover="showInfobox('Writer of Celtic spirituality and author of Anam Cara', event)" onmouseout="hideInfobox('Writer of Celtic spirituality and author of Anam Cara', event)">
<a href="http://www.carlmccolman.com/odonohue.htm" > John O Donohue</a>
</span>
<br /><br />


<span onmouseover="showInfobox('Words of encouragement', event)" onmouseout="hideInfobox('Words of encouragement', event)">
<a href="http://www.gabrielleswords-foryourhappiness.com" >Gabrielle Kirby</a>
</span>

<span id="infobox">&nbsp;</span>

</body>
</html>
Any idea how to fix it? My site is www.loversofbeauty.com Thanks a mill.

glenngv
01-25-2005, 01:57 AM
Why not just use the title attribute to show the tooltip?

<a href="http://www.leonardcohenfiles.com/mirror.html" title="Some poems">Leonard Cohen</a>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum