图片滑过触发的问题

phpeye 2006-12-27 11:29:41

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

谢谢

...全文

195 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的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。参考文档： http://blog.csdn.net/u014175572/article/details/51535768

描述：当用户将鼠标放到图片上时，显示图片的大图。效果图：说明：用到了mouseover、mouseout、mousemove三个事件，分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。对于mouserover事件，做以下几件事：获取原标题，并将标题置为空，防止title和提示框同时出现。创建提示框对象，并将图片地址和title放入其中显示。设置

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

1，纯css样式实现鼠标滑过显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="

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

87,997

社区成员

224,709

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章