SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing IMG border color on Hover

    I want to add a border to the linked images in my #header div

    It needs to start off with a 1px solid white border and then on hover change color and then it changes back on -mouse off-.

    Is this CSS2? Or can it be acheived in CSS1?

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #header a img {
    border: 1px solid white;
    }
    
    #header a:hover img {
    border: 1px solid green;
    }

  3. #3
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I've tried a similar method before, but for some weird reason it never works in MSIE6 it just displays the white border. Does anyone know how to solve this and get it to work in MSIE 6 as well?

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Can you show some code? This should work in IE6 (and 5+) just fine.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I read somewhere that MSIE 6 doesn't support hover in this situation or is this wrong?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style>
    #aboutdcsbutton a img {
    border: 1px solid white;
    }
    
    #aboutdcsbutton a:hover img {
    border: 1px solid green;
    }
    </style>
    </head>
    
    <body><div id="aboutdcsbutton"><a href="http://www.mysite.co.uk"><img src="pic.gif" width="137" height="31" border="0"></a></div>
    </body>
    </html>

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Can you show some code? This should work in IE6 (and 5+) just fine.
    Hello

    Yes code please hovers always work, for free and ezy

    http://www.rekkab.com/s/menu/start-menu.htm
    Last edited by all4nerds; Jun 9, 2005 at 01:27.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    hello tag a hovers, not tag img, a needs size and display block

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style>
    #aboutdcsbutton a{
    display:block;
    width:137px;
    height:31px;
    border: 1px solid #ff3300;
    }
    
    #aboutdcsbutton a:hover{
    border: 1px solid green;
    }
    img{border:none;}
    </style>
    </head>
    
    <body><div id="aboutdcsbutton"><a href="http://www.mysite.co.uk"><img src="pic.gif" width="137" height="31" border="0"></a></div>
    </body>
    </html>
    Last edited by all4nerds; Jun 8, 2005 at 07:51.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, that works very well. It's strange, I thought it was much easier than that (although it doesn't look that difficult!). I don't think I would have got to that solution without asking!


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
  •