Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ช่วยดูโด้ด วนลูปข้อมูล เพื่อแสดงภาพ ใน tooltip ให้ด้วยครับ

ช่วยดูโด้ด วนลูปข้อมูล เพื่อแสดงภาพ ใน tooltip ให้ด้วยครับ

เริ่มหัวข้อใหม่

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

รบกวนช่วยแก้โค้ดให้หน่อยครับ คือว่า วนลูปข้อมูลแล้ว
รูปภาพ tooltip ขึ้นเฉพาะเรคอร์ดแล้ว อยากให้ทุกเรคอร์ด
ควรทำยังไงดีครับ

--------------------------------------------------------------------------------------------------
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$ (function(){
$ ("img#RoomPic") .hover (function(event) {
callTooltip ("#RoomId", event);
return true;
}, function(){
$("#RoomId") .hide() ;
}) ;
});

function callTooltip(obj, event) {
var locateX=event.pageX;
var locateY=event.pageY;
locateX+=10;
locateY+=10;
$ (obj) .show() .css({
left:locateX,
top:locateY
});
}
</script>
----------------------------------------------------------------------------------------------------
while($resu=mysql_fetch_array($q_sql)) {
$RoomId=$resu[RoomId];
$RoomPic=$resu[RoomPic];
}
echo "<td align=center >"."<span ><img src='FileUpRoom/$RoomPic' width='200' height='200' class='iTooltip' id='RoomId'><a href ='#' ><img src='FileUpRoom/$RoomPic' id='RoomPic' width='100' height='100' </a></span>"."</td>";

Tag : PHP, MySQL, HTML/CSS, JavaScript, Ajax, jQuery

Date : 2011-02-12 13:26:34

By : neekung

View : 1280

Reply : 10

No. 1

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

Date : 2011-02-12 14:02:29

By : neekung

No. 2

หมาของเซสชั่น

โพสกระทู้ ( 3,750 )
บทความ ( 0 )

มันแสดงรูปเดียวกันภายในรูปทั้งหมดหรอครับ

Date : 2011-02-12 14:06:30

By : Dragons_first

No. 3

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

มันแสดงเฉพาะรูปแรกรูปเดียวครับ รูปที่ 2 มันไม่แสดงรูปเลย แก้ไขไงดีครับ

Date : 2011-02-12 14:07:44

By : neekung

No. 4

หมาของเซสชั่น

โพสกระทู้ ( 3,750 )
บทความ ( 0 )

โค๊ดเต็มๆละครับ

Date : 2011-02-12 14:17:06

By : Dragons_first

No. 5

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

ประมาณนี้ครับผม

<?php session_start();
?>
<?php include("connect.php");

$RoomSearch=trim($_REQUEST['RoomSearch']);
$RoomStatusSearch=trim($_REQUEST['RoomStatusSearch']);
$pageid=trim($_REQUEST['pageid']);
$numrows=trim($_REQUEST['numrows']) ;

$RoomSearch=htmlspecialchars($RoomSearch);
$RoomStatusSearch=htmlspecialchars($RoomStatusSearch);
$pageid=htmlspecialchars($pageid);

?>
<html><head>

<title>Appointments and Reserving Meeting Rooms</title>

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$ (function(){
$ ("img#RoomPic") .hover (function(event) {
callTooltip ("#RoomId", event);
return true;
}, function(){
$("#RoomId") .hide() ;
}) ;
});

function callTooltip(obj, event) {
var locateX=event.pageX;
var locateY=event.pageY;
locateX+=10;
locateY+=10;
$ (obj) .show() .css({
left:locateX,
top:locateY
});
}
</script>










<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META http-equiv="Page-Enter" content="RevealTrans (Duration=1, Transition=20)">
<META http-equiv="Page-Exit" content="RevealTrans (Duration=1, Transition=20)">

<script language="JavaScript" type="text/JavaScript">

</script>

<script language="JavaScript" type="text/JavaScript">

</script>

<script Language="Javascript">

</script>

<script language="JavaScript" type="text/JavaScript">

</script>

<style type="text/css">

</style>

<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<link href="Calendar102/style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

</script>

<script language="JavaScript" type="text/JavaScript">

</script>

