Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Changing Image Size in a Hover

    Maybe this is an easy question:
    I have the following CSS:
    Code:
    .fn-area:hover {
     position: absolute;
     background-image: url(artwork/image.gif);
     border: 1px solid #fff;
    }
    The area is different sizes however. Is there anyway to make the image in the background adjust to the size of the area when I hover over it?

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    A little further clarification, I don't want the image to repeat if the area is bigger then the image and I don't want only part of the image to appear if it's smaller then the image.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Background images are not resizeable under current standards so the strict answer to your questions is "no." You could always create an image that has both the small and large sizes in the same image (just like people use in "sprite" menus, basically). Then you can change the background position at the same time as you change the element size so that the large version portion of the sprite image appears when hovered.

    Otherwise I think you're going to need javascript.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello treeleaf20,
    Your absolute positioned hover image is removed from the normal flow of the document. Have you tried not positioning it? You would need to specify a size too...

    Let's have a look at your test site, it would help to have the images available.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    In response to your followup, you can (and would need to) specify background-repeat:no-repeat; for the element if you try the sprite suggestion that I made...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Yeah, they can vary a ton. Not just a big and a small. Any idea how to do this with javascript?

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    I wish I could give you access to the test site but it's just on my local machine here as a localhost. I removed the position:absolute as you suggested. That's the issue, I don't know the size. The fn-area is defined as:
    PHP Code:
    echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px;\" position:relative;\">"
    So there can be a couple of these on the page and each one varies.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Not off of the top of my head, but why are we dismissing the CSS option so quickly? any given image would only need to have 2 stages, wouldn't it? Image size wouldn't matter as far as the sprite change is concerned.


    If your image sprite were laid out like this:
    Code:
     ____
    |    |
    |    |
    |____|____
    |         |
    |         |
    |_________|
    It would be a matter of assigning background-position:top left; for standard and then background-position:bottom right; for hover state. That's pretty light-weight coding. The only hard part is image editing, though I'm sure you could batch that kind of a job.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    I've never heard of an image sprite before. Do you have an example. The one nice thing is that mine will be some sort of rectangle everytime. So I'm not sure if your thing was an example but it will never look like that.

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm about to leave the office for the day so I can't follow up in detail, but a sprite image is used to create the menu described and implemented here:

    http://www.cssplay.co.uk/menus/menu5teen.html

    That makes a 3-state change with only 1 image. Yours would be even simpler than this.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    This seems like the idea, I don't know if the whole image isn't loading for me or what it is. How do you view how to do this?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Could it be your talking about a disjointed rollover?
    see -
    simple disjointed rollover
    complicated disjointed rollover

    And one more, this is an example of another CSS rollover - http://nopeople.com/CSS/CSS_rollover/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Here are the couple divs on the page:
    Code:
    <div class="fn-area" id="69" style="left: 133px; top: 81px; width:97px; height: 230px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="69" style="position:relative;"></div> 
    <span class="fn-note-content">creep</span>  </div>
    </div>
    <div class="fn-area" id="70" style="left: 386px; top: 143px; width:136px; height: 129px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="70" style="position:relative;"></div> 
    <span class="fn-note-content">creep</span>  </div>
    </div>
     <div class="fn-area" id="71" style="left: 43px; top: 344px; width:151px; height: 222px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="71" style="position:relative;"></div>
    So that shows that they come in different sizes and different places in the page.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    So your #69 or #70 are the different hovers?
    That could be done... I think, as a disjointed rollover.

    Be careful though, id is not supposed to be a number and won't validate.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    That's correct. The are different hovers and different sizes. That's why I would basically need the background to get changed for every single rollover.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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