SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouse over & image change

    Hello,

    I’ve got my site to do a button with text (on the left, entitled ‘Button here’) which changes background on a mouseover.

    I added an icon (the speech bubble to the left) but it caused a white gap to appear above the button. Also I want the icon’s image to change when they do a mouse over (I’ll have another one so the backgrounds match).


    Any ideas how I do this? Thanks.

    You can see my example by going to my web page (here it is in code as it won't let me do it straight).

    3 w's
    ashthomas
    dot com
    forwardslash
    css

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Relative offset positioning only causes an element to display in a different place while not actually shifting the element - the image is actually still above the rollover link, causing the gap.

    Put the image within the <a> link :
    Code:
    <td>
    <div class="men"><a href="#"><img src="images/marker3.gif" class="meni">Button here</a></div>
    </td>
    And then set the height and line height of the <a> to get the vertical alignment instead of the top and bottom padding, and then set the vertical-align of the image to the middle. Adjustment of margin and left padding will sit everything in place :
    Code:
    .meni { 
    	vertical-align: middle; 
    	margin-right: 15px; 
    }
    
    .men a { 
    	display:block; 
    	background:url(images/menu_bgd2.gif) left top; 
    	text-transform:uppercase; 
    	font-size:.69em; 
    	font-family:tahoma; 
    	color:#fff; 
    	font-weight:bold; 
    	text-decoration:none; 
    	height: 46px; 
    	line-height: 46px; 
    	padding-left: 15px; 
    }

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's brilliant, thanks loads, it fixed the page & my knowledge )

    Only how do I change the icon (to have a different backdrop) please?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Only how do I change the icon (to have a different backdrop) please?
    You could just use a transparent png image with a transparent background and then the hovered background will show through. Unfortunately IE6 doesn't understand transparent pngs and you would need to use the "alpha image loader" if you wanted to support ie6.

    Alternatively remove the image and float a span in its place with a width and height and a background image to it. When the anchor is hovered you change the background image in the span also to match the new background.

    Code:
    .men a span {
        float:left;
        width:24px;
        height:27px;
        background:url(http://www.ashthomas.com/css/images/marker3.gif) no-repeat 0 0;
        margin:0 5px 0 0;
    }
    .men a:hover {visibility:visible;}/* ie fix*/
    .men a:hover span {
        background-position:0 -27px;
    }
    Code:
    <div class="men"><a href=#><span></span> Button here</a></div>
    This assumes that you have made an image that contains both states on it (one on top of each other - 24px x 54px). On hover you just shift the background position and the new image comes into view.

    Note that you have a missing doctype and you also have the xml declaration at the top of the page. Both of which will trip quirks mode in IE6 - 8 and cause numerous problems.

    Always use a full doctype and make sure the html you use matches your doctype. You seem to be using mainly html4.01 transitional but also have xhtml closing tags in the page as well.

    Your code is very messy with missing quotes around classes and attributes so make sure you keep everything neat and tidy and valid .

  5. #5
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Thanks for your help, I was hoping there'd be an easier way in css, I guess I'll just do it with javascript instead as having an image over another sounds inelegant.

    The transparent image wouldnt work as the anti-aliasing would show up.

    Yea, I know the rest is chuff, it's bits from a site I bought, bits from me and bits from other sites! ) I'll tidy it up when it's working.

    Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for your help, I was hoping there'd be an easier way in css, I guess I'll just do it with javascript instead as having an image over another sounds inelegant.
    Far from it - it's very elegant and is the way that a lot of sites are going -just google sprites with css and you will see

    It's just a few lines of code so I'm not sure what you don't like. It's much better than using js to swap images on hover and more reliable. You need 2 images if you are doing this with js whereas the css version is just one image and you swap the background position. This cuts down on sever requests and probably works out at a smaller image filesize also.

    A winner in every respect.

  7. #7
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, now I understand. I thought when you said 'One on top of each other' you wanted two images displayed with the normal image over the selected one. When the mouse moved over, you'd hide the normal image which would only display the selected one.

    After researching sprites I now understand that you have one image with the normal button at the top and the selected underneath it. When the mouse isnt over the tag shows the top half of the image, with a mouse over you show the bottom half.

    This is elegant and I'll be using it.

    So I'm assuming that css cannot handle what I was originally after: That is a button with a background - one half with an icon (that changes during the mouse over the whole button) and the other half with text (who's background changes during mouse over the whole button).

    This would save me having to re-draw the button if I wanted a simple change to the text. I don't think CSS can do this.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abthomas View Post
    After researching sprites I now understand that you have one image with the normal button at the top and the selected underneath it. When the mouse isnt over the tag shows the top half of the image, with a mouse over you show the bottom half.
    Not exactly, you can have every single image in one image file and then show whatever part of it you want. It doesn't just half to be 2 images.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never said 2 images - if you look at my text (that you quoted) it says 'one image'. But your point of having *all* the buttons in one image is a nice one!

    It's a shame css is not powerful enough to do the button I originally wanted.

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abthomas View Post
    ...
    So I'm assuming that css cannot handle what I was originally after: That is a button with a background - one half with an icon (that changes during the mouse over the whole button) and the other half with text (who's background changes during mouse over the whole button).

    This would save me having to re-draw the button if I wanted a simple change to the text. I don't think CSS can do this.
    Of course CSS can do it.

    Just combine the code in Paul's answer with what you already have; the a:hover state that also targets the span. As described you can use sprites with both the span for the icons position-shift, and with the anchor for the text-backgrounds position-shift. The span is floated in the block displayed anchor as together Centauri and Paul already said.

    The full background for clarity:
    Code:
    .men a:hover{ background: url(images/menu_bgd2_menu_bgd1.gif) repeat-x left bottom;}
    .men a:hover span{ background: url(images/marker3_marker2.gif) no-repeat left bottom;}
    
    <div class="men"><a href=#><span></span> Button here</a></div>
    If you want to combine all different buttons in one sprite, just do so and keep track of their different positions. Likewise with the repeating backgrounds.
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, finally got it - I was so close before and gave up. Your reply spurred me on & I've got it all working. Thanks to you & others!

  12. #12
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All done now, I used multiple classes so the button definition is separate to the icon - this means I can re-use the button definition and just add an additional new class for the icon (so it has 2 classes, the button & the icon).

    One tiny point - the mouse image stays as the arrow over the image (over the text & rest of the button it changes correctly to a finger pointer) which is only a tiny flaw but still annoying. I managed to fix this by saying:

    .bubbleicon a span { cursor: pointer; background:url(images/bubblered.gif) no-repeat 0 0; }

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes sometimes it does that but it's quite an easy fix which you realized. It's one of the few times you need to use the [snip]cursor[/snip] property. Glad you got it sorted out .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •