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

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2015-12-29
鼠标移动到名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>


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • php随机显示图片的简单示例
    本文分享一个php实现的随机显示图片的函数,可以将指定文件夹中存放的图片随机地显示出来本节主要内容:介绍一个随机显示图片的php函数,多用于博客的展示窗.照片的随机展示等. 例子: 代码如下:<?php/*** 功能:随机显示图片* Filename  : img.php* Usage:*             <img src=img.php ...
  • js鼠标移动在title中显示图片的效果代码
    当鼠标移动时,在title提示框中,显示出设定的图片.1.js代码 ">大 ">小 如需引入外部Js需刷新才能执行]
  • jQuery实现的鼠标滑过弹出放大图片特效
    jQuery实现的鼠标滑过弹出放大图片特效
    最近项目遇到个需求,需要的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动:或是移动到提示文字上,也可以显示图片.经过一番思索,用下面的方法实现了本效果,这里分享给大家.本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面 ...
  • jquery实现鼠标滑过小图时显示大图的方法
    这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 代码如下:<html><head><meta http-equiv="content- ...
  • jQuery当鼠标悬停时放大图片的效果实例
    jQuery当鼠标悬停时放大图片的效果实例
    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签 ...
猜你喜欢