Javascript image rollover help... Im a noob...

[cs.punk]

Hi there, I am a total noob at JS. I just use it for a image rollover...

The code looks like this:

 

function chgImg(imgField,imgState)
{document[imgField].src = "images/" + imgField + imgState + ".jpg"
}

 

And I source that file and use it like this

 

<a href=\"choose_ad_cat.php\"
             onmouseover=\"chgImg('post_ad','_on')\"
             onmouseout=\"chgImg('post_ad','')\">
            <img src=\"images/post_ad.jpg\" border=\"0\" name=\"post_ad\" /></a>

 

This works perfectly!... Although I want it to work so that that if I have a page in another folder (for example) 'folder1', i can't get the image rollovers to work as the JS file is in 'files/OnOffButton.js'... And I need a way so I can do :

<a href=\"choose_ad_cat.php\"
             onmouseover=\"chgImg('post_ad','_on')\"
             onmouseout=\"chgImg('post_ad','')\">
            <img src=\"../images/post_ad.jpg\" border=\"0\" name=\"post_ad\" /></a>

 

But it does not work...

 

Anyone interested in helping a noob?

[jackpf]

Could you not just change

document[imgField].src = "images/" + imgField + imgState + ".jpg"

to

document[imgField].src = "/images/" + imgField + imgState + ".jpg"

 

Tat way it looks in the root directory for "images"

 

Or maybe I've completely misunderstood what you're asking.

[N1CK3RS0N]

Like I said before. Much simpler, faster, efficient if you just use CSS to do image rollovers.

[jackpf]

I don't think IE supports it though...

[N1CK3RS0N]

I don't think IE supports it though...

 

Doesn't support what? CSS mouseovers? or JS?

[jackpf]

It only supports the onhover anchor state on links, or so I am told.

[N1CK3RS0N]

Theres a much easier way to do mouseover image changes without javascript.

 

HTML

<td class="nav_01">
<a href="#"><span class="nav-hide">Home</span></a>
</td>

 

CSS

.nav_01 a {
width: 80px;
height: 45px;
background: url(../images/nav_01.png);
background-repeat: no-repeat;
display: block;
margin: 0 auto;
}
.nav_01 a:hover {
background: url(../images/nav_over_01.png);
background-repeat: no-repeat;
}
.nav-hide {
display:none;
}

 

Works like a charm

[Kieran Menor]

Ah, yes, but you cannot preload images that way. Preloading could be done by adding an invisible img tag pointing to the rollover image, though. It would also be possible to combine both the normal and the rollover image and then use background-position to determine what part of the image to show.

[Axeia]

It only supports the onhover anchor state on links, or so I am told.

Are you sure you're not confusing it with IE's CSS :hover behaviour that only works on links?

[jackpf]

Oooh you are using a link to do it. Yeah, that was why I was dubious as I didn't think IE would support :hover with images.