CSS image replacement with hover using this method

bamme

Senior Member
If you're on about making a rollover menu (or similar) then yeah I've done it with my new site I'm working on :)

So assuming this is what you're after :)

What you need is the non hover image and the hover image in one file (working with 2 images). In my case I have them one above the other and then use css to move the background.

In my html (can see it on my new site by clicking smiley) I use, in this case for services

Code:
<div><a id="tm2" class="ro" title="Services link" href="[U]link address[/U]"><span>Services</span></a></div>
In the css I have
Code:
#tm2 { background-image: url(../media/newstuff/t-menu/services.png); position: absolute; top: 76px; left: 517px; width: 57px; height: 21px;  }
which defines it's position, dimensions and the image to be used by the background
and then I have another bit
Code:
.ro { background-position: left top; text-decoration: none; }.ro:hover { background-position: left bottom;  }.ro span { visibility: hidden; }
which covers the 'movement' when hovering and also hides the text which is used in the html to hyperlink to the new page.

If you want to make the rollover remain highlighted (ie hover image) after it's been clicked you need to add another line in using :active similar to
Code:
.ro:active { background-position: left bottom;  }
This can be adapted to work with any number of images but instead of using top and bottom as I have you would use pixel positions to shift the image by the required amount - so 3x 23pixel images would be shifted by 23 and then 46 images to get the 2nd and 3rd image

Hopefully thats easy enough to understand :)

EDIT: just in case the reason I have done the css in this way is that I have more than one set of menu's I want with rollover so this reduces the overall code size used :)
 
Thanks for the reply Levi!

Well, i am using this as a template for the site: Dynamic 5 Column Layout Generator - pagecolumn.com

Which means my little columns to put the images in have the following style rules:
.col1 {
padding: 0px 0px 1em 0px;
overflow: hidden;
float: left;
position: relative;}

.col1{
width: 18%;
left: 101%
}

As you can see theres a relative positioning in there and when I try absolute positioning it seems like it might be easier to scrap the columns and go with an unordered list there for image replacement, would that work? If you use <li>'s, is there an easy way to space them out neatly (other than working out a margin for the sides of each)?
 
Oh also, would you perchance know how I'd make curvy corners for ie? Im currently using javascript (CurvyCorners - Beautiful rounded corners for your HTML boxes) but i cant understand how to get mutliple curvy corner boxes with this method, would you know or know a better way? (Im just asking that here cause i know and also Glen has told me you're really knowledgeable)

EDIT -- Its okay i just worked this out!!
 
Ok is this rollover going on the text menu up top or the image links at the bottom?

As to rounded boxes in ie - no sorry, I know you can do it with javascript but I've never bothered, the only rounded corners I've done are with css3 and I've been looking into css hacks for ie so that it uses a png/gif image rather than a solid colour and css3 instructions.
 
Its for the links at the bottom (sorry I didnt get an email notification thru of this reply!) it'd be great to have a little effect on them but i dont want to bulk the code up lots.

And CurvyCorners - Beautiful rounded corners for your HTML boxes -- try that! It works in ie 8 :) For once I think my whole little site there works in ie8! wow. if anyone wants to check and correct me please do lol but I just looked using the windows partition of my mac (vmware) and all looks ok :/
 
try this :)

Make sure your images have their dimensions (of the single image) set under the buttons part of the css :)

Remember your image file needs to have both the non hover (top) and hover (bottom) images in one file so that when it shifts it will work fine

Now in your css add this to buttons along with the rest of your current css for them :)

Code:
.buttons { background-position: left top; text-decoration: none; }.buttons:hover { background-position: left bottom;  }.buttons span { visibility: hidden; }[FONT=monospace]

now change the html (try with just the first image)to something like this and see if it works. As I say I'm not 100% certain as you've used columns and I haven't really used them :)

Code:
[/FONT]<div><a id="col11" class="buttons" title="Sales Arena" href="[U]weblink[/U]"><span>Sales Arena</span></a></div>
 
Thanks Levi :) :)

Okay, so you mean, I wipe what code I currently have for .buttons (and all other rules relating to the current method of image replacement) and add your css instead, alongside this bit in bold for the .buttons part:
.buttons { background-position: left top; text-decoration: none; height:[the single image's overall height]; width:[ " overall width]; }
.buttons:hover { background-position: left bottom; }
.buttons span { visibility: hidden; }

Or do I need to keep the rules I currently have in there? I read that all image replacement thingies have to have an overflow:hidden; in them is all, maybe I read wrong or they told me wrong :)
 
well you shouldn't delete what you have in your css until you've tried it type affair.

I've also gone back and checked mine and it appears mine is done in a layer so I'm not sure this will work.

If it comes to it you could probably change the lower link code fairly quickly so that it uses layers rather than columns purely due to the constant size of the page :)
 
If it comes to it you could probably change the lower link code fairly quickly so that it uses layers rather than columns purely due to the constant size of the page

Sorry Levi this sounds well stupid but what do you mean by layers? Sorry :-/
 
thats just what they're called in golive so I suppose thats what I've come to know them as lol

I suppose you could call it another div/container which has it's own css id, position, background (the bit that moves) etc etc rather than using columns.
 
Just looking over it, I honestly thing the best bet would be to recode it… I'll take a look at it if you like?
 
Hey Harry, I am actually thinking the same -- I did this column thingy on recommendation from someone else, but maybe I shouldn't have as I'm not sure how it's really made or how to unpick it!! Can you??

Thanks for description Levi :)
 
The markup as a whole is pretty dire, but I've recoded the buttons thing for you… I'll upload it now.
 
Harry is that a newer way of doing it than mine then as there seems a lot less code and more css?

Does it work for variable width buttons?
 
There can always be less code…

That's not particularly new… or even new at all, it's just the most sensible approach IMO.

Feel free to use it.
 
Harry, just been playing with your code and I noticed you've used text-indent:-99999px. I thought that was bad for seo and you're supposed to use visibility: hidden; instead :confused:
 
Back
Top