鼠标移动到图片名上,显示图片的简单实例

做法：新建 a.html 和 一个待显示图片 wait.gif  放在同一目录下，
a.html 代码如下：


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var path = './'; //图片相对路径
        function show(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (!sDiv) {
                sDiv = document.createElement("DIV");
                sDiv.id = 'img_' + name.split('.')[0];
                sDiv.style.position = 'absolute';
                sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
                sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
                sDiv.style.border = '1px red solid';
                var img = document.createElement("img");
                img.src = path + name;
                sDiv.appendChild(img);
                document.body.appendChild(sDiv);
            }
            sDiv.style.display = 'block';
        }
        function f(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (sDiv) {
                sDiv.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
    wait.gif
</div>
</body>
</html>

赞 (0)

相关推荐

  • js鼠标移动在title中显示图片的效果代码

    1.js代码 复制代码 代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa

  • js 鼠标移动显示图片的简单实例

    js 鼠标移动显示图片的简单实例

    一.js代码 复制代码 代码如下: //***********默认设置定义.*********************   tPopWait=50;//停留tWait豪秒后显示提示.   tPopShow=5000;//显示tShow豪秒后关闭提示   showPopStep=20;  popOpacity=99; //***************内部变量定义*****************   sPop=null;  curShow=null;  tFadeOut=null;  tFade

  • 鼠标移动到图片名上,显示图片的简单实例

    鼠标移动到图片名上,显示图片的简单实例

    做法:新建 a.html 和 一个待显示图片 wait.gif  放在同一目录下,a.html 代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>

  • 鼠标滑在标题上显示图片的JS代码

    复制代码 代码如下: <SCRIPT type=text/javascript src="js/jquery.tooltip.v.1.1.js"></SCRIPT>                <SCRIPT type=text/javascript src="js/jquery.tooltip.execute.js"></SCRIPT>                  机型:<a href="#n

  • vue 鼠标移入移出(hover)切换显示图片问题

    目录 鼠标移入移出(hover)切换显示图片 css实现 js实现 vue鼠标移入移出事件注意事项 发生冒泡事件 一.解决方法 二.定义 三.两对鼠标事件的区别 鼠标移入移出(hover)切换显示图片 css实现 代码: <div @click="exitConnect()" class="exit_hover">        <img class="exit1 mr10" :src="exit" styl

  • 用瀑布流的方式在网页上插入图片的简单实现方法

    当我们的网页需要插入很多图片的时候,为了美观,我们可以选择用瀑布流的方法插入图片 首先我们在body里面放入我们需要展示的图片 <div id="box"> <div class="dinwei"> <div class="pic"> <img src="image/1.jpg"> </div> </div> <div class="din

  • pyqt5 使用cv2 显示图片,摄像头的实例

    如下所示: #! /usr/bin/python3 # coding = utf-8 # from PyQt5 import QtGui,QtCore,Qt import sys from PyQt5.QtCore import Qt,pyqtSignal,QSize,QRect,QMetaObject, QCoreApplication, pyqtSlot,QPropertyAnimation,QThread from PyQt5.QtGui import QIcon, QFont, QPix

  • Android 实现圆角图片的简单实例

    Android 实现圆角图片的简单实例

    Android 实现圆角图片的简单实例 实现效果图: 本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出.于是自己自定义了个View,实现图片的圆角以及圆形效果.效果图: Android 圆角图片的实现形式,包括用第三方.也有系统的.比如makeramen:roundedimageview,系统的cardview , glide .fresco . compile 'com.android.support:appcompat-v7:24.0.0' com

  • SpringMVC上传文件的简单实例

    SpringMVC上传文件的简单实例 在使用springMVC进行系统实现时,springMVC默认的解析器里面是没有加入对文件上传的解析的,这可以方便我们实现自己的文件上传.但如果你想使用springMVC对文件上传的解析器来处理文件上传的时候就需要在spring的applicationContext里面加上springMVC提供的MultipartResolver的申明.这样之后,客户端每次进行请求的时候,springMVC都会检查request里面是否包含多媒体信息,如果包含了就会使用Mu

  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =

  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

    如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例</title>    <meta http-equiv=

随机推荐