3 replies [Last post]
webdepot
webdepot's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT-7
Joined: 2013-07-15
Posts: 3
Points: 4

I'm running into a bit of an issue using a sprite as a link. I've done this before, but can't figure out why it's not working in this case.

The page in question is here: http://n2glam.com/teeth-whitening/

Basically, I'm working with the top image (#teeth_whitening_side). There are 6 total, so if one is missing, it's the top one that I'm working with. Anyway, heres the HTML

<div id="teeth_whitening_side">
<a class="teeth_whitening_side_link" href="http://n2glam.com/teeth-whitening/"><span>&nbsp;</span></a>
</div>

CSS is as follows:

#teeth_whitening_side a{height:200px;width:300px;background:url(<a href="http://n2glam.com/wp-content/uploads/2013/07/teeth-whitening-side2.jpg" rel="nofollow">http://n2glam.com/wp-content/uploads/2013/07/teeth-whitening-side2.jpg</a>);}
#teeth_whitening_side a:hover{ background-position:bottom;)}

Any help is appreciated. Thanks.

webdepot
webdepot's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT-7
Joined: 2013-07-15
Posts: 3
Points: 4

I should also note that I've

I should also note that I've tried applying the display:block attribute to the link. Problem is, it make the image slide up instead of flashing as the other 5 images below do. I want that effect with a link.

webdepot
webdepot's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT-7
Joined: 2013-07-15
Posts: 3
Points: 4

nvm, I feel so stupid. There

nvm, I feel so stupid. There was a transition effect going on with CSS that we written previous to me coming along with my code. Any way to close this thread?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 18 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You just did. cheers, gary

You just did. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.