这网站效果怎么做?

来源：百度知道 编辑：UC知道 时间：2024/06/22 07:54:52
http://www.ppg.cn/YesPPG_CN/Products/NewProductDetail.aspx?ProductGroupID=643&ProductCode=035881103

这网站当鼠标经过那4块小图片的时候那大图的颜色改变,产品编号也随之改变,这效果怎么做?谢谢!!

处理 onmouseover, onmouseout, onclick 三个事件。

onmouseover事件 写一段Javascript脚本 来执行改变图片和颜色 当鼠标经过时执行这段脚本

onmouseout事件 写段Javascript脚本 当鼠标离开那块区域时执行 也就是把图片和颜色设置成原来的样子

js 加载 内存里的4张图片。

写onmouseover, onmouseout, onclick 鼠标事件就可以了

我做了一个相关的页面，可以实现上面的功能。
下面是主要代码，你把它放在<body></body>就可以了。
函数参数说明OnMouseOver（你要改变的大的图片的名字，你要改变的文字）

<style type="text/css">
<!--
.big
{
height: 300px;
width: 200px;
}
.small
{
height: 50px;
width: 200px;
}
.small img
{
height: 50px;
width: 50px;
border: 2px solid #CCCCCC;
}
-->
</style>
<div class="big">
<img id="bigImg" src="" />
</div>
<div id="imgTitle"></div>
<div class="small">
<img onmousemove="OnMouseOver(1,'第一个图片')" src="image/1.jpg&q