本文提供三个HTML页面示例，展示了如何使用JavaScript为图片添加鼠标悬停和点击交互效果，包括图片变化和页面跳转功能。
1、例子##############################
<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script>
function imgover(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"1"+arr2;
img.src=arr;
}
function imgOut(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"2"+arr2;
img.src=arr;
}
</script>
</head>
<body>
<tr>
<td rowspan="2">
<!-- onmouseover触发 转到my.ftl页面 -->
<a href="jack1.jsp"><img src="top02_05.jpg" width=100 height=50
οnmοuseοver="javaScript:location.href='my.ftl'" οnmοuseοut="imgOut(this);" /></a>
</td>
<br>
<td rowspan="2">
<a href="jack1.jsp"><img src="top02_06.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack1.jsp"><img src="top02_07.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack1.jsp"><img src="top02_08.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
</tr>
</body>
</html>
2、例子###############################################
<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script>
function imgover(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"1"+arr2;
img.src=arr;
}
function imgOut(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"2"+arr2;
img.src=arr;
}
</script>
</head>
<body>
<tr>
<td rowspan="2">
<!-- onmouseover放上鼠标触发转换页面与onmouseout离开触发转换页面 -->
<a href="jack2.jsp"><img src="top02_05.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /></a>
</td>
<br>
<td rowspan="2">
<a href="jack2.jsp"><img src="top02_06.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack2.jsp"><img src="top02_07.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack2.jsp"><img src="top02_08.jpg" width=100 height=50
οnmοuseοver="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
</tr>
</body>
</html>
3、例子###############################################
<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script>
function imgover(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"1"+arr2;
img.src=arr;
}
function imgOut(img){
var source=img.src;
arr=source.substring(0,source.indexOf("_")-1);
arr2=source.substring(source.indexOf("_"));
arr=arr+"2"+arr2;
img.src=arr;
}
</script>
</head>
<body>
<tr>
<td rowspan="2">
<!-- onclick点击触发转换页面与onmouseout离开触发转换页面 -->
<a href="jack3.jsp"><img src="top02_05.jpg" width=100 height=50
οnclick="imgover(this)" οnmοuseοut="imgOut(this);" /></a>
</td>
<br>
<td rowspan="2">
<a href="jack3.jsp"><img src="top02_06.jpg" width=100 height=50
οnclick="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack3.jsp"><img src="top02_07.jpg" width=100 height=50
οnclick="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
<td rowspan="2">
<a href="jack3.jsp"><img src="top02_08.jpg" width=100 height=50
οnclick="imgover(this)" οnmοuseοut="imgOut(this);" /> </a>
</td>
<br>
</tr>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
