急求各位大侠指教，小弟初学遇到困难

这段代码我想让图片鼠标移上去能把图片缩小，并且连接依然存在，鼠标移开恢复，试了各种方法都不起效果呀，求大侠指教
换图片链接也有过，style，都不行，求指教~
<!DOCTYPE html>
<html>
  <head>
  <title>Welcome To Long's World</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="homepagecss.css" rel="stylesheet" />
  <link rel="stylesheet" href="960.css"/>
  <link rel="stylesheet" href="reset.css"/>
  </head>
  <body>
  <div class="grid_3" id="logo">
  <h1>welcome to my world</h1>
  <img src="hobby.png" class="foto"/>
  </div>
  <div class="grid_9" id="nav">
  <a href="#"><img src="city2.png" width="203" height="200" id="city"></a>
  <a href="#"><img src="school2.png" id="school"></a><br>
  <a href="#"><img src="family2.png" width="175" height="164" id="family"></a><br>
  <a href="#"><img src="hobby2.png" id="hobby"></a>
  <a href="#"><img src="resume2.png" width="174" height="167" id="resume"></a>
  </div>
  </body>
</html>

解决方案 »

  1.   

    <img src="123.jpg" width="100" height="100" onmouseover="this.style.width='200px';this.style.height='200px'" onmouseout="this.style.width='100px';this.style.height='100px'" />
      

  2.   

    css 的<style type="text/css">
    a img{width:100px;height:100px;}
    a:hover img{width:200px;height:200px;}
    </style>
    <a href=""><img src="123.jpg"  /></a>
      

  3.   

    那就给图片定位，漂浮起来（position:absolute;z-index:111），然后外层的A(position:relative)  固定大小