圖片地區沒有變成可點擊區域的圖像映射

Question

我試圖創建一個HTML圖像映射如下內容（請在下面找到我的代碼）：

h1 { 
 
    background-color: red; 
 
}

<h1> This is Frame A </h1> 
 

 

 
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap"> 
 

 
<map name="planetmap"> 
 
    <area shape="circle" coords="450,208" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun"> 
 
    <area shape="circle" coords="305,124" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth"> 
 
    <area shape="circle" coords="652,122" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus"> 
 
</map>

的圖像越來越顯示在網頁上，但是，太陽，地球和金星不會變成可點擊的東西，以便我可以將它引導到它們各自的圖像。請讓我知道我在做什麼錯了？我是否正確指定了座標？

我用下面的Image Generator找出座標：

Answer 1

這是因爲coords有三個項目，而不是2：x,y,radius。所以，你需要爲半徑（這裏有一個例子）中添加值：

h1 { 
 
    background-color: red; 
 
}

<h1> This is Frame A </h1> 
 

 

 
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap"> 
 

 
<map name="planetmap"> 
 
    <area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun"> 
 
    <area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth"> 
 
    <area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus"> 
 
</map>

注：因爲你定義的圖像的寬度和高度width="500" height="300"，你將需要改變x,y座標來調整。這就是爲什麼我在回答中改變了他們。