comment

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา comment

comment



อยากได้เทคนิคการคลิ๊กที่ส่วนที่ต้องการแล้วสามารถคอมเมนต์ได้ เช่น คลิ๊กที่หัว แล้วสามารถเม้นอาการได้ว่าปวดหัว เป็นต้น


Reejanezii 1.47.43.xxx 31-08-2014 21:26:59

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ใช้ map area สร้างพื้นที่ส่วนที่ต้องการ แล้วใช้ javascirpt กำหนด event ให้

ดูตัวอย่างเป็นแนวทาง คลิกที่หัว ของรูปด้านซ้าย หรือ คลิกที่ ส่วนลำดัว ของรูปด้านซ้าย




โค้ดตัวอย่าง

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style type="text/css">
.my-div{
	position:absolute;
	display:block;
	width:300px;
	height:50px;
	background-color:#FCC;	
}
</style>
</head>  
<body>  


<img src="http://www.doctor.or.th/sites/default/files/2_25.JPG" width="500" height="504" usemap="#Map2" border="0" />
<map name="Map2" id="Map1">
  <area class="mycss" shape="circle" title="head" coords="134,50,33" href="javascript:void(0);" />
  <area class="mycss" shape="poly" title="body" coords="86,98,110,91,129,100,149,89,182,103,169,149,167,190,170,217,142,249,129,247,119,248,91,222" href="javascript:void(0);">
</map>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".mycss").on("click",function(event){
		var locateX=event.pageX;  
		var locateY=event.pageY;      
		$( "<div/>", {
		  "class": "my-div",
		  text: $(this).attr("title"),
		  click: function() {

		  }
		})
		.appendTo( "body" )
		.css({  
			left:locateX,  
			top:locateY  
		});
	});
});
</script>
</body>
</html>


ninenik 110.169.211.xxx 01-09-2014






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