使圖像的某些部分以更簡潔的方式點擊

-1

我嘗試過使用座標方法，也嘗試使用photoshop方法插入圖像。是否有另一種方法可以使圖像的某些部分以更簡潔的方式點擊？使圖像的某些部分以更簡潔的方式點擊

<script> 
new el_teacher = ["candice","john"]; 
$(".teacher1").mouseenter(function(){ 
$(#textbox").show(el_teacher[0]); 
}); 
$(".teacher2").mouseenter(function(){ 
$(#textbox").show(el_teacher[1]); 
}); 
$("*").mouseleave(function(){ 
$(#textbox").hide(); 
}); 
</script> 

<img src="ok.jpg" usemap="#image1"> 
<map name="image1"> 
<area shape="poly" coords="123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13" class="teacher1"> 
<area shape="poly"  coords="13,41,141,455,677,13,213,313,133,99,555,99,333,222,211,105,13,123,41,131,51,130,13,105,13,123,41,131,51,130,13,105,13" class="teacher2">

<!-- Sorry i do not have my codes with me right now but this is roughly the senario. --> 
<!-- @jycr753 i want the user to change the position of the click and the image also. --> 
<!-- I am looking for jquery or javascript that can eliminate or shorten the coordinates so that the user can edit the information themselves easily -->

來源

2013-03-20 clueless_bear

[你問同樣的問題在一小時前...]（http://stackoverflow.com/questions/15528923/如何製作圖像的一部分 - 可在用戶友好的方法中點擊）在詢問下一個問題之前，請嘗試閱讀[FAQ]（http://stackoverflow.com/faq#close）。 – basher 2013-03-20 17:17:41

可以使圖像的DIV的background-image，然後在它裏面絕對定位鏈接（或其他），它可以是你的互動區域。 like this

例如HTML：

<div id="myImage"> 
    <a id="myImage_zone1" href="http://google.com"></a> 
    <a id="myImage_zone2" href="http://aol.com"></a> 
    <a id="myImage_zone3" href="http://yahoo.com"></a> 
</div>

例如CSS：

#myImage { 
    background-image: url(http://farm9.staticflickr.com/8370/8366240991_45a728b522_z.jpg); 
    width: 640px; 
    height: 457px; 
    position:relative; 
} 
#myImage a { 
    border:1px solid #fff; 
    width:50px; 
    height:50px; 
    display:block; 
    position:absolute; 
    background-color:rgba(255,255,255,0.1); 
} 
#myImage a:hover { 
    background-color:rgba(255,255,255,0.3); 
} 
#myImage_zone1{ 
    top:350px; 
    left:350px; 
} 
#myImage_zone2{ 
    top:150px; 
    left:200px; 
} 
#myImage_zone3{ 
    top:280px; 
    left:100px; 
}

來源

2013-03-20 20:49:51

使圖像的某些部分以更簡潔的方式點擊

回答

相關問題