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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา จะทำให้ปุ่มแสดงขึ้นมาเมื่อ over บนภาพ ใช้เทคนิคอะไรดีครับ

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

ปกติ

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

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

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

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

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

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

Pass

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ความคิดเห็นที่ 1

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

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

ที่tag script

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

</script>

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

ความคิดเห็นที่ 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

ความคิดเห็นที่ 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

ความคิดเห็นที่ 4

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

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