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

鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片
 

做法:新建 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>

 

时间: 2024-08-19 22:29:23

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

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

做法:新建 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>

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

 本篇文章主要是对js鼠标移动显示图片的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.js代码    代码如下: //***********默认设置定义.*********************    tPopWait=50;//停留tWait豪秒后显示提示.    tPopShow=5000;//显示tShow豪秒后关闭提示    showPopStep=20;   popOpacity=99;     //***************内部变量定义*********

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

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

javascript-html视频播放进度条上如何加入点号,并且鼠标移动到点号上显示关键帧图片

问题描述 html视频播放进度条上如何加入点号,并且鼠标移动到点号上显示关键帧图片 问题是这样的:最近正在做html进行视频处理,想在html视频播放进度条上加入点号,并且鼠标移动到点号上显示关键帧图片. 就像爱奇艺视频播放的下面的效果: 有哪位朋友知道该如何做出点号吗?难道是用若干个点的图片贴在视频进度条下方?我用的是html5中, <video src="0.mp4" controls="controls" style="width:450px;

treeview-怎么在TreeView的节点上显示图片?

问题描述 怎么在TreeView的节点上显示图片? 项目中要求TreeView的节点名称旁边带有图片,怎么实现?有Load属性,可是Load图片的话直接改变了节点标题,而且之前设置的子节点也没了.运行之后也没有显示出对应的图片.

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

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

Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例_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=

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

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

不知道是否可以实现在jsp页面上显示图片啊

问题描述 我从db里读取了10个图片,图片是blob方式存储的啊(由于特殊原因只能存储成blob方式不能放路径啊),需要在jsp页面上显示10张图片以及一些文本啊,输入框啊,一类的东西.但是我发现,好像页面只能,contentType="image/jpeg;才可以显示二进制的图片.只能用ifream.其他的是不是就没有办法了.?有没有办法直接显示呢?我一下拿出10个图片对象,然后放在.jsp页面中,这个.jsp页面上面我还可以放很多我想的文本框,一类的元素呢?<%@pagelanguag