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.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Size on Hover

    Is there a way to change an image size when a link of an image is hovered over? I can't seem to work it out...

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes this is possible. You can do this with javascript or css.

    javascript:

    onmouseover="this.size=x" onmouseout="this.size=x" or something like that.

    css:

    a:hover img#id {width: 300px;}, where #id=is the idd of the image.

    I don't know if both ways work though, not tried.
    CATdude about IE6: "All your box-model are belong to us"

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, only tried the CSS method but can't seem to get it to work - here's what I have if you can see where I'm going wrong -

    CSS -

    a:link img#im {
    width: 60px;
    height: 65px;
    border: 10px solid #0000FF;
    }

    a:hover img#im {
    width: 80px;
    height: 85px;
    border: 1px solid #0000FF;
    }

    HTML -

    <ul>
    <li><a href="#"><img id="im" src="image1.jpg"></a></li>
    <li><a href="#"><img id="im" src="image2.jpg"></a></li>
    <li><a href="#"><img id="im" src="image3.jpg"></a></li>
    <li><a href="#"><img id="im" src="image4.jpg"></a></li>
    <li><a href="#"><img id="im" src="image5.jpg"></a></li>
    </ul>

    I'm guessing where it's not working is the fact each image has the same ID... but this is for a menu where I want each image to get larger on hover.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.
    Code:
    ul, li {
    list-style: none;
    }
    
    ul#im a:link img {
    width: 60px;
    height: 65px;
    border: 10px solid #0000FF;
    }
    
    ul#im a:hover img {
    width: 78px;
    height: 83px;
    border: 1px solid #0000FF;
    }
    Code:
    <ul id="im">
    	<li><a href="…"><img src="image1.jpg" width="60" height="65" alt="…"></a></li>
    	<li><a href="…"><img src="image2.jpg" width="60" height="65" alt="…"></a></li>
    	<li><a href="…"><img src="image3.jpg" width="60" height="65" alt="…"></a></li>
    	<li><a href="…"><img src="image4.jpg" width="60" height="65" alt="…"></a></li>
    	<li><a href="…"><img src="image5.jpg" width="60" height="65" alt="…"></a></li>
    </ul>

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, still can't get it working though, and I copied your example exactly to make sure I was doing it right...

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try this

    IE6 and Mozilla likes it.


    I'll assume it was IE giving you a hard time as mozilla liked Bills' code well enough.

  • #7
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you will get pre made code at http://www.dynamicdrive.com

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Off course! A background image! That always helps, but you can't scale the image then. And that's what he's trying to acomplish.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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