Jump to content

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


cs.punk

Recommended Posts

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? :-[

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.

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

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.