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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Set hyperlink to image class??

    Hello Guys,

    Is there any way I can set hyperlink to a image which is in image class in css?

    for ex.
    I have this

    <div class="thumbnail"><a href="/test/test1.php"><img src="/images/covers/test.jpg" alt="test" class="bkmrk" /></a>

    and here is my css file

    .thumbnail {
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 20px;
    }

    .thumbnail img {
    height: auto;
    width: 95%;
    max-width: 150px;
    padding-top: 20px;
    }

    .thumbnail .bkmrk {
    background: url(/images/gold-bookmark.png) no-repeat 15px top;
    }

    and my output is



    is there any way I can set an hyperlink to this gold-bookmark.png image.. when i click on gold-bookmark.png it should take me somewhere and when i click on actual test.jpg it should take me to /test/test.php.. It seems impossible to me.. let me know if you have any solutions how to do it.. I am willing to do any necessary changes since output will be the way I want..


    thank you

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    You need two different links for that. From where do you think would the browser get the URL to go to?

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    You need two different links for that. From where do you think would the browser get the URL to go to?
    hello,
    I do have two different links.. lets assume, second link is http://www.google.com, when i click on that flag on top.. (gold-bookmark.png) it should take me to google.com

    is there any way to do it??

    Thanx

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Code:
    <div class="thumbnail">
      <a class="bookmark" href="http://example.com">Bookmark</a>
      <a href="/test/test1.php"><img src="/images/covers/test.jpg" alt="test" class="bkmrk" /></a>
    </div>
    Code:
    .thumbnail {
      float: left;
      width: 20%;
      text-align: center;
      margin-bottom: 20px;
      position: relative;
      padding-top: 20px;
    }
    .thumbnail .bookmark {
      position: absolute;
      background: url(/images/gold-bookmark.png) no-repeat 15px top;
      top: -20px;
      left: 15px;
      width: 20px;
      height: 20px;
      text-indent: -999em;
    }
    .thumbnail img {
      height: auto;
      width: 95%;
      max-width: 150px;
    }

  • Users who have thanked VIPStephan for this post:

    shivup (08-18-2012)

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Code:
    <div class="thumbnail">
      <a class="bookmark" href="http://example.com">Bookmark</a>
      <a href="/test/test1.php"><img src="/images/covers/test.jpg" alt="test" class="bkmrk" /></a>
    </div>
    Code:
    .thumbnail {
      float: left;
      width: 20%;
      text-align: center;
      margin-bottom: 20px;
      position: relative;
      padding-top: 20px;
    }
    .thumbnail .bookmark {
      position: absolute;
      background: url(/images/gold-bookmark.png) no-repeat 15px top;
      top: -20px;
      left: 15px;
      width: 20px;
      height: 20px;
      text-indent: -999em;
    }
    .thumbnail img {
      height: auto;
      width: 95%;
      max-width: 150px;
    }
    Man, You are genius.. you made my day.. thank you buddy... great help


  •  

    Tags for this Thread

    Posting Permissions

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