Помогите вставить гиперссылки в код спрайта CSS .. Java? HTML? - PullRequest
Новая
       6

Помогите вставить гиперссылки в код спрайта CSS .. Java? HTML?

0 голосов
/ 29 июня 2011

Очень просто делать ролловер-изображения в CS5, используя встроенный Javascript, однако мне нужно сделать это на основе CSS.

Мне удалось заставить код работать, и спрайты все замечательно, но у меня, похоже, есть проблема ... Мне нужно сделать их кликабельными (указывающими) на URL.Я пробовал каждый метод, включая <a href> URL в строке div.Я пытался даже разместить 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>

1 Ответ

0 голосов
/ 29 июня 2011

Вместо div элементов используйте ссылки - a с соответствующим атрибутом href, указывающим на ваши пункты назначения.

...