PopupImage Onmouseover ป๊อปอัพรูปภาพพร้อมข้อมูลตัวอย่าง PHP,jQuery

บทความนี้ก็ยังไม่พ้นเรื่องปอ๊ปอัพอยู่นะครับ เป็นป๊อปอัพแบบ onmouse over พอเอาเมาว์ไปชี้ ก็จะแสดงป๊อปอัพขึ้นมา พร้อมกับแสดงข้อควาามบรรยาย หรือข้อมูลที่เราต้องการ เมื่อใช้เมาว์คลิก เราอาจทำลิงค์ไปยังเพจต่างๆเพื่ออ่านข้อมูลเพิ่มเติม หรือ เพื่อโชว์รูปภาพต้นแบบก็ได้.....

เริ่ม...
บทนี้มีไฟล์ 3 ไฟล์คือ
jquery.js
config.php
popOnmouseOver.php

สร้างฐานข้อมูลสำหรับทดสอบ SQL

CREATE TABLE `image` (
  `id_image` int(11) NOT NULL AUTO_INCREMENT,
  `image` char(100) NOT NULL DEFAULT '',
  `title` char(100) NOT NULL DEFAULT '',
  `data` text NOT NULL,
  PRIMARY KEY (`id_image`)
);

เหมือนเดิมครับ เรามีพระเอกของเรานั่นก็คือ jQuery.js

ไฟล์ popOnmouseOver.php
นำเข้า jquery

<script type="text/javascript" src="jquery.js"></script>

ดึงข้อมูลรูปภาพขึ้นมาแสดงก่อนด้วยโค้ดนี้

ไฟล์ popOnmouseOver.php

<?php
include 'config.php';
$sql = "select * from image";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row[image];
$title = $row[title];
$data = $row[data];

echo "<a href ='uploads/$image'/>";
echo "<img id='images' height='60'
src='uploads/$image' alt='$title' rel='$data'/>";
echo "</a>";
$i++;
}
?>
<p id='desc'style="display: none;"></p>

จากนั้นก็กำหนด CSS ดังนี้
ไฟล์ popOnmouseOver.php

<style>
a img{
border:none;
}
#largeImage{
border:1px solid #dddddd;
padding:5px;
position: absolute;
width:300px;
background: #293849;
overflow: hidden;
color:#ffffff;
}

#largeImage img{
width:110px;
}

#images{
margin-left:20px;
}

#title{
height:auto;
padding:5px;
position:relative;
background: #88D0FF;
}
</style>

แล้วตามด้วย พระเอกของเรา javascript jQuery ดังนี้
ไฟล์ popOnmouseOver.php

<script type="text/javascript">
$(function(){
var offsetX=20;
var offsetY=10;
$('a').hover(function(e){

var imgRel = $(this).find('img').attr("rel");
var imgAlt = $(this).find('img').attr("alt");
var href = $(this).attr('href');
var html = '<div id="largeImage">';
    html += '<img align="left" style="margin-right: 10px" src="'+href+'"/>';
    html += '<span id="desc"<b><font color="#DCD995">'+imgAlt+'</font></b>';
    html += '<br><font size="2">'+imgRel+'</font></span></div>';
$(html)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function(){
$('#largeImage').remove();
});
$('a').mousemove(function(e){
$('#largeImage').css('top', e.pageY + offsetX)
.css('left', e.pageX + offsetX);
});
});
</script>

เสร็จแล้วครับ โค้ดสั้นๆแต่ได้ผลเป็นที่น่าพอใจ...เขาละ jQuery.

อาจจะพูดน้อยไปนิดหนึ่งนะครับ เพราะว่ามันคล้ายๆกับบทความก่อนมากๆ
บทความนี้ก็ขอจบลงเพียงเท่านี้ครับ.....