Rollovers not working

Adam H-W · April 22nd, 2004, 11:27 AM

I seem to be hogging this discussion group but I think you'll see the back of me after this one for a while!

I've got some rollovers that don't seem to be happening and I'm not sure why; it doesn't give any error, it just doesn't rollover!

Here's my code - it's included in all files using an inline script tag:

<script src="includes/java_function.js" language="javascript" type="text/javascript"></script>
<script language="JavaScript">
function imgOver() {
}

function imgOut() {
}
</script>

and this is the java_function.js coding:

enter_up = new Image
btn_home_up = new Image
about_us_up = new Image
projects_up = new Image
ir_up = new Image
pic_up = new Image
contact_up = new Image

enter_over = new Image
btn_home_over = new Image
about_us_over = new Image
projects_over = new Image
ir_over = new Image
pic_over = new Image
contact_over = new Image

enter_up.src = "image_bin/enter_up.gif"
btn_home_up.src = "image_bin/btn_home_up.gif"
about_us_up.src = "image_bin/about_us_up.gif"
projects_up.src = "image_bin/projects_us_up.gif"
ir_up.src = "image_bin/ir_up.gif"
pic_up.src = "image_bin/pic_up.gif"
contact_up.src = "image_bin/contact_up.gif"

enter_over.src = "image_bin/enter_over.gif"
btn_home_over.src = "image_bin/btn_home_over.gif"
about_us_over.src = "image_bin/about_us_over.gif"
projects_over.src = "image_bin/projects_over.gif"
ir_over.src = "image_bin/ir_over.gif"
pic_over.src = "image_bin/pic_over.gif"
contact_over.src = "image_bin/contact_over.gif"

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

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

many thanks

Adam

Snib · April 22nd, 2004, 11:41 AM

You redefine the functions imgOver and imgOut after you include them in the external file.

Just remove the empty functions imgOver and imgOut.

HTH,

Snib

<><

Adam H-W · April 22nd, 2004, 01:16 PM

thanks for the input Snib, but it doesn't like that - if I take them out it says,

'document null or not an object'

any ideas?

thanks

Adam

Snib · April 22nd, 2004, 01:37 PM

Please see your other recent post. Replace 'document' with 'document.images'

HTH,

Snib

<><

Adam H-W · April 23rd, 2004, 03:12 AM

thanks Snib but it doesn't seem to change anything; I'm not sure what to do apart from perhaps show you my code for the actual rollover:

<a href="sare.asp" onMouseover="imgOver('enter')" onMouseout="imgOut('enter')" name="enter"><img src="image_bin/enter_up.gif" alt="" width="130" height="15" border="0"></a>

do you think there's anything wrong with this?

thanks

Adam

ChrisScott · April 23rd, 2004, 05:18 AM

Hi Adam,

Snib is correct, but you also need to set the name attribute of the img tag to "enter", not the a tag.

Chris

Adam H-W · April 23rd, 2004, 08:20 AM

Hi Guys,

I've done what you've said but it's still the same - no error but doesn't rollover; don't know what to do; it's usually so simple - I must be missing something

ChrisScott · April 23rd, 2004, 10:18 AM

Hi Adam,

THe following works for me...

<html>
<head>

<script type="text/javascript">
enter_up = new Image
btn_home_up = new Image
about_us_up = new Image
projects_up = new Image
ir_up = new Image
pic_up = new Image
contact_up = new Image

enter_over = new Image
btn_home_over = new Image
about_us_over = new Image
projects_over = new Image
ir_over = new Image
pic_over = new Image
contact_over = new Image

enter_up.src = "image_bin/enter_up.gif"
btn_home_up.src = "image_bin/btn_home_up.gif"
about_us_up.src = "image_bin/about_us_up.gif"
projects_up.src = "image_bin/projects_us_up.gif"
ir_up.src = "image_bin/ir_up.gif"
pic_up.src = "image_bin/pic_up.gif"
contact_up.src = "image_bin/contact_up.gif"

enter_over.src = "image_bin/enter_over.gif"
btn_home_over.src = "image_bin/btn_home_over.gif"
about_us_over.src = "image_bin/about_us_over.gif"
projects_over.src = "image_bin/projects_over.gif"
ir_over.src = "image_bin/ir_over.gif"
pic_over.src = "image_bin/pic_over.gif"
contact_over.src = "image_bin/contact_over.gif"

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

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

</script>

</head>

<body bgcolor="red">

<a href="sare.asp" onMouseover="imgOver('enter')" onMouseout="imgOut('enter')" ><img src="image_bin/enter_up.gif" alt="" width="130" height="15" border="0" name="enter"></a>

</body>
</html>

(I also swapped the content of the imgOver / imgOut functions)

HTH,

Chris

Snib · April 23rd, 2004, 12:23 PM

It makes more sense to me to add the event handlers to the images like this:

<img onmouseover=imgOver(this)>

And then just reference the image like this:

function imgOver(imgObj)
{
imgObj.src='yourimageover.gif';
}

HTH,

Snib

<><

Adam H-W · April 24th, 2004, 09:30 AM

thanks both for your input - will have a go at what you've said above.

Adam