用js来作图片替换 古老的题目 我的做法
ImageUtil.js
--------------------------------------------------------------------------------------------------------------------------------------------------
function switchIamgeOn(imgName){
var str="";
if (document.images){//to validate weather the document exist images or not
if (document.images[imgName] != "none"){//to validate weather the image we metioned exist
document.images[imgName].src = './images/'+document.images[imgName].name+"_on.gif";
//change the source of the image to show another image
//on mouse over the image should add a _on to the original picture's file name
//extra file name remain
}
}
}
function switchIamgeOff(imgName){
var str="";
if (document.images){//to validate weather the document exist images or not
if (document.images[imgName] != "none"){//to validate weather the image we metioned exist
document.images[imgName].src = './images/'+document.images[imgName].name+"_off.gif";
//change the source of the image to show another image
//on mouse over the image should add a _on to the original picture's file name
//extra file name remain
}
}
}overmind.htm
--------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript" src="./js/imageUtils.js" type="text/javascript"></script>
<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<form>
<img name="button1" class="pressableButton" onMouseOver="switchIamgeOn('button1')" onMouseOut="switchIamgeOff('button1')" src="images/button1_off.gif">
</form>
</body>
</html>
我希望能把这些东西，包括属性，事件和方法统一封装到一个基类里面，似乎应该用一种叫做htc的东西来做，整理中。