鼠标放在一个连接上，会显示图片(类似tooltip)

最新推荐文章于 2024-07-23 22:09:35 发布

转载最新推荐文章于 2024-07-23 22:09:35 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/asia/archive/2009/05/04/1448649.html

本文通过HTML和JavaScript实现了一个简单的鼠标悬停效果，当鼠标移到链接上时会显示一张图片。此示例利用了HTML的a标签和div标签，并通过JavaScript控制图片的显示与隐藏。

<body>
<a href="www.sina.com" id="i" onmouseover="show(this)" onmouseout="hide()">免费电影</a>
<div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
onmouseover="show(i)" onmouseout="hide()">
<img src="meng.jpg"></img>
</div>
<script>
function show(o){
var m=document.getElementById("m")
m.style.pixelLeft=getL(o)
m.style.pixelTop=getT(o)+o.offsetHeight
m.style.visibility=''
}

function hide(){
document.getElementById("m").style.visibility='hidden'
}

function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l
}

function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t
}
</script>
</body>

转载于:https://www.cnblogs.com/asia/archive/2009/05/04/1448649.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30590285

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读

孙叫兽的博客

07-14

3万+

目录第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...

零基础小白学Node-RED（07）：综合案例分析

知无涯

10-25

4831

讲解Node-RED的综合示例

参与评论您还未登录，请先登录后发表或查看评论

带有图像的ToolTip显示功能

07-31

带有图像的ToolTip显示功能,可以显示提示信息的时候显示图像。

ToolTip（Qt实现鼠标停留在QQ头像上显示更多资料的ToolTip功能）.zip

06-17

Qt5+VS2015环境下，模拟Qt的ToolTip功能，实现更加完整的tip显示效果，如同QQ上，鼠标停留在好友QQ头像出现浮窗显示好友更多资料

设计一个窗体，该窗体显示一副图片，并使用ToolTip显示提示

sunlevana的专栏

11-25

2770

设计一个如下图所示窗体：该窗体中有一个图片框，显示一副图片。要求： 1）在窗体打开时，动态加载图片； 2）设置图片显示模式为根据图片框大小缩放图片； 3）图片自己找； 4）当鼠标停留在图片框时，显示“**风光”提示提示：1)找到一副图片，选中，复制，在项目名称上单击右键，粘贴，选择粘贴过来的图片文件，右击出现菜单，选择属性，修改“复制到输出目录”属性的值为“如果较新则复制”。关键代

C#带图片的ToolTip控件

weixin_30257433的博客

04-07

921

在C#中要显示提示框可以使用Tooltip控件，这个提示框只包含文字，如果设置了ToolTipIcon也只是多一个图标。如果要显示更好看的提示框，就只能做个自定义的Tooltip控件了。最近刚好用到这个，在网上找到一个能显示图片的自定义Tooltip，那就直接拿来用吧~~~~使用方法如下CustomizedToolTip myTool...

C#在图片框中显示一幅图片及其信息

YL的专栏

11-10

8320

Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog)

Luzhuo 的博客

02-24

9080

Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog) 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.youkuaiyun.com/rozol/article/details/68938984 PyQt5基本介绍见: PyQt5 Qt Designer (Qt设计师) 简介窗口主要分为: QMainWindow(主窗口) ...

用flask+echarts打造一个数据可视化大屏幕

热门推荐

凯哥大数据——刘凯的博客

10-14

2万+

文章目录1. big_screen项目说明2. big_screen项目文件布局3. 四大模块核心代码分析3.1 数据准备模块3.2 flask网页服务模块3.3 网页视图模块a. 网页大标题b. 左右两栏的图表c. 中间一栏的图表d. 图表echarts属性设置3.4 static静态元素分析a. 显示时间的函数b. 页面淡入和视图自适应的函数4. 总结 1. big_screen项目说明源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入

