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

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

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

ปกติ

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

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



Man10u 05-12-2011 23:18:04

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

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


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


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

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

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

 

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

 

ที่tag  script

 <script type='language=javascript'>

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

</script>



Jazzup Live 06-12-2011 09:27
 ความคิดเห็นที่ 2

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

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

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



Jazzup Live 06-12-2011 09:29
 ความคิดเห็นที่ 3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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="https://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="https://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="https://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="https://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 07-12-2011
 ความคิดเห็นที่ 4

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



man10u 07-12-2011 17:00
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