图片滑过触发的问题

phpeye 2006-12-27 11:29:41

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

谢谢

...全文

220 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>

这是一款使用jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。该图片制作层特效共6种不同的效果，使用一些简单的jQuery代码和CSS3过渡效果来完成，简单实用，可以为网站图片添加非常不错的效果。制作方法HTML结构该图片遮罩效果的基本HTML结构如下： +x...在上面的.close-overlay标签是一个关闭按钮，它用于在移动触摸设备中关闭遮罩层，在大屏幕显示器中你...

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

参考：http://mrthink.net/demo/ijq20110321.htm jquery 防止鼠标快速滑过： mouseenter的时候，setTimeout 延迟执行，mouseleave的时候 clearTimeout 示例：无标题文档 * {margin:0;padding:0} li {

<!doctype html> <html> <head> <meta charset="gb2312"> <title>滑过翻转</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src=...

Unity鼠标滑过图片局部放大效果资源：打造卓越的用户交互体验去发现同类优质开源项目:https://gitcode.com/ 项目介绍在当今的数字交互设计中，用户体验成为了评价产品优劣的关键指标之一。Unity鼠标滑过图片局部放大效果资源，正是为了提升这一指标而诞生的一款开源工具。它允许开发者在Unity引擎中轻松实现鼠标滑过图片时，图片局部放大的效果。这一功能在电商平台、教育软件和各类展示...

87,987

社区成员

224,683

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章