Question

我想在localhost

中动态显示图像及其描述（在悬停时）

$c=mysql_connect("localhost","abc","xyz");
mysql_select_db("root");
q="select * from product";
$qc=mysql_query($q); 
while($ans=mysql_fetch_array($qc))
{
    print "<img id='display_img' src='products/$ans[8]'width=300 height=200>";
    print $ans[9] ;
}

但这会破坏每一个想法。我想在图像上显示图像描述。

我试过这个

  <?php
                $c=mysql_connect("localhost","abc","xyz");
                mysql_select_db("root");
                $q="select * from product";
                $qc=mysql_query($q);
                $count=0;
                while($ans=mysql_fetch_array($qc))
                    {
                        if($count==0||$count==1||$count==2)
                        {

                            $title=$ans[1]." ".$ans[2];
                            print '<div class="img-wrap">';
                            print "<img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'>";
                            print '<div class="img-overlay">';
                            print '<h4>'.$title.'</h4>';
                            print '<p>'.$ans[9].'</p>';
                            print '</div>';
                            print '</div>';
                        }
                        $count++;
                        if($count==3)
                        {
                            print "<br />";
                            $count=0;
                        }
                    }   
        ?>

css code

.img-wrap
{
height:200px;
position:relative;
width:300px;
margin:10px;
}
.img-overlay
{
background-color:#000;
bottom:0;
color:#fff;
height:200px;
width:300px;
opacity:0;
position:absolute;
z-index:1000;
transition-duration:0.5s;
cursor:pointer;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
transition:opacity 0.5s;
}
b
{
    background-color:#aa490e;
    color:#fff;
    font-size:36px;
    padding: 0 15px;
    padding-left:65px;
    padding-bottom:25px;
    font-family:"Courier New", Courier, monospace;
}

它给我垂直输出：

http://img707.imageshack.us/img707/4149/kn0b.png

但我希望输出如下：

http://img441.imageshack.us/img441/8114/it5a.png

Answer 1

您是否正在获取图像和描述？

正如评论中所提到的，根据代码

，您获得的输出是正确的

因此您需要从

更改代码

while($ans=mysql_fetch_array($qc)){
   print "<img id='display_img' src='products/$ans[8]'width=300 height=200>";
   print $ans[9] ;
}

到

while($ans=mysql_fetch_array($qc)){
{
    print "<img id='img_$ans[8]' src='products/$ans[8]' width=300 height=200 title='$ans[9]' >";
}

如果需要你可以使用jquery ui的工具提示来显示描述是非常可控的方式

Answer 2

将描述包含在div类/ I中并使用jQuery隐藏文本（或CSS会更好）只是jQuery悬停效果以显示带有相应图像的文本等

动态获取图像和描述php

2 个答案: