onMouseOver event in Map in Firefox.

[Richard Brooks]

Does anyone know of what I need to do to make an onMouseover event work in
Firefox when it used to work in IE ?


This is part of the client-side map code in the Web page 'town2.htm' , the
image used in the map is of a 3D town. At the moment it references itself
(town2.htm) as I'm testing the onMouseover event. The single and double
quotes below have been spaced for readability. There are two text box areas
labeled 'Title' and 'AboutUs' which fills with text to explain to the user
what goes on in that area of the map and if the mouse pointer moves outside
the area, both 'Title' and 'AboutUs' clears.
......
<area shape="poly"
coords="347,223,349,200,362,194,377,202,362,210,361,228,347,223"
href="town2.htm" onMouseover=" Title.innerHTML=' 3D Studio Gallery ' :
AboutUs.innerHTML=' The authors past works on display here.' " onMouseout= "
Title.innerHTML=' ' : AboutUs.innerHTML=' ' " >
........

[Title] section referenced from the above line.

<table WIDTH=140 HEIGHT=30 BORDER=2>
<tr><td BGCOLOR="#fafafa" ID="Title"></td></tr></table>

Now that I'm porting over my stuff to Firefox and I think wisely having to
follow the proper set of W3C spec's I now need to rework the above.

Many thanks for any reply,


Richard Brooks.

 

[Richard Cornford]

Does anyone know of what I need to do to make an onMouseover
event work in Firefox when it used to work in IE ?

onMouseout= " Title.innerHTML=' ' : AboutUs.innerHTML=' ' "

^
That doesn't work on script enabled IE because the colon is a syntax
error (it should be a semicolon as a statement separator).

<table WIDTH=140 HEIGHT=30 BORDER=2>
<tr><td BGCOLOR="#fafafa" ID="Title"></td></tr></table>

Now that I'm porting over my stuff to Firefox and I
think wisely having to follow the proper set of W3C
spec's I now need to rework the above.

In IE's browser object model any element that has a (unique) ID
attribute can be directly references as a named property of the global
object where the property name is identical to the ID attribute string.
Thus - Title -, as an unqualified identifier will refer to the above TD
element. This is unspecified behaviour that is not universally
implemented in web browsers (including Mozilla/Gecko browsers).

As the W3C Core DOM provides a - document.getElementById - method, W3C
DOM standard scriptable browsers all have one direct method of getting a
reference to any DOM element with an ID attribute (assuming the
requirement that the ID be unique to the document is adhered to).

It would be possible to replace:-

Title.innerHTML=' '

- with:-

document.getElementById('Title').innerHTML=' ';

- though browser scripting should be considerably more caution than
that, checking for the availability of the required
methods/functions/facilities prior to using them, and verifying their
successful operation before using constructs that would error out if
earlier stages have been unsuccessful.

The result would still not conform to the W3C DOM specs, mostly because
the - innerHTML - property is not part of any of those specs, and partly
because the global - document - identifier is not specified as a global
reference to the DOM document. The latter making it impossible to script
a web browser in a way that conforms exclusively with the W3C DOM
specifications.

Richard.

 

[Toby Inkster]

<area shape="poly"
coords="347,223,349,200,362,194,377,202,362,210,361,228,347,223"
href="town2.htm" onMouseover=" Title.innerHTML=' 3D Studio Gallery ' :
AboutUs.innerHTML=' The authors past works on display here.' " onMouseout= "
Title.innerHTML=' ' : AboutUs.innerHTML=' ' " >

In your HEAD:

<script type="text/javascript">
function setTitle(x) {
var t = document.getElementByID('Title');
t.innerHTML = x;
}
function setAbout(x) {
var a = document.getElementByID('AboutUs');
a.innerHTML = x;
}
function init() {
var area = document.getElementByID('myarea');
area.onmouseover = function() {
setTitle('3D Studio Gallery');
setAbout('The authors past works on display here.');
}
area.onmouseout = function() {
setTitle('');
setAbout('');
}
}
window.onload = init;
</script>

In your BODY:

<area id="myarea" shape="poly" href="town2.htm"
coords="347,223,349,200,362,194,377,202,362,210,361,228,347,223">

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

_________________________________________
Usenet Zone Free Binaries Usenet Server
More than 120,000 groups
Unlimited download
http://www.usenetzone.com to open account

 

[Richard Brooks]

Does anyone know of what I need to do to make an onMouseover event
work in Firefox when it used to work in IE ?

Thanks to Richard and Toby who replied. It needed a tidy up, as in - needed
to be written properly!

Thanks again,


Richard.

 

[Richard Brooks]

^
That doesn't work on script enabled IE because the colon is a syntax
error (it should be a semicolon as a statement separator).

[snipped]

It still does work in IE with the colon (which like all ideas, was grabbed
from elsewhere long ago) but it's being thrown over in favour of Firefox and
also the need to write things properly. It's the only way!


Richard.

 

[Richard Brooks]

In your HEAD:

<script type="text/javascript">
function setTitle(x) {
var t = document.getElementByID('Title');
t.innerHTML = x;

[code snipped]

I've put the stripped down page on the URL below;

<http://www.kdbanglia.com/town2x.htm>

It still does not work for some reason. BTW, it's the house on the corner
of the street centre-right of screen with the red dot on the roof.

Normally there's a drop down list box with company names above the map.
Selecting one puts a yellow arrow pointing to the location but that's all
stripped out to get the map working properly.


Richard.

 

[Richard Brooks]

In your HEAD:

<script type="text/javascript">
function setTitle(x) {
var t = document.getElementByID('Title');
t.innerHTML = x;
}
function setAbout(x) {
var a = document.getElementByID('AboutUs');
a.innerHTML = x;
}
function init() {
var area = document.getElementByID('myarea');

------------------------
The Javascript console reports the above line with an error as "
document.getElementByID is not a function." Is there some recursion going
on or something.
Apologies for wandering this HTML into Javascript country and Off Topic!
The rest of the code has been kept in for perusing.

Richard.
-------------------------

 

[Steve Pugh]

Should be getElementById() not getElementByID()

Steve

 

[Toby Inkster]

Should be getElementById() not getElementByID()

Dammit. Always get that one wrong.

 

[Richard Brooks]

Dammit. Always get that one wrong.

I love you guys! ;-)

Many thanks for all replies.


Richard.

 

[Mark Parnell]

I love you guys! ;-)

Group hug!