PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ถามเรื่องการover mouse เมื่อนำเมาส์ไปวางที่รูปภาพครับ

ถามเรื่องการover mouse เมื่อนำเมาส์ไปวางที่รูปภาพครับ

ตามลิงค์นี้น่ะครับ http://www.modernweddingphuket.com/gallery.php

ตรงที่รูป wedding   event  family พอเอาเมาส์ไปที่รูป รูปจะมีการเปลี่นสีอ่ะครับ ไม่ทราบมีวิธีการยังไงอ่ะครับ



โดย:  Boy415 IP: 223.205.203.xxx วันที่: 02-02-2011 เวลา: 22:04:25

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

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


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


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

ขอบคุณครับพี่



โดย:  Boy415 IP: 180.183.222.xxx วันที่: 03-02-2011 เวลา: 16:36:05
 ความคิดเห็นที่ 4

 เป็น flash

ลองเข้าไปดูในเว็บเขาเลย http://slideshowpro.net/



โดย:  Ninenik IP: 27.130.93.xxx วันที่: 03-02-2011
 ความคิดเห็นที่ 3

พี่ครับรบกวนอีกนิดครับไม่ทราบเค้าใช้เทคนิคอะไรครับ เมื่อคลิกที่ อัลบั๊มแล้วจะมีแกลเลอรี่ ขึ้น ตามลิงค์เลยครับhttp://www.modernweddingphuket.com/gallery.php 

ไม่ทราบต้องทำงัยครับ ดูดีมากครับ



โดย:  Boy415 IP: 180.183.222.xxx วันที่: 03-02-2011 เวลา: 14:56:25
 ความคิดเห็นที่ 2

ขอบคุณ คุณพี่  Ninenik  มากๆครับ



โดย:  Boy415 IP: 180.183.222.xxx วันที่: 03-02-2011 เวลา: 10:42:32
 ความคิดเห็นที่ 1

 รู้สึกว่า วิธีที่เขาใช้ จะเป้นการสลับรูป คือ จะมีรูป 2 อัน

รูปปกติอันหนึ่ง และก็รูปที่มีสีดำจาง แล้วใช้ javascript สลับรูป
เมื่อเอาเมาส์ไป over
 
ลองเอาวิธีกำหนดโดย css ไปใช้ดู วิธีใช้รูปอันเดียว คือรูปปกติ
แล้วใช้ css จัดการ แทน javascript
 
ตัวอย่าง

 
โค้ดทดสอบ
<style type="text/css">
div.overswap{
	position:relative;
	display:block;
	width:163px;
	height:206px;
	float:left;
	margin-right:10px;
}
div.overswap div.blacklight{
	position:absolute;	
	background-color:#000000;
	display:block;
	width:163px;
	height:206px;
	left:0;
	top:0;
	z-index:100;
	opacity:0.5;
	filter: alpha(opacity=50);
	cursor:pointer;	
}
div.overswap div.blacklight:hover{
	opacity:0;
	filter: alpha(opacity=0);
}
div.overswap  img{
	position:absolute;
	border:0;
	left:0;
	top:0;
}
</style>
<div class="overswap">
<a href="#">
<div class="blacklight"></div>
<img src="http://www.modernweddingphuket.com/images/gallery_banner_back_03.jpg" />
</a>
</div>
<div class="overswap">
<a href="#">
<div class="blacklight"></div>
<img src="http://www.modernweddingphuket.com/images/gallery_banner_back_03.jpg" />
</a>
</div>
<br style="clear:both;" />
 


โดย:  Ninenik IP: 27.130.93.xxx วันที่: 03-02-2011