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
Click to expand...

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

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

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.
<br><br>
Click to expand...

Use margins, not multiple hard line breaks.
<center>
Click to expand...

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"
Click to expand...

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"
Click to expand...

..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>
Click to expand...

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"
Click to expand...

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.
Click to expand...

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?
Click to expand...

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?
Click to expand...

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.
Click to expand...

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

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.
Click to expand...

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/
Click to expand...

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.
Click to expand...

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

Similar Threads

Button image duplicating pygame! 0
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Help with Visual Lightbox: Scripts 2
How do I fix this issue in sqaurespace code block? 1
Problem in getting dashboard page from login page in python pycharm using POST command 0
MouseOver problem 5
Javascript Mouseover Problem 3
Only one table shows up with the information 2

Members online

No members online now.
Total: 65 (members: 0, guests: 65)
Robots: 429

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top