图片滑过触发的问题

phpeye 2006-12-27 11:29:41

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

谢谢

...全文

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

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在...

用到了mouseover、mouseout、mousemove三个事件，分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。对于mouserover事件，做以下几件事：获取原标题，并将标题置为空，防止title和提示框同时出现...

CaptionHover.css是一组超酷CSS3鼠标滑过图片过渡动画特效。该特效中共有4种效果，分别是在鼠标滑过图片时图片产生过渡动画，展现图片标题的特效。使用方法在页面中引入CaptionHover.css文件。HTML结构使用一个作为...

正常在设置鼠标滚轮事件的时候，一次滚动对应一次响应事件。但是按照用户习惯，用户一次滑动鼠标...为了解决这一问题，可以设置一个响应事件的触发条件。（1）设置一个boolean型的变量作为是否触发滚轮响应事件...

这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。安装可以通过NPM或...

87,995

社区成员

224,693

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章