帮助将超链接插入CSS精灵代码.Java语言HTML

使用内置的Javascript在CS5中进行滚动图像非常简单，但是，我需要基于CSS进行滚动。

我已经设法让代码工作起来，精灵都很棒，但我似乎有问题。。。我需要使这些可以点击（指向）URL。我尝试了所有方法，包括在div行中使用<a href> url。我甚至试着把网址和图片放在一起。我不想像在其他地方看到的那样，从头开始使用<li>方法。我甚至无法让它发挥作用。。。总之，有没有一种（简单的）方法可以让精灵指向一个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>

不使用div元素，而是使用链接-a，其中相应的href属性指向您的目的地。

相关内容

最新更新

热门标签：