1。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之图像链接</title> 8 <style type="text/css"> 9 .link { 10 display: block; 11 width: 170px; 12 height: 55px; 13 background-image: url(baidu1.gif); 14 background-repeat: no-repeat; 15 background-position: top left; 16 } 17 18 .hover { 19 display: block; 20 width: 200px; 21 height: 70px; 22 background-image: url(baidu2.gif) 23 background-repeat: no-repeat; 24 background-position: top left; 25 } 26 27 .active { 28 display: block; 29 width: 170px; 30 height: 55px; 31 background-image: url(baidu1.gif); 32 background-repeat: no-repeat; 33 background-position: top left; 34 } 35 36 img { 37 border: 0; 38 } 39 40 </style> 41 <script src="jquery-1.5.2.js" type="text/javascript"></script> 42 <script type="text/javascript"> 43 $(document).ready(function(){ 44 $('.roll').addClass('link'); 45 $('.roll').hover( 46 function(){ 47 $(this).addClass('active'); 48 }, 49 function(){ 50 $(this).removeClass('active'); 51 } 52 ); 53 }); 54 </script> 55 <body> 56 <a href="http://baidu.com.cn"><span class="roll"></span></a> 57 </body> 58 </html>
