Mouseover/Java Question

W

William Hughes

Situation:

I am using the following Javascript - based on Mike Cullen's MouseOver Button
Wizard ( http://www.mobw.net ) - to animate my site's navigation buttons:

<HEAD>

<script language="JavaScript">
var browser = '';
var version = '';
var entrance = '';
var cond = '';
// BROWSER
if (browser == ''){
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
browser = 'Netscape'
else browser = 'NN';
}
// VERSION?
if (version == ''){
version= navigator.appVersion;
paren = version.indexOf('(');
whole_version = navigator.appVersion.substring(0,paren-1);
version = parseInt(whole_version);
}
// BROWSER & VERSION
if (browser == 'IE' && version >= 4) entrance = 'yes';
if (browser == 'IE' && version < 4) entrance = 'no';
if (browser == 'Netscape' && version >= 2.02) entrance = 'yes';
if (browser == 'Netscape' && version < 2.02) entrance = 'no';
if (entrance=='yes'){
name0a=new Image;name0a.src="./img/btn-top.bmp";
name0b=new Image;name0b.src="./img/btn-top-m.bmp";
name0c=new Image;name0c.src="./img/btn-top-o.bmp";

[... (16 other button definitions deleted)]

name17a=new Image;name17a.src="./img/btn-online.bmp";
name17b=new Image;name17b.src="./img/btn-online-m.bmp";
name17c=new Image;name17c.src="./img/btn-online-o.bmp";
}
function lighten(imgName) {
if (entrance == 'yes'){
imgOn = eval(imgName + 'b.src');
document[imgName].src = imgOn;
}
}
function darken(imgName) {
if (entrance == 'yes'){
imgOff = eval(imgName + 'a.src');
document[imgName].src = imgOff;
}
}
function darken2(imgName) {
if (entrance == 'yes'){
imgClick = eval(imgName + 'c.src');
document[imgName].src = imgClick;
}
}
</script>

</HEAD>

Within my pages, I use the following:

<BODY>

<br><br>
<center>
<!--Button Number 16-->
<a href="print.htm" target="_self" onmouseover="lighten('name15');
window.status='Go to the Print References page'; return true"
onmouseout="darken('name15'); window.status=''; return true"
onmousedown="darken2('name15'); window.status='Loading...'; return true"
onmouseup="darken('name15')"><img src="./img/btn-print.bmp" name="name15"
alt="Click button to go to the Print References page" border="0"></a>
<!--Button Number 17-->
<a href="video.htm" target="_self" onmouseover="lighten('name16');
window.status='Go to the Video References page'; return true"
onmouseout="darken('name16'); window.status=''; return true"
onmousedown="darken2('name16'); window.status='Loading...'; return true"
onmouseup="darken('name16')"><img src="./img/btn-video.bmp" name="name16"
alt="Click button to go to the Video References page" border="0"></a>
<!--Button Number 18-->
<a href="websites.htm" target="_self" onmouseover="lighten('name17');
window.status='Go to the Online References page'; return true"
onmouseout="darken('name17'); window.status=''; return true"
onmousedown="darken2('name17'); window.status='Loading...'; return true"
onmouseup="darken('name17')"><img src="./img/btn-online.bmp" name="name17"
alt="Click button to go to the Online References page" border="0"></a>
</center>

</BODY>

Both code sections are loaded with #INCLUDE statements.

Problem:

If I use the same button more than once in the body of the page, only the first
instance is animated; the subsequent uses are not, although they are functional.
What am I doing wrong?

Also, I am considering eliminating the ONMOUSEOUT statements. If I undertand the
function correctly, this will cause the ONMOUSEOVER and/or ONMOUSEDOWN text to
remain in the status bar. Is this correct?
 
D

David Dorward

William said:
Situation:

I am using the following Javascript

Your subject line talks about Java. Java and JavaScript have about as much
in common as Car and Carpet.
<script language="JavaScript">

Missing required type attribute.
if (navigator.appName.indexOf('Microsoft') != -1)
else if (navigator.appName.indexOf('Netscape') != -1)

User agent string detection instead of object detection with no provision
for most modern browsers.

It is not a good script. I strongly suggest you ditch it.

Use margins, not multiple hard line breaks.

Deprecated. Use CSS.
<!--Button Number 16-->
<a href="print.htm" target="_self" onmouseover="lighten('name15');
window.status='Go to the Print References page'; return true"

Most browsers let users block mucking about with the status bar - and with
good reason - its annoying and hides useful information from the user. I
suggest you get rid of that. Consider the title attribute for advistory
information.
onmouseup="darken('name15')"><img src="./img/btn-print.bmp" name="name15"

..bmp files are highly inappropriate for use on the web. Try PNG, JPEG or
GIF.
alt="Click button to go to the Print References page" border="0"></a>

The alt attribute is supposed to be a text replacement for the image, not a
tooltip. See my previous reference to the title attribute and try:

alt="Print References"
<!--Button Number 17-->
<a href="video.htm"

There is a distinct lack of anything between the links, this can cause it to
be difficult to tell where one link ends and the next starts (especially in
text only browsers). Try marking up the list of links as a list.

http://css.maxdesign.com.au/listamatic/
Both code sections are loaded with #INCLUDE statements.

I'd suggest using <script src="..." ...></script> for including the
JavaScript. That will let the user cache it between pages and save
bandwidth (yours and theirs).
If I use the same button more than once in the body of the page, only the
first instance is animated; the subsequent uses are not, although they are
functional. What am I doing wrong?

Probably having two elements with the same name and trying to reference them
by it.
Also, I am considering eliminating the ONMOUSEOUT statements. If I
undertand the function correctly, this will cause the ONMOUSEOVER and/or
ONMOUSEDOWN text to remain in the status bar. Is this correct?

Try it and see.
 
W

William Hughes

Your subject line talks about Java. Java and JavaScript have about as much
in common as Car and Carpet.

Sorry; wasn't aware of the difference.
Missing required type attribute.

Had that elsewhere.
User agent string detection instead of object detection with no provision
for most modern browsers.
???

Most browsers let users block mucking about with the status bar - and with
good reason - its annoying and hides useful information from the user. I
suggest you get rid of that. Consider the title attribute for advistory
information.
Done.


.bmp files are highly inappropriate for use on the web. Try PNG, JPEG or
GIF.

The bitmaps were small, @2k each.
There is a distinct lack of anything between the links, this can cause it to
be difficult to tell where one link ends and the next starts (especially in
text only browsers). Try marking up the list of links as a list.

http://css.maxdesign.com.au/listamatic/

Nice. Very nice. I've fiddled with one of the examples and come up with
something that works better than the Javascript version I had... which pretty
much renders my earlier Javascript and your objections to it irrelevant.

The changes also reduced the filesize of each page considerably.
 
W

William Hughes

William Hughes wrote:

Fantastic.

Danke. Now if I could just find a way to put all the overhead from several dozen
iterations of

<img src="./img/st-sunk.gif"
alt=" (Lost in battle) "
align=middle
hspace=5
title="Ship sunk due to enemy action, including scuttling due to battle damage"
into CSS, I'd be a happy camper. Maybe I'll just have to wait for CSS3...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top