图片滑过触发的问题

phpeye 2006-12-27 11:29:41

在一个table中有六张图片，三张小的，三张大的，
如何做到鼠标滑过一张小的，触发一张大的图片？

谢谢

...全文

188 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

phpeye 2006-12-27

打赏
举报

回复

<script language="javascriptscript">
function changeIt(src)
{
var node = document.getElementById("image");
var src = node.getAttribute("src");
//var pos = src.lastIndexOf('/');//取图片名较JS多了一步
//var imageName = src.substr(pos+1, src.length-pos);//取图片名较JS多了一步
var imageName = src;
if (imageName == "image1.gif")
{
node.setAttribute("src","t1_1.gif");
}
else if (imageName == "image2.gif")
{
node.setAttribute("src","t2_1.gif");
}
else if (imageName == "image3.gif")
{
node.setAttribute("src","t3_1.gif");
}
}
</script>
</HEAD>
<BODY>
<a href="#"><img src="image1.gif" onmouseover="changeIt(this.src);return true;"></a>
<a href="#"><img src="image1.gif" onmouseover="changeIt(this.src);return true;"></a>
<a href="#"><img src="image1.gif" onmouseover="changeIt(this.src);return true;"></a>
<img id="image" src="t1_1.gif">
</BODY>
</HTML>

这个有错误，

chaonan 2006-12-27

打赏
举报

回复

你又没给出具体代码
给你点提示。。。
你可以在小图片的<img>标签里附加一个属性到大图片的 id的引用最好用
javascript dom编程
比如说 <img alt="小图片" src="" to="大图片id" onmouseover="toBig(this)">
javascript:如下
function toBig(e)
{
var big_img = document.getElementById(e.to)
//big_img 就是大图片的引用了
}

danis_cn 2006-12-27

打赏
举报

回复

你这里面的问题太多了，参考如下：

<script >
function changeIt(src)
{
//var node = document.getElementById("image");
//var src = node.getAttribute("src");
//var pos = src.lastIndexOf('/');//取图片名较JS多了一步
//var imageName = src.substr(pos+1, src.length-pos);//取图片名较JS多了一步
var imageName = src;
if (imageName == "image1.gif")
{
this.image.src="t2_3.gif";
}
else if (imageName == "image2.gif")
{
this.image.src="t2_3.gif";
}
else if (imageName == "image3.gif")
{

this.image.src="t2_3.gif";
}
}
</script>
</HEAD>
<BODY>
<a href="#"><img src="image1.gif" onmouseover="changeIt('image1.gif');return true;"></a>
<a href="#"><img src="image1.gif" onmouseover="changeIt('image2.gif');return true;"></a>
<a href="#"><img src="image1.gif" onmouseover="changeIt('image3.gif');return true;"></a>
<img id="image" src="t1_1.gif">
</BODY>
</HTML>

CaptionHover.css是一组超酷CSS3鼠标滑过图片过渡动画特效。该特效中共有4种效果，分别是在鼠标滑过图片时图片产生过渡动画，展现图片标题的特效。使用方法在页面中引入CaptionHover.css文件。HTML结构使用一个作为容器，4种效果对应的class类分别为：ef1-ef4。里面放置图片和一个子元素。子元素用于制作图片标题层，需要添加contentPart class类。 T...

问题描述：请仔细看gif图刚开始的地方是Banner自动向上滚动到的位置是一个ViewPager 前言这种问题用图片真的不好描述，如果有同样的问题请仔细看gif图说明！仔细看当我滑动到每日精选的上面一点点时候这时recyclerview会触发自动向上滚动。如果没看清楚请仔细再看一次。因为不影响任何功能这个算是小问题之前项目上线我也没太在意，但是后来经过客户反应...

这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。安装可以通过NPM或Bower来安装Drift插件。npm install drift-zoombower install drift使用方法Luminous鼠标点击放大镜效果下载压缩包，在页面中引入Lumin...

需要解决的问题：鼠标停在图片上面的时候的现在这个张图片的相关信息，我的第一个感觉是使用鼠标事件：mousemove 当他/她停留在图片上面都时候就可以触发相应显示的事件， mouseout离开的时候触发隐藏事件但是在实际的完成中发现：鼠标停留在图片上信息会

近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。一、首先，我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来（长页风格）。 2.另外，这一效果的实现主要是结合css3的自定义动画（animation）来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。

87,902

社区成员

224,615

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章