|
 |
| |
ขอโค้ด java script เอาเมาส์ไปชี้ที่รูปแล้วภาพใหญ่ขึ้นมา |
| |
 |
|
|
 |
 |
|
Code (JavaScript)
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<form name="frmMain" action="" method="post">
<script language="JavaScript">
function showImg(imgsrc)
{
document.frmMain.imgAvatar.src=imgsrc;
}
</script>
<a href="" OnMouseOver="javascript:showImg('plakrim.jpg');"><img src="plakrim.jpg" width="40"></a> <br>
<a href="" OnMouseOver="javascript:showImg('win.jpg');"><img src="win.jpg" width="40"></a>
<hr>
<img id="imgAvatar">
</form>
</body>
</html>
Go to : JavaScript Change Display Image When MouseOver
|
 |
 |
 |
 |
| Date :
2011-07-09 12:04:23 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ใส่ลิงค์ให้รูป แล้วรูปใหญ่ขึ้นทำไงดีครับ
|
| |
|
|
| |
| Date :
2011-07-27 11:32:03 |
By :
mimx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าใส่ link ให้ target="_blank" แล้ว link ไปยังรุปโดยตรงเลยครับ 
|
| |
|
|
| |
| Date :
2011-07-27 13:49:41 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โค้ด java script ที่ พี่ webmaster เอามาให้แต่ละอันสุดยอดเลยครับพี่
|
| |
|
|
| |
| Date :
2011-10-01 11:55:15 |
By :
ZerzaCub |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!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>Zoom</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<style>
img {
border: 1px thin #999;
}
#images {
position: absolute;
border: 5px solid #999;
}
#info {
width: 950px;
height: 700px;
position: absolute;
overflow: hidden;
}
</style>
<script type="text/javascript">
$( function(){
var offsetX = 10;
var offsetY = 0;
$('#box a').animate({ "opacity" : 0.5 });
$('#box a').hover( function(e){
var href = $(this).attr('name');
var html = '<div id="info">';
html += '<div align="right" style="padding-right:50px; padding-bottom:10px;"><strong>'+ href +'</strong></div>';
html += '<img src="'+ href +'" id="images" />';
html += '</div>';
$(this).animate({ "opacity" : 1 });
$('#box').append(html).children('#info').hide().fadeIn(500);
$('#info').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
},
function(){
$(this).animate({ "opacity" : .5 });
$('#info').remove();
}
);
$('#box a').mousemove( function(e){
$('#info').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});
});
</script>
</head>
<body>
<div id="box">
<a href="#" name="gallery2.jpg"><img src="gallery21.jpg" /></a>
<a href="#" name="gallery3.jpg"><img src="gallery31.jpg" /></a>
<a href="#" name="gallery4.jpg"><img src="gallery41.jpg" /></a>
<a href="#" name="gallery5.jpg"><img src="gallery51.jpg" /></a>
<a href="#" name="gallery6.jpg"><img src="gallery61.jpg" /></a>
</div>
</body>
</html>
ลองดูครับว่าตรงตามความต้องการรึเปล่า อันนี้เป็น code ที่ผมลองเขียนฝึกใช้ jquery นะครับ
|
| |
|
|
| |
| Date :
2011-10-05 12:13:55 |
By :
lightkung |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
target="_blank" แล้วใส่ Link ยังไงอ่ะครับ ผมมือใหม่หัดทำอ่ะครับ ยังไม่รู้จักครับ
|
| |
|
|
| |
| Date :
2011-11-15 21:41:48 |
By :
มือใหม่ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอเป็นตัวอย่างสัก 1 ตัวอย่างจะขอบพระคุณอย่างสูงเลยครับ
|
| |
|
|
| |
| Date :
2011-11-15 21:57:25 |
By :
มือใ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
http://web-programming-bookmark.blogspot.com/2010/12/jquery-enlarge-image-by-num.html
|
| |
|
|
| |
| Date :
2011-11-15 22:56:09 |
By :
num |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
พี่คับพอดีผมนำโค้ดด้านบน..บนสุด..ไปใช้แล้วลองเปิดใน ie 9 ดูแล้ว รูปเมื่อทำการคลิ๊กแล้วไม่ขึ้นคับ java ผมก็ลงแล้วและเปิดเรียบร้อยแล้ว มี โค้ดที่แก้ไขตรงนี้หรือวิธีการแก้ไข หรือเปล่าคับ รบกวนด้วยคับ
|
| |
|
|
| |
| Date :
2012-03-29 14:45:06 |
By :
karum_11 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แต่ทำไมพอเอาเมาส์ออกแล้วภาพใหญ่มันน่าจะหายไป แต่มันกลับโชว์ค้างอยู่
|
| |
|
|
| |
| Date :
2013-05-08 11:34:38 |
By :
isumi_jang |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สมัยนี้เค้านิยมใช้พวก jQuery แล้วน่ะครับ
|
| |
|
|
| |
| Date :
2015-06-10 12:02:57 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