from PyQt6.QtCharts import QChartView, QBarSet, QBarSeries, QChart, QBarCategoryAxis, QValueAxis from PyQt6.QtCore import QPoint, Qt from PyQt6.QtGui import QColor, QCursor, QFont from PyQt6.QtWidgets import QWidget, QHBoxLayout, QToolTip class BarChartWidget(QWidget): """封装柱状图组件""" def __init__(self, parent=None): super().__init__(parent) self.mentors = ["导师A", "导师B", "导师C", "导师D", "导师E"] self.completed_data = [6, 4, 8, 4, 5] # 已完成数据 self.pending_data = [2, 3, 1, 5, 3] # 未完成数据 self.initUI() self.initConnections() def initUI(self): """初始化图表界面""" layout = QHBoxLayout(self) layout.setContentsMargins(0, 0, 0, 0) self.setLayout(layout) # 创建图表组件 self.chart = self._create_chart() self.chart_view = QChartView(self.chart) self.chart_view.setMouseTracking(True) layout.addWidget(self.chart_view) def initConnections(self): """初始化信号连接""" # 连接悬停事件（绑定双数据集） self.bar_series.hovered.connect(lambda state, index, barset: self.show_tooltip(state, index, barset) ) def _create_chart(self): """创建并配置图表""" # 创建双数据集 self.completed_set = QBarSet("已完成") self.completed_set.append(self.completed_data) self.completed_set.setColor(QColor("#4285F4")) self.pending_set = QBarSet("未完成") self.pending_set.append(self.pending_data) self.pending_set.setColor(QColor("#FBBC05")) # 创建柱状图系列 self.bar_series = QBarSeries() self.bar_series.append(self.completed_set) self.bar_series.append(self.pending_set) self.bar_series.setBarWidth(0.4) self.bar_series.setLabelsVisible(True) self.bar_series.setLabelsFormat("@value") self.bar_series.setLabelsPosition(QBarSeries.LabelsPosition.LabelsCenter) # 创建图表 chart = QChart() chart.addSeries(self.bar_series) # 配置X轴 self.axis_x = QBarCategoryAxis() self.axis_x.append(self.mentors) chart.addAxis(self.axis_x, Qt.AlignmentFlag.AlignBottom) self.bar_series.attachAxis(self.axis_x) # 配置Y轴 max_value = max(max(self.completed_data), max(self.pending_data)) * 1.2 self.axis_y = QValueAxis() self.axis_y.setRange(0, max_value) self.axis_y.setLabelFormat("%.0f") chart.addAxis(self.axis_y, Qt.AlignmentFlag.AlignLeft) self.bar_series.attachAxis(self.axis_y) return chart def show_tooltip(self, state, index, barset): """显示/隐藏提示框""" if state: # 获取当前柱形所属的数据集 if barset == self.completed_set: completed = self.completed_set.at(index) pending = self.pending_set.at(index) else: completed = self.completed_set.at(index) pending = self.pending_set.at(index) tooltip_text = f"导师: {self.mentors[index]}\n已完成: {completed}\n未完成: {pending}" # 定位到鼠标正下方 tooltip_pos = QCursor.pos() + QPoint(0, 15) QToolTip.setFont(QFont("Arial", 10)) QToolTip.showText(tooltip_pos, tooltip_text) else: QToolTip.hideText() 设置 BarChartWidget的高度

最新发布

08-19

用户可能的场景是，这个柱状图被嵌入到一个布局中，比如垂直布局或水平布局中，如果不设置高度，可能会导致图表显示不正常，或者无法与其他组件协调显示。因此，用户需要控制这个BarChartWidget的高度。接下来，我...

c# ToolTip 几十种效果集合了各种ToolTip 效果很难得哦源码

02-18

c# ToolTip 几十种效果集合了各种ToolTip 效果很难的哦源码

C# 使用GDI+绘制漂亮的ToolTip控件

04-15

介绍C#使用GDI+重绘工具提示控件ToolTip，实现ToolTip自定义图标、大图标、小图标和透明显示，并可以轻松的更换ToolTip背景和边框颜色

日常开发记录分享——C#控件ToolTip实现分栏显示内容

鹏鹏2077

07-23

1463

下面是使用的方式，先在我们窗体中创建一个自定义的Tooltip对象，具体使用就是先设置SetContent方法将要显示的内容传递进去。需要在鼠标浮动到指定位置后提示出详细的信息，一开始使用的tooltip实现，但是里面的内容效果并不理想，需要有条理性，于是就想到能不能将展示的东西分列。使用两个字符串数据接收通过字符串切割后的内容，然后通过在tooltip的draw事件绘制时将内容分为两次绘制。通过处理这个事件，可以自定义工具提示的外观和内容。类中扮演着重要的角色，用于自定义工具提示的显示和绘制。

C# 使用ToolTip控件实现气泡消息提示

qq_46104786的博客

11-20

6335

C# 使用ToolTip控件实现气泡提示前言：今天我们学习一个新的控件ToolTip控件，这个控件使用频率特别高，博主就想着写一篇文章来教大家一起用这个控件，这个控件的效果是我们的鼠标停留在那个位置实现提示操作，比如我们在做登录操作密码方面或者账号方面的提示鼠标停留的提示操作，这个操作效果在我们前端网页用的特别多，只不过我们做的是窗体应用。每日一遍，欢乐一整天 1.创建窗体文件 2.设计界面把需要拖的控件从工具箱拖过来，特别是toolTip控件 3.配置toolTip控件对触发时间设置还有停

tooltip使用，可以显示图片，文字

wccczxm的专栏

02-02

2703

<?php $productName = (我爱你胜莉,呵呵—); $productName = $productName . test; $productName = htmlspecialchars($productName); //$productName = str_replace(array(/,(,),",),array(///,/(

MFC单文档应用中Tooltip显示鼠标坐标示例

当鼠标停留在目标控件上一段时间后，Tooltip会自动显示一个文本框，其中包含了该控件的说明或者任何开发者想要显示的信息。在本例中，目标信息是鼠标移动时的坐标位置。 3. 单文档界面（SDI）: 单文档界面是一种...