Set hyperlink to image class??

[shivup]

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

[VIPStephan]

You need two different links for that. From where do you think would the browser get the URL to go to?

[shivup]

Originally Posted by VIPStephan

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

[VIPStephan]

<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>

.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;
}

[shivup]

Originally Posted by VIPStephan

<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>

.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