Positioning of mouseover images

[noiseordinance]

Hi there,

I have a really tricky problem that I can't seem to figure out.... scratch that, it's tricky for me, but maybe not for one of you guys.

I have an image with a few menu buttons. When I mouse over the menu buttons, I want the background to change. This will make sense if you click to the images below (ignore the fact that they are transparent .pngs):

<snip>

As you can see, the initial state is the first picture. When you place your mouse over the Multimedia button, it changes the whole image. This would be the same for all the buttons on the left.

I know how to do mouseovers and whatnot, but this is tricky because the entire image in 350x1024, yet the actual linkable area is the size of a button. Further, once you place your mouse over the button, a rollover occurs that is larger than the button...

Can anyone offer help on this?

Thanks eternally...

[edited by: swa66 at 12:11 am (utc) on July 25, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[SuzyUK]

Hi noiseordinance, this one is a bit difficult to explain without the images, but what you need is multiple copies of the same image or to my mind this is a job for CSS Sprites.

The trick to making it work on any size of image is to use a span (or any inline element) inside the actual link, that is the bit that you would actually size and position over the area of the larger image that is to "change" when you rollover the menu item/button area. How the sprite would be built would depend on whether areas of the changed bits would overlap in the bigger picture.

I know you have two parts of the image that should change, the menu button itself and the info pane so this explanation, though it is in words rather than pictures, is based on that knowledge.

OK imagine you have 6 links therefore six different image states (well 7 as there should be a default state) take a screenshot (or photoshop them) in their entirety of each of the seven states individually, and then attach all seven images together 1 below the other. Obviously given the size of your image this will make a huge sprite, but you could get clever by making them only include the the changed bits and minimising your sprite size, however that's outwith the scope of this non-visual explanation, perhaps you'll be able to work out a smaller way to suit your image after you see how the theory works?

Now say you have your menu/buttons marked up as a list, where the

<li>

items are holding the menu items/links. Inside those

<li><a>

elements you have a span already to hide the actual menu text, in a normal rollover situation this would be enough to make the menu rollovers work, but you need an extra bit so add another inline element inside the <a>, the markup should look something like this:

<li id="a"><a href="#"><span>your menu link</span><i></i></a></li>

<i>

used as it's a lot smaller than adding another span with a class name name attached, the actual element used doesn't matter but should be an inline one to keep with validation. each <li> element will need a unique id or class so the <a> & <i> can be targetted individually on hover.

What you do is put the whole of the background image on the

<ul>

positioned 0 0 - i.e. your

<ul>

would be 1024px wide and 325px high - that is the default state. Then the <a> elements are set to be the height/width of your menu/buttons part and are sized to cover the buttons as in a normal rollover menu.

The

<a>

would hold the same background image as the

<ul>

- and positioning would need to worked out for these to make them fit exactly over the ul's background. The only bits of the background image that would be visible (yet) is the small rectangular 'window' the size of the button.

The magic comes with the

<i></i>

, the

<i>

should be absolutely positioned, coordinates/size should match over the bigger part of the image it needs to change. It won't matter if it's sized a few pixels too large either way as the overlap should match the ul's background image anyway. The

<i>

element also holds the same background sprite as the

<ul>

and

<a>

elements

The idea is that the

<i>

is initially hidden, and on rollover of the link/button (

a:hover i

) - it is revealed, or at least the space for showing that bit of the moved sprite is revealed. And what you want is for the

a:hover

to reveal two parts of the sprite.

So what you have is a background on the

<ul>

that never moves, then on each

<a> & <i>

you have the same background image which does move on

a:hover

, and you're giving the

<a> & <i>

2 x 'windows' to show the two corresponding parts of the image you want to see

Now in just saying all that it's probably not clear at all, it's a case of knowing what I want to say but not being able to say it without "see like this" ;)