PDA

View Full Version : adding link to hover image


enigma77
06-04-2010, 10:46 AM
Hi,
I made an image in photoshop to achieve some transperency effect. It`s an one image. Then I used the css rule telling the block position to shift that image up and down when hovering mouse cursor over it. It works fine, the problem is that I can not link that image to a webpage.

here is the css:
.twoColFixLtHdr #container #mainContent .slika {
background-image: url(../images/nadgradnja.index3.jpg);
display: block;
height: 241px;
width: 320px;
background-position: bottom;
}
.twoColFixLtHdr #container #mainContent .slika:hover {
background-image: url(../images/nadgradnja.index3.jpg);
display: block;
height: 241px;
width: 320px;
background-position: top;
font-family: Verdana;and html:
<p class="slika">

I Hope it can be fixed.

Corrosive
06-04-2010, 11:05 AM
AKAIK you can't link a background image. You'll need either some HTML text to form the link or maybe look at image maps for linking.

enigma77
06-04-2010, 11:30 AM
oh, is it possible to make some transperent text over the image and link it to a web page, probably not a very elegant solution.

Corrosive
06-04-2010, 11:32 AM
Yeah, that might work. I've never done it myself though so another member may be able to expand on your options. I tend to stick to HTML for links.

enigma77
06-04-2010, 11:39 AM
ok thanks, maybe I`ll add a simple rollover instead of this and use javascript

enigma77
06-04-2010, 01:52 PM
I found a solution:
Html code should be like this:

<a class="img" href="link"></a>

in my case like this

<a class="slika" href="link"></a>

edbr
06-05-2010, 01:34 AM
oh, is it possible to make some transperent text over the image and link it to a web page, probably not a very elegant solution.
not relevant now you have a solution but i would stay away from transparent text as it could rattle google's cage, it stems from the days of keyword stuffing on page. however you could use
transparent gif's and if placed withing divs absolutely , they can become lelike'hotspots'

enigma77
06-05-2010, 07:16 AM
thats true edbr, I actually didn˙t think of that, transperent text is problematic

Rob_Che
06-10-2010, 12:50 PM
An A tag can be any size/shape and can be made to act like a P or DIV.

Convert it to a block element and style that as you have your P ;)

Rob_Che
06-10-2010, 12:50 PM
in my case like this

<a class="slika" href="link"></a>

D'oh! Missed that... yeah, that's what I meant :)