<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Picture/Header_002.jpg')">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="Button/Background001.jpg">
<tr>
<td width="100%"><table width="1024" height="225" border="1" align="center" cellpadding="0" cellspacing="0" id="Table_">
<tr>
<td height="100"><a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('หน้าหลัก','','Picture/Header_002.jpg',1)"><img src="Picture/Header_001.gif" alt="หน้าหลัก" name="หน้าหลัก" width="1024" height="100" border="0"></a></td>
</tr>
<tr>
<td height="30"><span class="Normal">ชื่อผู้ใช้งาน: <?php echo $FirstNamess ;?> หน่วยงาน: <?php echo $DepNamess ;?></span></td>
</tr>
<tr>
<td height="30"><ul id="MenuBar1" class="MenuBarHorizontal">
<li ><a href="index.php" class="MenuBarHorizontal">:: หน้าแรก</a>
<ul>
<li><a href="#">::: คู่มือการใช้งาน</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarHorizontal">:: ปฏิทินนัดหมาย</a>
<ul>
<li><a href="appcioselect.php">:: นัดหมายระดับผู้บริหาร</a></li>
<li><a href="reportcalendardep.php">:: นัดหมายระดับกอง</a></li>
<li><a href="appperselect.php">:: นัดหมายส่วนตัว</a></li>
</ul>
</li>
<li><a class="MenuBarHorizontal" href="#">:: จองห้องประชุม</a>
<ul>
<li><a href="roomselect.php">:: รายการห้องประชุม (SuperUser)</a></li>
<li><a href="reservselect.php">:: จองห้องประชุม (User)</a></li>
<li><a href="reservselectmanage.php">:: จัดสรรห้องประชุม (SuperUser)</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">:: รายงาน</a>
<ul>
<li><a href="reportcalendarcio.php">:: รายงานนัดหมายระดับผู้บริหาร</a></li>
<li><a href="reportcalendardep.php">:: รายงานนัดหมายระดับกอง</a></li>
<li><a href="#">:: รายงานนัดหมายส่วนตัว</a></li>
<li><a href="reportreserving.php">:: รายงานจองห้องประชุม</a></li>
<li><a href="reportlog.php">:: รายงานล็อกผู้ใช้งาน</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarHorizontal">:: การกำหนดค่า</a>
<ul>
<li><a href="depselect.php">:: กำหนดหน่วยงาน (Admin)</a></li>
<li><a href="roleselect.php">:: กำหนดกลุ่มผู้ใช้งาน (Admin)</a></li>
<li><a href="userselect.php">:: กำหนดผู้ใช้งาน (Admin)</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarHorizontal">:: เมนูเข้าสู่ระบบ</a>
<ul>
<li><a href="login.php">:: ล็อกอิน</a></li>
<li><a href="logout.php">:: ล็อกเอาต์</a></li>
<li><a href="loginreset.php">:: เปลี่ยนรหัสผ่าน</a></li>
<li><a href="contactus.php">:: ติดต่อเรา</a></li>
</ul>
</li>
</ul></td>
</tr>
<tr>
<td height="100">
<form name="roomsearch" method="post" action="roomselect.php" enctype="multipart/form-data">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Normal">
<tr></tr>
<tr>
<td colspan="6" bgcolor="#FFFFCC">ค้นหา</td>
</tr>
<tr>
<td width="8%" bgcolor="#FFFFCC"> </td>
<td width="9%" align="right" bgcolor="#FFFFCC">ชื่อห้อง : </td>
<td width="28%" bgcolor="#FFFFCC"> 
<label>
<input type="text" name="RoomSearch" id="RoomSearch" value="<? echo "$RoomSearch" ; ?>">
</label></td>
<td width="5%" align="right" bgcolor="#FFFFCC">สถานะ : </td>
<td width="19%" bgcolor="#FFFFCC"> 
<label><span>
<select name="RoomStatusSearch" >
<?php
$q_status=mysql_query("Select * From tblstatus Order By Statusid DESC");
while($arr_status=mysql_fetch_array($q_status)){
$RoomStatusId_db=$arr_status[StatusId];
$RoomStatusName_db=$arr_status[StatusName];
?>
<option value="<?php echo $RoomStatusId_db ;?>" <?php if(($RoomStatusId_db==$RoomStatus) or ($RoomStatusId_db==$RoomStatusSearch)){ echo "selected";} ?>> <?php echo "$RoomStatusName_db" ;?></option>
<?php
}
?>
</select>
</span></label></td>
<td width="31%" bgcolor="#FFFFCC"><label>
<input type="submit" name="submit" id="submit" value="ค้นหา">
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC"> </td>
</tr>
</table>
</form>
<form name="roomselect" method="post" action="">
<table width="100%" border="0" class="Normal">
<tr>
<td><table width="100%" border="0" class="Normal">
<tr>
<td width="5%" align="center" bgcolor="#99CCFF"><a href="roominput.php" class="Normal"><img src="Button/badd.jpeg" width="40" height="40" alt="เพิ่มรายการใหม่" ></a></td>
<td width="75%" align="center" bgcolor="#99CCFF"><span class="body">
<?php

