Question

我尝试过使用坐标方法以及从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 -->

Answer 1

你可以将图像作为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;
}

使图像的某些部分以更整洁的方式可点击

1 个答案: