-4

我想在本地主机中动态显示图像及其描述（悬停时）

$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

4

2 回答 2

0

你在它旁边有图像和描述吗？

如评论中所述，您得到的输出根据代码是正确的

所以你需要改变你的代码

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 的工具提示来显示描述，这是一种可控的方式

于 2013-06-30T09:44:35.477 回答
0

将描述包装在一个 div 类中/我会使用 jQuery 隐藏文本（或者 CSS 会更好），只是 jQuery 悬停效果来显示带有相应图像的文本等

于 2013-06-30T10:03:37.267 回答