$page= "Select * From tblroom Where
( (tblroom.RoomName like '%$RoomSearch%') and (tblroom.RoomStatus like '%$RoomStatusSearch%') and (tblroom.DepId = '$DepIdss') )
Order By tblroom.RoomId ASC " ;

$q_page=mysql_query($page)or die("Not Execute Pages Numrows") ;
$numrows_page=mysql_numrows($q_page);

$pagesize=20;
$pageid = $_REQUEST['pageid'];
if(empty($pageid)){$pageid=1;}
$totalpage=ceil($numrows_page/$pagesize);
$pagestart = ($pageid-1)*$pagesize;

$sql= "Select * From tblroom Where
( (tblroom.RoomName like '%$RoomSearch%') and (tblroom.RoomStatus like '%$RoomStatusSearch%') and (tblroom.DepId = '$DepIdss') )
Order By tblroom.RoomId ASC LIMIT $pagestart, $pagesize " ;

$q_sql=mysql_query($sql)or die("Not Execute Pages Limited") ;

?>
มีจำนวน <?php echo $numrows_page ;?> รายการ จำนวน <?php echo $totalpage ;?> หน้า</span></td>
<td width="20%" align="right" bgcolor="#99CCFF"><span class="body">
<input name="RoomSearch" type="hidden" value="<?php echo $RoomSearch ; ?>">
<input name="RoomStatusSearch" type="hidden" value="<?php echo $RoomStatusSearch ; ?>">
<input name="pagestart" type="hidden" value="<?php echo $pagestart ; ?>">
</span>หน้าที่
<select name="pageid" onChange="split_page(roomselect.pageid.value, roomselect.RoomSearch.value, roomselect.RoomStatusSearch.value)">
<?php
For ($i=1; $i<=$totalpage; $i++){
?>
<option value="<?php echo $i ;?>" size= "50" <?php if($i==$pageid){ echo "selected" ;}?>><?php echo "<font size =2>$i </font> ";?></option>
<?php
}
?>
</select>
</td>
</tr>
</table>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="Normal">
<tr>
<td width="4%" height="22" align="center" bgcolor="#FFCC66">ลำดับ</td>
<td width="9%" align="center" bgcolor="#FFCC66">รูปห้อง</td>
<td width="27%" align="center" bgcolor="#FFCC66">ชื่อห้อง</td>
<td width="8%" align="center" bgcolor="#FFCC66">จำนวนที่</td>
<td width="9%" align="center" bgcolor="#FFCC66">รูปแบบห้อง</td>
<td width="8%" align="center" bgcolor="#FFCC66">เลขที่ตึก</td>
<td width="8%" align="center" bgcolor="#FFCC66">เลขที่ชั้น</td>
<td width="10%" align="center" bgcolor="#FFCC66">หมายเลขห้อง</td>
<td width="6%" align="center" bgcolor="#FFCC66">สถานะ</td>
<td width="6%" align="center" bgcolor="#FFCC66">แก้ไข</td>
<td width="5%" align="center" bgcolor="#FFCC66">ลบ</td>
</tr>
<?php
$color = 0 ;
while($resu=mysql_fetch_array($q_sql)) {
$color ++ ;
$RoomId=$resu[RoomId];
$RoomName=$resu[RoomName];
$SeatCount=$resu[SeatCount];
$RoomForm=$resu[RoomForm];
$RoomDetail=$resu[RoomDetail];
$Build=$resu[Build];
$Floor=$resu[Floor];
$RoomNum=$resu[RoomNum];
$RoomPic=$resu[RoomPic];
$RoomStatus=$resu[RoomStatus];
$UserId=$resu[UserId];
$DepId=$resu[DepId];
$RoomEdit="<a href=\"RoomEdit.php?RoomId=$RoomId&RoomSearch=$RoomSearch&RoomStatusSearch=$RoomStatusSearch&pageid=$pageid\" >"."<img src=\"./Button/b_edit.png\" width=\"22\" height=\"22\" alt=\"แก้ไขข้อมูล\" />"."</A>";
$DepDelete="<a href=\"RoomDelete.php?RoomId=$RoomId&RoomSearch=$RoomSearch&RoomStatusSearch=$RoomStatusSearch&pageid=$pageid\" onClick=\"return Conf(this)\">"."<img src=\"./Button/b_delete.png\" width=\"22\" height=\"22\" alt=\"ลบข้อมูล\" />"."</A>";

if($RoomStatus==1){
$RoomStatus="เปิด" ;
}elseif($RoomStatus==0){
$RoomStatus="ปิด" ;
}else{}

if (($color % 2) ==0){
$bg = "#99CCFF" ;
}else{
$bg = "white" ;
} # end if for color

//echo "<span class='iTooltip' id='infoshow'><img src='FileUpRoom/$RoomPic' width='200' height='200'></span>" ;

//echo "<tr bgcolor=\"$bg\" >";
echo "<tr bgcolor=\"$bg\" onMouseOver=\"className="Over"\" onMouseOut=\"className=""\">";
echo "<td align=center >"."  $RoomId"."</td>";
echo "<td align=center >"."<span ><img src='FileUpRoom/$RoomPic' width='200' height='200' class='iTooltip' id='RoomId'><a href ='#' ><img src='FileUpRoom/$RoomPic' id='RoomPic' width='100' height='100' alt='จำนวนที่นั่ง : $SeatCount \nรูปแบบห้องประชุม : $RoomForm \nรายละเอียดเพิ่ม : $RoomDetail \nเลขที่ตึก : $Build \nเลขที่ชั้นของตึก : $Floor \nหมายเลขห้อง : $RoomNum \nสถานะห้อง : $RoomStatus \nรหัสผู้ใช้งาน : $UserId \nรหัสหน่วยงาน : $DepId '></a></span>"."</td>";
//echo "<td align=left >"."  $RoomName"."</td>";
//echo "<td align=left >"."<a href=\"#\" ONMOUSEOVER=\"change_main1('<img src='FileUpRoom/$RoomPic' width='100' height='100'>','lightgreen')\"; ONMOUSEOUT=\"change_main1()\">  $RoomName</a>"."</td>";
echo "<td align=left >"."  $RoomName"."</td>";
echo "<td align=left >"."  $SeatCount"."</td>";
echo "<td align=left >"."  $RoomForm"."</td>";
echo "<td align=left >"."  $Build"."</td>";
echo "<td align=left >"."  $Floor"."</td>";
echo "<td align=left >"."  $RoomNum"."</td>";
echo "<td align=left >"."  $RoomStatus"."</td>";
echo "<td align=center>"."$RoomEdit"."</td>";
echo "<td align=center>"."$DepDelete"."</td>";
echo "</tr>";

} # end while

echo mysql_error();
mysql_close($conn);
?>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td height="30"><img src="images/CalenAndServ_44.gif" width="1024" height="31"></td>
</tr>
<tr> </tr>
</table></td>
</tr>
</table>



<script type="text/javascript">

</script>
</body>
</html>

Date : 2011-02-12 14:38:49

By : neekung

No. 6

เอี่ยว

โพสกระทู้ ( 3,468 )
บทความ ( 0 )

id ไม่ควรซ้ำกันนะครับ จริงๆ แต่ละ id บนเพจ ไม่ควรซ้ำกัน

แนะนำให้ใช้ ตลาสแทนครับ

Date : 2011-02-12 16:21:25

By : pjgunner.com

No. 7

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

แก้ยังไงดีครับ เขียน class ไม่เป็น

Date : 2011-02-12 16:58:01

By : neekung

No. 8

Guest

id="test" ลบทิ้งเปลี่ยนเป็น
class="test"

.....

$('#test') เปลี่ยนเป็ฯ
$('.test')

เปลี่ยนแบบนี้

Date : 2011-02-12 21:49:57

By : ..

No. 9

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

สอบถามท่านผู้รู้อีกนิดครับ ตอนนี้โชว์รูปภาพที่เป็น tooltip ทั้ง ๒ ภาพแล้วครับ
แต่แสดงเป็นรูปเดียวกัน ช่วยปรับโค้ดให้หน่อยครับ
ลองหลายอย่างแล้วไม่รู้จะปรับตรงไหนครับ ช่วยทีครับ

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('img.ShowPic') .hover (function(event) {
callTooltip ('#RoomPic', event);
}, function(){
$('#RoomPic') .hide() ;
}) ;
});

function callTooltip(obj, event) {
var locateX=event.pageX;
var locateY=event.pageY;
locateX+=10;
locateY+=10;
$ (obj) .show() .css({
left:locateX,
top:locateY
});
}
</script>

---------------------------------------------------------------------------------------------------------
echo "<td align=center >"."<span ><img src='FileUpRoom/$RoomPic' width='200' height='200' class='iTooltip' id='RoomPic'><a href ='#' ><img src='FileUpRoom/$RoomPic' class='ShowPic' width='100' height='100' </a></span>"."</td>";

Date : 2011-02-12 22:59:38

By : neekung

No. 10

Num

โพสกระทู้ ( 10 )
บทความ ( 0 )

มีใครช่วยแก้ไขโค้ดได้ไหมครับ

Date : 2011-02-15 14:20:16

By : neekung

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยดูโด้ด วนลูปข้อมูล เพื่อแสดงภาพ ใน tooltip ให้ด้วยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก