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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hyperlinking images

    I've been trying to figure out a way to link an image on my website to the main page, but the problem is that whenever I do this, a border pops up around the image because of "a:hover {text-decoration: none; color: #000000;}" from the style sheet.

    Is there a way I can link it to the main page without making it use the a:hover property?

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Code:
    img a {
    	border-style: none;
    	}

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've added that to the style sheet, but how am I supposed to use it?

    Code:
    <img src="http://codingforums.com/image.png" a href="http://codingforums.com/" alt="CodingForums.com" />

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,340
    Thanks
    29
    Thanked 283 Times in 277 Posts
    It should be a img not img a. An a img selector will select all anchor elements that contain an image element (all image links) and apply the associated styles. A valid XHTML construct that would be selected:

    Code:
    <a href="/">
      <img alt="Alternative Text" src="image.png"/>
    </a>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked. Thanks, guys.

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the double post, but the borderless image doesn't seem to be working properly. I don't see any borders in Safari, but I can still see them if I use Firefox.

    Code:
    HTML
    
    <a href="/"><img alt="Alternative text" src="image.png"/></a>
    Code:
    CSS
    
    a {text-decoration: none; color: #7C7C7C;}
    a:hover {text-decoration: none; color: #000000;}
    img a {border-style: none;}
    http://denier.foohost.be/index/freelancer/
    Last edited by Denier-of-Soup; 11-01-2006 at 01:37 AM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't think you read Arbitrator's post too carefully. It should be
    Code:
    a img {
    border:0;
    }
    NOT
    Code:
    img a {
    ...
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    My bad. Sorry!

  • #9
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked. Thanks again. =P


  •  

    Posting Permissions

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