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?
Similar Threads
