Welcome to WebmasterWorld Guest from 35.173.234.237

Forum Moderators: open

Message Too Old, No Replies

Active rollovers using getElementById

but they work fine if i put the javascript inline

     
4:06 pm on Jul 26, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Can anyone please tell me where I'm going wrong? I want all (or as much as possible) of the js in an external file. Example1 (with inline js) works fine, but example2 doesn't do anything. Any advice is most appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Welcome To My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="Javascript" type="text/javascript">
<!-- To be placed in an external .js file

if (document.images) {
backOvr = new Image;backOvr.src = "images/backovr.gif"
backOut = new Image;backOut.src = "images/backout.gif"
nextOvr = new Image;nextOvr.src = "images/nextovr.gif"
nextOut = new Image;nextOut.src = "images/nextout.gif"
}
else {
backOvr = "";backOut = "";document.button1 = ""
nextOvr = "";nextOut = "";document.button2 = ""
}

function imgOver(thisImg) {
document[thisImg].src = "images/" + thisImg + "ovr.gif"
}

function imgOut(thisImg) {
document[thisImg].src = "images/" + thisImg + "out.gif"
}

function activeImages() {
document.getElementById("button2").onmouseover="imgOver('next');window.status='Next Page';return true"
document.getElementById("button2").onmouseout="imgOut('next');window.status='';return true"
}

document.onLoad = activeImages;

// End external .js file -->
</script>
</head>

<body>
<a href="example1.com" onmouseover="imgOver('back');window.status='Previous Page';return true"
onmouseout="imgOut('back');window.status='';return true">
<img src="images/backout.gif" width="129" height="29" border="0" name="back" id="button1" alt="Previous Page" /></a>
<br>
<br>
<a href="example2.com">
<img src="images/nextout.gif" width="129" height="29" border="0" name="next" id="button2" alt="Next Page" /></a>
</body>
</html>

6:18 pm on July 26, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Looking quickly... not sure if this is it... but try this:

