2014-05-10 102 views
0

我在創建以下概念時遇到了問題。我想要映射網站圖片的特定部分以鏈接到網站中的另一個頁面,並且我希望整個圖片能夠伸展到查看器的寬度。我有這兩個,但是當圖像延伸時,它會拋出映射。有沒有辦法讓它自動補償?無法獲取按鈕,這是工作背景的一部分

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 

    <style type="text/css"> 
      * { margin: 0; padding: 0; } 

     #bg { position: relative; top: 0; left: 0; } 
     .bgwidth { width: 100%; } 
     .bgheight { height: 100%; } 

</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
    $(function() { 

     var theWindow  = $(window), 
      $bg    = $("#bg"), 
      aspectRatio  = $bg.width()/$bg.height(); 

     function resizeBg() { 

      if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
       $bg 
        .removeClass() 
        .addClass('bgheight'); 
      } else { 
       $bg 
        .removeClass() 
        .addClass('bgwidth'); 
      } 

     } 

     theWindow.resize(function() { 
      resizeBg(); 
     }).trigger("resize"); 

    }); 

</script> 
</head> 

<body> 
    <img src="background.png" id="bg" usemap = #bgmap alt=""> 
<map name=bgmap> 
<area shape=Rect Coords=410,200,595,390 Href="http://www.example.com"> 
</map> 

</body> 
</html> 

回答

0

你有一些錯誤,在你的代碼

<body> 
    <img src="background.png" id="bg" usemap="#bgmap" alt=""> 
<map name="bgmap"> 
<area shape="Rect" Coords="410,200,595,390" href="http://www.example.com"> 
</map> 

</body> 
+0

檢查了這一點http://jsfiddle.net/JpgYm/8/ –