Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS image replacement with hover using this method

Discussion in 'Website Design Forum:' started by bamme, Jul 18, 2010.

  1. bamme

    bamme Senior Member

  2. Levi

    Levi Moderator Staff 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

    <div><a id="tm2" class="ro" title="Services link" href="[U]link address[/U]"><span>Services</span></a></div>
    In the css I have
    #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
    .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
    .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 :)
  3. bamme

    bamme Senior Member

    Thanks for the reply Levi!

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

    Which means my little columns to put the images in have the following style rules:
    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)?
  4. bamme

    bamme Senior Member

    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!!
  5. Levi

    Levi Moderator Staff Member

    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.
  6. bamme

    bamme Senior Member

    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 :/
  7. Levi

    Levi Moderator Staff Member

    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 :)

    .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 :)

    [/FONT]<div><a id="col11" class="buttons" title="Sales Arena" href="[U]weblink[/U]"><span>Sales Arena</span></a></div>
  8. bamme

    bamme Senior Member

    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 :)
  9. Levi

    Levi Moderator Staff Member

    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 :)
  10. bamme

    bamme Senior Member

    Sorry Levi this sounds well stupid but what do you mean by layers? Sorry :-/
  11. Levi

    Levi Moderator Staff Member

    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.
  12. Harry

    Harry Senior Member

    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?
  13. bamme

    bamme Senior Member

    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 :)
  14. bamme

    bamme Senior Member

    Do you need the files Harry or is it quick look at code?
  15. Harry

    Harry Senior Member

    The markup as a whole is pretty dire, but I've recoded the buttons thing for you… I'll upload it now.
  16. Harry

    Harry Senior Member

  17. Levi

    Levi Moderator Staff Member

    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?
  18. Harry

    Harry Senior Member

    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.
  19. Levi

    Levi Moderator Staff Member

    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:
  20. bamme

    bamme Senior Member

Share This Page