Re: FN-FORUM: Javascript Image Rollover

date posted 9th November 2007 18:58

I have a onmouseover/onmouseout javascript that works in all new browsers
and also works in IE6, unfortunately it is at work so cant get to it now.
But there is also a css only version which uses lists and a-tags if its a
link, or lists and 'v.simple javascript to change the class name' if its not
a link. All of these are also at work, I may be able to get hold of them
tomorrow. If not it will have to wait till monday.

Cheers
Martin


----- Original Message -----
From: "Rob Owen" [EMAIL REMOVED]
To: [EMAIL REMOVED]
Sent: Friday, November 09, 2007 4:46 PM
Subject: Re: FN-FORUM: Javascript Image Rollover


>
> I was using 2 images but I think I may try your method.
>
> Thanks.
>
> ----- Original Message -----
> From: "Breachware Solutions" [EMAIL REMOVED]
> To: [EMAIL REMOVED]
> Sent: Friday, November 09, 2007 4:34 PM
> Subject: Re: FN-FORUM: Javascript Image Rollover
>
>
>>
>> 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
>>>
>>>
>> --
>> 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
>>
>>
> --
> 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
>
>