0

組み込みのJavascriptを使用してCS5でロールオーバーイメージを実行するのは非常に簡単ですが、このCSSベースで実行する必要があります。

私はなんとかコードを機能させることができ、スプライトはすべて素晴らしいですが、問題があるようです...これらをURLにクリック可能（ポインティング）にする必要があります。<a href>div行にURLを含むすべてのメソッドを試しました。画像付きの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>
4

1 に答える 1

0

div要素の代わりにリンクを使用します -目的地を指すa適切な属性を使用します。href

于 2011-06-29T10:22:58.583 に答える