function activeImages() {
document.getElementById("button2").onmouseover=function(){
imgOver('next');
window.status='Next Page';
};
document.getElementById("button2").onmouseout=function(){
imgOut('next');
window.status='';
};
9:08 pm on July 26, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Hi Fotiman, Thanks for the tip but with your suggestion both example1 and example2 dont work. On the bright side, at least i'm getting an error which hopefully means the activeImages function is being called. Perhaps i'd be better off using getElementsByName since the 'name' attribute is used by the rollover image functions. What do you think?
9:47 pm on July 26, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


I would not use getElementByName.

I would recommend using Firefox + Firebug to set breakpoints in your JavaScript and inspecting the different variables to see what is going on.

10:05 pm on July 26, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 29, 2007
posts:228
votes: 0


try using your preload variables and wrapping in eval block

function imgOver(thisImg) {
document[thisImg].src = eval(thisImg + "Ovr.src");
}

[edited by: Drag_Racer at 10:15 pm (utc) on July 26, 2007]

10:14 pm on July 26, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


hello Fotiman and thanks again for the tip.
I'm currently looking at this site..
[developer.mozilla.org...]
..with particular interest in the "notes" section. Seems to be suggesting a variable to store the result of getElementById then passing that result to a function...which is exactly what i'm trying to do.
While i'm on the right site, i'll get the software you recommend.
Many thanks.
10:21 pm on July 26, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Thanks Drag_Racer, i'll give it a try but this problem is starting to do my head in...is it really worth the hassle just so i can put most of the js in an external file? The rollovers and status messages work fine if i put the js in the markup.
3:03 pm on July 27, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Hi Drag_Racer,
Your suggestion works for the image rollovers but it seems the problem is in the activeImages function. When i call the function in example1, everything is fine...including the status bar message. But example2, which calls activeImages, does nothing...not even an error. The point of this exercise is to allow the js to run from an external file which can be applied throughout the site. Hope this gives some clarification, any further suggestions are most appreciated.
3:23 pm on July 27, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Looking a little more closely, I suspect this is your problem:

document.onLoad = activeImages;

Change that to this:

window.onload = activeImages;

10:17 pm on July 27, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Hello again Fotiman,
Thanks for your reply but I've already tried that with no difference. I also tried...
window.onLoad = function activeImages{rest of the function}
Seems the problem lies in the syntax of the function itself, tried Firebug as you suggested but I just couldn't get my head round the interface.
According to [msdn2.microsoft.com...] getElementById requires a variable which stores the result like this, oElement = document.getElementById(sIDValue). I can't get anything like that to work either so there must be some other missing parameter in the activeImages function. Back to the drawing board, suggestions appreciated.
12:07 am on July 28, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


I also tried...
window.onLoad = function activeImages{rest of the function}

window.onload (as per Fotiman). Case sensitivity.

-----------

Drop all the uses of the name attribute for images.
Switch names to ids.
Use Fotiman's code.

-----------

Don't use eval.

[edited by: Bernard_Marx at 12:10 am (utc) on July 28, 2007]

1:28 pm on July 28, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Hello Bernard Marx and thanks for your tip.
I did as you suggested and copied Fotiman's code into my page. This still didn't work.
I found the problems and now have a working example which i'll show later.
Thanks again to everyone, much appreciated.
11:24 pm on July 28, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


As promised, here is a working example. The external .js file now resembles this...
// Start
if (document.images) {
backOvr = new Image;backOvr.src = "images/backovr.gif";backOut = new Image;backOut.src = "images/backout.gif"
nextOvr = new Image;nextOvr.src = "images/nextovr.gif";nextOut = new Image;nextOut.src = "images/nextout.gif"
}
else {
backOvr = "";backOut = "";document.button1 = "";nextOvr = "";nextOut = "";document.button2 = ""
}

function imgOver(thisImg) {document[thisImg].src = "images/" + thisImg + "ovr.gif"}

function imgOut(thisImg) {document[thisImg].src = "images/" + thisImg + "out.gif"}
/* Previously used = eval(thisImg + "Ovr.src") and = eval(thisImg + "Out.src") as per Drag_Racer. Surely using the preload images would reduce any delay and calls to the server*/

function activeImages() {
document.getElementById("button1").onmouseover=function() {imgOver('back');window.status='Previous Page';return true;};
document.getElementById("button1").onmouseout=function() {imgOut('back');window.status='';return true;};
document.getElementById("button2").onmouseover=function() {imgOver('next');window.status='Next Page';return true;};
document.getElementById("button2").onmouseout=function() {imgOut('next');window.status='';return true;};
} /*Thanks to Fotiman for this code but it was missing the return true parts of each window.status section and the last right curly-bracket to end the function.*/

window.onload = activeImages; // I previously used window.onLoad, thank you Bernard Marx for pointing this out.
// End

[edited by: steve1802uk at 11:41 pm (utc) on July 28, 2007]

11:29 pm on July 28, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


...and the HTML file now resembles this:
<!--Start-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Welcome To My Website</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="ref_to_external.js" language="Javascript" type="text/javascript">
<!-- Start dummy scripts for non-js browsers
function imgOver() {
}
function imgOut() {
}
// End dummy scripts -->
</script></head><body><a href="example1.com"><img src="images/backout.gif" width="129" height="29" border="0" name="back" id="button1" alt="Previous Page" /></a><br><br><a href="example2.com"><img src="images/nextout.gif" width="129" height="29" border="0" name="next" id="button2" alt="Next Page" /></a></body></html>
<!--End-->
<!--Note to Bernard Marx: (re. Drop all the uses of the name attribute for images.)
Had to include the name attributes in the image tags otherwise imgOver and imgOut don't work. I made the ids unique though, I think that's what you meant anyway-->
Thanks again to everyone for your generous help.
2:06 am on July 29, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Late addition...
An error occurs if an image within the activeImages function DOES NOT include the opening and closing 'a tags'.
3:32 pm on July 29, 2007 (gmt 0)

New User

10+ Year Member

joined:July 25, 2007
posts:11
votes: 0


Its not really an error, more of an irritating glitch...I forgot to take into account a third state for one of the images on each page of the site. The following would display the correct image:
function imgDn(thisImg) {document[thisImg].src = "images/" + thisImg + "dn.gif"}, but the activeImages function needs to check for the 'alt' text before calling imgOver or imgOut, because if alt=Current Page the imgDn function is called. So, how do I find the image by id but return it's 'alt' attribute then use an if/else statement to display the correct image and status message? I'm thinking along the lines of the getAttr method but don't know the syntax...back to the drawing board!