When we look at some of the web-side data, in order to facilitate understanding of user data calculation method, there will be some tips when the mouse pointer to the grid, the mouse away when the prompt is not displayed, and then for example, the mouse pointer page button, the hint button function, this effect can be easily implemented in dry Run, there are corresponding document describes how mouse-over message appears to do.

In addition to the above said, the kind of static information in the Run Dry statements can also be achieved mouse pointer display dynamic data corresponding to the mouse pointer display picture results can also be achieved oh!

Here the student information sheet, for example, to achieve the mouse pointer to photograph different people, you can display the corresponding big picture on the side.

Specific method

Make a student information sheet

Basic information stored in a personnel database is a record in, and our common personnel information table is a record where the data is displayed in different rows, this report is a grid-style report with respect to the more casual format, we call a free report on how to achieve free-form report can refer to the
database of images showing how the fields (field picture presentation) in the report .

Report template design as shown below

Increased image to display layers

In an additional report, the J2 ~ J6 merged cell, and the cell data type setting J2 combined content html, the cell is:

="<div id='sjbb_hover'>  <p>人员信息高清免冠证件照 </p>  <img src='http://localhost:6868/demo/reportJsp/images/"+F3+".jpg' width=150px>  </div>"

页面中增加鼠标悬停时图层的样式

在 showReport.jsp 中增加如下的样式：

<style> #sjbb_hover{ padding: 10px 10px 10px 10px; border-radius: 3px; box-shadow: 0px 0px 2px #ccc; background: #fff; color: #000; position: absolute; text-align: center; display: inline-block; left: 532px; top: 47px;} </style>

页面中增加图层的显示隐藏的 JS 方法

$("#sjbb_hover").hide();
function show()
{
   $("#sjbb_hover").show();
}
function hide()
{
    $("#sjbb_hover").hide();
}

在报表中给图片增加 html 事件

选中 H2，设置 HTML 事件为 onmouseover=‘show()’ onmouseout=‘hide()’

经过以上设置我们就完成了鼠标悬停显示图片的需求了。

浏览器中通过http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= 学生信息表.rpx 就可以看到效果了。

翻页查看另一人的信息时，鼠标指向是对应人员的照片。

通过这样的设置，我们还可以实现鼠标指向，显示个二维码，用户可以通过手机扫码二维码，在手机上查看更多需要了解的信息。

Hover show pictures