Re: FN-FORUM: Javascript Image Rollover

date posted 9th November 2007 15:43

Are you using 2 different images or 1 image?

I use mouseover extensivly in some of my sites and tend to create a single
graphic in 2 parts. The upper part is the normal image, the second part
is the mouse over and if relevant, I make a third part for selected.

I then use the style.backgroupdPosition() method to alter the image

eg a 25x25 pixcel image would in actual fact be 25px wide but 50px high.

css would look like :-

background-image:/images/button1.gif;
background-position:0px 0px;

change methods would be :-

onmouseover(this.style.backgroundPosition = "0px -25px";)
onmouseout(this.style.backgroundPosition = "0px 0px");

You'll find that this method is easier and faster on a lot of places as
there will only need to be 1 graphic to download per button as opposed to
2.

I have some buttons which have up to 5 or 6 images on 1 graphic and I
change the backgroundPosition depending on what I want to display.

> Hi,
>
> I have a menu that uses a Javascript image rollover.
>
> Each menu item has a small image (10px by 10px) in front of it.
>
> When you move your mouse over the menu item it changes the image to a
> different one.
>
> It works OK in IE7 and Firefox but it does not work in IE6.
>
> When the page loads it does not display the image until you mouse over.
>
> I am using multiple IE's and do not know whether this is a bug in the
> software or an actual problem with the javascript.
>
> What I would like is maybe to get the same effect using CSS.
>
> The menu uses an unordered list so I was wondering if there was any way of
> using list-style-image to define the bullet and then use an a:hover to
> change it.
>
> Regards
>
> Rob Owen
>
>
> --
> Freelancers, contractors earn more with Prosperity4
> Call 0870 870 4414 or visit www.prosperity4.com
> and benefit from Inland Revenue approved expenses today.
>
> To advertise here: http://www.freelancers.net/advertising.html
>
>