Active rollovers using getElementById - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Active rollovers using getElementById

but they work fine if i put the javascript inline

steve1802uk

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

10+ Year Member

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>

Fotiman

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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=''; 
};

steve1802uk

9:08 pm on Jul 26, 2007 (gmt 0)

10+ Year Member

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?

Fotiman

9:47 pm on Jul 26, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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.

Drag_Racer

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

10+ Year Member

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]

steve1802uk

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

10+ Year Member

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.

steve1802uk

10:21 pm on Jul 26, 2007 (gmt 0)

10+ Year Member

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.

steve1802uk

3:03 pm on Jul 27, 2007 (gmt 0)

10+ Year Member

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.

Fotiman

3:23 pm on Jul 27, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

document.onLoad = activeImages;

Change that to this:

window.onload = activeImages;

steve1802uk

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

10+ Year Member

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.

Bernard Marx

12:07 am on Jul 28, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

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]

steve1802uk

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

10+ Year Member

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.

steve1802uk

11:24 pm on Jul 28, 2007 (gmt 0)

10+ Year Member

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]

steve1802uk

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

10+ Year Member

...and the HTML file now resembles this:

<!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">

</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>


Thanks again to everyone for your generous help.

steve1802uk

2:06 am on Jul 29, 2007 (gmt 0)

10+ Year Member

Late addition...
An error occurs if an image within the activeImages function DOES NOT include the opening and closing 'a tags'.

steve1802uk

3:32 pm on Jul 29, 2007 (gmt 0)

10+ Year Member

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!