帮助将超链接插入 CSS sprite 代码..Java？ HTML？
使用内置的 Javascript 在 CS5 中制作翻转图像非常简单，但是，我需要基于 CSS 进行此操作。
我已经设法让代码正常工作，并且精灵都很棒，但我似乎有一个问题......我需要使这些可点击（指向）到一个 URL。我已经尝试了所有方法，包括 div 行中的 url。我什至尝试将网址与图像一起放置。我不想像我在其他地方看到的那样使用 方法重新开始。我什至无法让它工作...所以简而言之，有没有（简单）方法使精灵指向一个网址...谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style type="text/css">
.sprites {
background-image : url(http://sheldontechnology.com/social/facebooksprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#facebooksprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
padding-left:10px;
float: left;
}
#facebooksprite:hover {
background-position : -0px 0px;
}
.sprites2 {
background-image : url(http://sheldontechnology.com/social/twittersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#twittersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#twittersprite:hover {
background-position : -0px 0px;
}
.sprites3 {
background-image : url(http://sheldontechnology.com/social/flickrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#flickrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#flickrsprite:hover {
background-position : -0px 0px;
}
.sprites4 {
background-image : url(http://sheldontechnology.com/social/youtubesprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#youtubesprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#youtubesprite:hover {
background-position : -0px 0px;
}
.sprites5 {
background-image : url(http://sheldontechnology.com/social/tumblrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#tumblrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#tumblrsprite:hover {
background-position : -0px 0px;
}
.sprites6 {
background-image : url(http://sheldontechnology.com/social/bloggersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#bloggersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#bloggersprite:hover {
background-position : -0px 0px;
}
.sprites7 {
background-image : url(http://sheldontechnology.com/social/googleplacessprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#googleplacessprite {
height : 73px;
width : 94px;
background-position : -0px -73px;
float:left;
}
#googleplacessprite:hover {
background-position : -0px 0px;
}
.sprites8 {
background-image : url(http://sheldontechnology.com/social/yelpsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#yelpsprite {
height : 75px;
width : 97px;
background-position : -0px -75px;
float:left;
}
#yelpsprite:hover {
background-position : -0px 0px;
</style>
<div class="sprites" id="facebooksprite"></div>
<div class="sprites2" id="twittersprite"></div>
<div class="sprites3" id="flickrsprite"></div>
<div class="sprites4" id="youtubesprite"></div>
<div class="sprites5" id="tumblrsprite"></div>
<div class="sprites6" id="bloggersprite"></div>
<div class="sprites7" id="googleplacessprite"></div>
<div class="sprites8" id="yelpsprite"></div>
</body>
</html>
It is very simple to do rollover images in CS5 using the built in Javascript, however, I need to do this CSS based.
I've managed to get the code working and the sprites are all wonderful but I seem to have a problem...I need to make these clickable (pointing) to a URL. Ive tried every method including a <a href> url in the div line. I tried even placing the url with an image. I do not want to have to start all over using the <li> method as Ive seen everywhere else. I cannot even get that to work...so in short is there anyway (simple) way to make the sprite point to a url...thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style type="text/css">
.sprites {
background-image : url(http://sheldontechnology.com/social/facebooksprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#facebooksprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
padding-left:10px;
float: left;
}
#facebooksprite:hover {
background-position : -0px 0px;
}
.sprites2 {
background-image : url(http://sheldontechnology.com/social/twittersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#twittersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#twittersprite:hover {
background-position : -0px 0px;
}
.sprites3 {
background-image : url(http://sheldontechnology.com/social/flickrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#flickrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#flickrsprite:hover {
background-position : -0px 0px;
}
.sprites4 {
background-image : url(http://sheldontechnology.com/social/youtubesprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#youtubesprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#youtubesprite:hover {
background-position : -0px 0px;
}
.sprites5 {
background-image : url(http://sheldontechnology.com/social/tumblrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#tumblrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#tumblrsprite:hover {
background-position : -0px 0px;
}
.sprites6 {
background-image : url(http://sheldontechnology.com/social/bloggersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#bloggersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#bloggersprite:hover {
background-position : -0px 0px;
}
.sprites7 {
background-image : url(http://sheldontechnology.com/social/googleplacessprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#googleplacessprite {
height : 73px;
width : 94px;
background-position : -0px -73px;
float:left;
}
#googleplacessprite:hover {
background-position : -0px 0px;
}
.sprites8 {
background-image : url(http://sheldontechnology.com/social/yelpsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#yelpsprite {
height : 75px;
width : 97px;
background-position : -0px -75px;
float:left;
}
#yelpsprite:hover {
background-position : -0px 0px;
</style>
<div class="sprites" id="facebooksprite"></div>
<div class="sprites2" id="twittersprite"></div>
<div class="sprites3" id="flickrsprite"></div>
<div class="sprites4" id="youtubesprite"></div>
<div class="sprites5" id="tumblrsprite"></div>
<div class="sprites6" id="bloggersprite"></div>
<div class="sprites7" id="googleplacessprite"></div>
<div class="sprites8" id="yelpsprite"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用链接 -
a代替div元素，并使用适当的href属性指向您的目的地。Instead of
divelements use links -awith appropriatehrefattribute pointing to your destinations.