<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<script>
var orginal=null//변수선언
function a(){
alert("안녕하세요");
}
function b(){
//이미지를 바꿔주자
var img1 = document.getElementById("img1");
original=img1.src;//원래의 이미지 소스 주소를 저장
img1.src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"
img1.width="250";
img1.height="250";
}
function c(){
var img1 = document.getElementById("img1");
img1.src=original;//원래의 이미지로 되돌리기
}
</script>
</head>
<body>
<a href="index.jsp">
<img id="img1" src="http://icon.daumcdn.net/w/c/12/03/77951173032424319.png"
onClick="a()" onMouseOver="b()" onMouseOut="c()">
</a>
</body>
</html>
이미지 위에 마우스를 올리면 이미지가 바뀌고 다시 빼면 원래 이미지가 나오고 이미지 클릭시 경고창 실행~~