私の知識レベル: 2 日前に Dreamweaver を使用してデータ駆動型の Web サイトを構築する方法に関するビデオ チュートリアルを見て、PHP と Dreamweaver を独学で学び始めたところです。
私の目的：基本的に6列20行の動的テーブルであるページを作成する
column1 | column2 | column3 | column4 | column5 | column 6
50px thumbnail | ad post subject | gender | location | age | date of post
" " " " " "
" " " " " "
" " " " " "
" " " " " "
私の問題: これまでのところ、mysql db から行をプルしてテーブルにデータを入力することに成功しており、column1 のサムネイルも動的にロードされています。問題は、50pxby50px のサムネイル (実際には /images フォルダー内のはるかに大きな jpg ですが、CSS または HTML によってサイズ変更されていると思います) が非常に小さいため、ユーザーがホバーしたときに画像を拡大することにしました。その上にカーソルを置きます。ここでこれを非常にうまく実現するjavascriptスクリプトを見つけました- http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm指示に従ってすべてを正しく構成することができました。しかし、与えられた例は動的画像には当てはまらないため、少し実験する必要がありました（例はtooltips[0]=["images/examplepic.jpg"]私の場合はこのようなものです
tooltips[0]=["images/<?php echo $row_qDisplayAds['image1']; ?>"]
正しいパスとエコー構文がどうあるべきかをなんとか把握した後、ブラウザーでプレビューしてみました。つまり、最初の行のサムネイルにカーソルを合わせると、行1のサムネイルのフルサイズのバージョンが表示されます。行 2 のサムネイルにカーソルを合わせると、行 1 にもサムネイルのフル サイズ バージョンが表示されます。テーブルの 20 行すべてにある他のすべてのサムネイルにカーソルを合わせると、同じフルサイズの写真が表示されることはおそらくご想像のとおりです。そのため、ホバリング時に対応するフル サイズの画像を表示する唯一のサムネイルは行 1 です。他のすべてのサムネイルは、独自のフル サイズの画像を表示せず、代わりに最初の行のサムネイルをフル サイズで表示します。
これは私の index.php ページの完全なコードです。
<?php virtual('/myfirstsite/Connections/conn_firstdynamic.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_conn_firstdynamic, $conn_firstdynamic);
$query_qDisplayAds = "SELECT category, topic, `date`, age, location, image1 FROM ads ORDER BY idno DESC";
$qDisplayAds = mysql_query($query_qDisplayAds, $conn_firstdynamic) or die(mysql_error());
$row_qDisplayAds = mysql_fetch_assoc($qDisplayAds);
$totalRows_qDisplayAds = mysql_num_rows($qDisplayAds);
?>
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
</head>
<body>
<script type="text/javascript">
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["images/<?php echo $row_qDisplayAds['image1']; ?>"]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
//***** NO NEED TO EDIT BEYOND HERE
tipprefix: 'imgtip', //tooltip ID prefixes
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")
</script>
<table id="noticeboard">
<?php do { ?>
<tr class="rowheight">
<td class="cellheight"><img src="images/<?php echo $row_qDisplayAds['image1']; ?>" alt="" rel='imgtip[0]' style='width:50px;height:50px'/></td>
<td class="cellheight"><?php echo $row_qDisplayAds['subject']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['gender']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['age']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['location']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['date']; ?></td>
</tr>
<?php } while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($qDisplayAds);
?>