PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

จะทำให้ปุ่มแสดงขึ้นมาเมื่อ over บนภาพ ใช้เทคนิคอะไรดีครับ

จะทำให้ปุ่มแสดงขึ้นมาเมื่อ over บนภาพ ใช้เทคนิคอะไรดีครับ

ปกติ

เมื่อ mouse over แสดงปุ่มขึ้นมา

ไม่ทราบว่าใช้เทคนิคไหน หรือว่าพอจะมีสคริปต์แนะนำรึป่าวครับ



โดย:  Man10u IP: 223.205.183.xxx วันที่: 05-12-2011 เวลา: 23:18:04

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 4

ทำได้ง่าย ๆ ตามสไตล์ ninenik อีกแล้ว ขอบคุณครับ และขอบคุณท่าน Jazzup ด้วยครับ



โดย:  Man10u IP: 223.205.58.xxx วันที่: 07-12-2011 เวลา: 17:00:52
 ความคิดเห็นที่ 3

 ตัวอย่างโค้ด และคำแนะนำ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>over show share</title>

<style type="text/css">
.holder_wrap{
	position:relative;
	margin:auto;
	display:block;
	height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
	position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
	position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}

/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
	position:absolute;
	display:none;	/* ซ่อนรายการนี้ */
	background-color:#CC99FF;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	top:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
	position:absolute;
	display:none;	/* ซ่อนรายการนี้ */
	background-color:#99FFCC;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	left:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
	position:absolute;
	display:none;	/* ซ่อนรายการนี้ */
	background-color:#FFCCCC;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	bottom:0px; /* css กำหนดชิดด้านล่าง  */
	z-index:999;	
}
/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
	position:absolute;
	display:none;	/* ซ่อนรายการนี้ */
	background-color:#FFFF99;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	right:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}

/* css กำหนดให้แสดง เมื่อวางเมาส์อยู่เหนือ */
.holder_wrap_img:hover .inner_position_top,
.holder_wrap_img:hover .inner_position_left,	
.holder_wrap_img:hover .inner_position_right,
.holder_wrap_img:hover .inner_position_bottom{	
/*	display:block;	*/
}

</style>
</head>

<body>



<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_top">
ซ้อนทับ ชิดขอบบน
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_left">
ซ้อนทับ ชิดขอบซ้าย
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_bottom">
ซ้อนทับ ชิดขอบล่าง
</div>
</div>
</div>

<br style="clear:both;float:left;" />

<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_right">
ซ้อนทับ ชิดขอบขวา
</div>
</div>
</div>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script type="text/javascript">  
$(function(){  
	$(".holder_wrap_img").hover(function(){
		$(this).find("div[class^='inner_position']").fadeIn();
	},function(){
		$(this).find("div[class^='inner_position']").fadeOut();
	});
});  
</script>  


</body>
</html>

 

ตัวอย่าง

ซ้อนทับ ชิดขอบบน

ซ้อนทับ ชิดขอบซ้าย

ซ้อนทับ ชิดขอบล่าง

ซ้อนทับ ชิดขอบขวา

 

หากต้องการใช้ css แทน jQuery ให้ลบคำส่ง jQuery บรรทัด  130 - 134 ออก

แล้วแก้ไข css บรรทัดที่ 70 เอา css คอมเม้นออกเพื่อเปิดใช้

 



โดย:  Ninenik Narkdee IP: 27.130.157.xxx วันที่: 07-12-2011
 ความคิดเห็นที่ 2

 ลืมบอก กำหนด  mouseout    ด้วยครับ ให้ ซ่อนปุ่ม 

หรือง่าย ๆ เลยก็เล่น css ไปครับ   ใส่ div ครอบ ปุ่ม ดังกล่าว

div.Classปุ่ม:hover
{
      display:inline;
     /* หรือ  display:block;   ตาม style ของคุณ*/
}
 



โดย:  Jazzup Live IP: 203.146.32.xxx วันที่: 06-12-2011 เวลา: 09:29:30
 ความคิดเห็นที่ 1

  ก็ใช้ attribute  mouseover="ชื่อ Function"  ครับใน tag  <img>

 

เช่น  <img alt='' src='xxxxxxxxxxxxxx'    mouseover='ShowBtn()'/>

 

ที่tag  script

 <script type='language=javascript'>

function ShowBtn()
{
        คำสั่งให้แสดงปุ่ม ดังกล่าว
}

</script>



โดย:  Jazzup Live IP: 203.146.32.xxx วันที่: 06-12-2011 เวลา: 09:27:23