转载：http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html

当我们在写一个网页程序的时候，很多方法可以提供页面的动态显示，从而提高页面的视觉效果。 本例就是通过一个简单的Javascript代码动态显示图片的信息的，其实这样的例子很多，所以这里只做简单的说明了。

现在就创建一个页面，代码如下所示：

 <html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>JS函数实现鼠标指向后带图片的提示效果</title>

 <script language="javascript">

 function showPic(sUrl){

  var x,y;

  x = event.clientX;

 y = event.clientY;

 document.getElementById("Layer1").style.left = x;

 document.getElementById("Layer1").style.top = y;

 document.getElementById("Layer1").innerHTML = "<img width=200 height=200 src=\""

 + sUrl + "\">";

 document.getElementById("Layer1").style.display = "block";

 }

 function hiddenPic(){

 document.getElementById("Layer1").innerHTML = "";

 document.getElementById("Layer1").style.display = "none";

 }

 </script>

 </head>

 <body>

 <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>

 <img src="100_0899.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 <p></p>

 <img src="100_0909.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 </body>

</html>

JavaScript函数实现鼠标指向后带图片的提示效果的更多相关文章

  1. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 关于原生js中ie的attacheEvent事件用匿名函数改变this指向后,不能用detachEvent删除绑定事件的解决办法？

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/28/%e5%85%b3%e4%ba%8e%e5%8e%9f%e7%94%9fjs%e ...

  3. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

  4. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  5. 【Android代码片段之六】Toast工具类（实现带图片的Toast消息提示）

    转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266  作者:张燕广 实现的Toast工具类ToastUtil封装 ...

  6. Android开发系列（二十三）：实现带图片提示的Toast提示信息框

    Android中的Toast是非经常见的一个消息提示框.可是默认的消息提示框就是一行纯文本.所以我们能够为它设置一些其它的诸如是带上图片的消息提示. 实现这个非常easy: 就是定义一个Layout视 ...

  7. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  8. js中new函数后带括号和不带括号的区别

    用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent()). 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如: function Pare ...

  9. JavaScript中函数的this指向!

    JavaScript的this的指向问题! 这是我自己敲的, 报错! <button>点击查看绑定事件的this指向!</button> <script> // 函 ...

随机推荐

  1. LeetCode Algorithm 07_Reverse Integer

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 click to ...

  2. python3怎样画二维点图

    引用自:http://www.cnblogs.com/super-zhang-828/p/4792206.html import matplotlib.pyplot as pltplt.plot([1 ...

  3. μC/OS中的任务就绪表

    为了便于对就绪表的查找,μC/OSII又定义了一个数据类型为INT8U的变量OSRdyGrp, 并使该变量的每一位都对应OSRdyTbl[ ]的一个任务组(即数组的一个元素),如果某任务组中 有任务就 ...

  4. centos7 分区满了，分析哪个目录或文件占用空间-小叶-51CTO博客

    原文:centos7 分区满了,分析哪个目录或文件占用空间-小叶-51CTO博客 du -sh 例如: [root@zabbix ~]# du -sh /var/* 0 /var/adm 132M / ...

  5. swift学习第十一天：类的定义

    一: 主要内容 类的介绍和定义 类的属性 类的构造函数 一. 类的介绍和定义 Swift也是一门面向对象开发的语言 面向对象的基础是类,类产生了对象 在Swift中如何定义类呢? class是Swif ...

  6. <h2>1. mongodb介绍</h2>

    1. mongodb介绍 2. ppt下载地址 http://download.csdn.net/detail/u014285882/7807105 阅读全文 本文已收录于下面专栏: mongodb使 ...

  7. php实现从尾到头打印列表

    php实现从尾到头打印列表 一.总结 4.数组倒序:array_reverse() 5.函数肯定要return,而不是echo 二.php实现从尾到头打印列表 输入一个链表,从尾到头打印链表每个节点的 ...

  8. iOS 【UIKit-UIPageControl利用delegate定位圆点位置 之 四舍五入小技巧】

    在UIScrollView中会加入UIPageControl作为页码标识,能够让用户清楚的知道当前的页数.我们须要优化的一点是让pageControl的小圆点精确的跟着scrollView而定位.我们 ...

  9. 转载：使用bat命令来快速安装和卸载Service服务

    一般我们在编写完Service服务程序后,都是通过cmd命令提示窗口来安装或卸载服务,但频繁的在cmd窗口中去“拼”文件的路径着实让人“不能忍”.所以,我们需要一钟“更快捷”的方式来进行安装或者卸载操 ...

  10. Oracle列加密

    加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...