在悬停引导表上的弹出图像

时间:2017-04-05 09:43:47

标签: javascript php twitter-bootstrap popover onhover

我对网络技术完全陌生, 我有一个从数据库中检索数据的表,它们与bootstrap表一起显示。

Check out the interface image

我有用户名; 每个用户名都有自己的图片。 我有在线存储的每个用户名的图像。 具有以下命名:

username= 111
has an image with the name 111.jpg 
stored on localhost/images/111.jpg

我想要实现的是当我将鼠标悬停在表格中的任何用户名时,会显示其图像。

list-user.php文件

<?php 
require 'db.php';

    $sqltran = mysqli_query($con, "SELECT * FROM users ")or die(mysqli_error($con));
    $arrVal = array();

    $i=1;
    while ($rowList = mysqli_fetch_array($sqltran)) {

                    $name = array(
                            'num' => $i,
                            'user'=> $rowList['username'],                  
                        );      

                        array_push($arrVal, $name); 
        $i++;           
    }
         echo  json_encode($arrVal);        


    mysqli_close($con);
?>

`

index.php文件中的重要内容

<script type="text/javascript">

 var $table = $('#table');
         $table.bootstrapTable({
              url: 'list-user.php',
              search: true,
              pagination: true,
              buttonsClass: 'primary',
              showFooter: true,
              minimumCountColumns: 2,
              columns: [{
                  field: 'num',
                  title: '#',
                  sortable: true,
              },{
                  field: 'user',
                  title: 'Username',
                  sortable: true,
              },  ],

         });

</script>

这就是我想要完成的事情

What I want to accomplish (IMAGE )

0 个答案:

没有答案