0

我的知识水平：我刚刚开始自学 PHP 和 Dreamweaver，我在 2 天前观看了有关如何使用 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);
    ?>
4

1 回答 1

0

您将需要遍历数据并将图像分配给每个索引的工具提示 

tiparray:function(){
        var tooltips=[];

        <?php 
        $index = 0;
        do { 
        ?>
        tooltips[<?php echo $index++;?>]=["images/<?php echo $row_qDisplayAds['image1']; ?>"];
        <?php 
        } while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds)); 
        mysql_data_seek($qDisplayAds,0);
        ?>

        return tooltips //do not remove/change this line
    }(),

此外，您还需要重置 mysql 记录集的内部数据指针（回到第 1 行），因为您正在使用 mysql_data_seek 再次使用它。

您还需要将缩略图之间的链接应用到正确的全屏版本。做这个。

<table id="noticeboard">
  <?php 
    $index = 0;
    while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds)) { ?>
    <tr  class="rowheight">
      <td class="cellheight"><img src="images/<?php echo $row_qDisplayAds['image1']; ?>" alt="" rel='imgtip[<?php echo $index++;?>]' 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 }; ?>
</table>

javascript代码处理链接。您需要做的就是更新 rel='imgtip[0]' 以将 20 张图像从 0 计数到 19。

于 2012-08-02T17:13:06.417 回答