Yaptım birşeyler. Umarım işini görür

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kirazlar</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">

.a1 {
    position: absolute;
    top: 250px;
    left: 30px;
    width: 150px;
    height: 150px;
    font-size: 32px;
    color: #0F3;
    text-align: center;
    line-height: 150px;
}

.a1over {
    width: 150px;
    height: 150px;
    border: 1px solid #0F3;
}


.a2 {
    position: absolute;
    top: 340px;
    left: 210px;
    width: 150px;
    height: 150px;
    font-size: 32px;
    color: #0F3;
    text-align: center;
    line-height: 150px;
}

.a2over {
    width: 150px;
    height: 150px;
    border: 1px solid #0F3;
}
    </style>
        
    <script type="text/javascript" src="jquery-1.4.min.js"></script>
    
    <script type="text/javascript"> 
        $(document).ready(function(){ 
            $(".a1over").hide();
            $(".a2over").hide();
        
        
            $(".a2").mouseover(function(){
                $(".a2over").show();
            }).mouseout(function(){
                $(".a2over").hide();
            });
            
            
            $(".a1").mouseover(function(){
                $(".a1over").show();
            }).mouseout(function(){
                $(".a1over").hide();
            });    
        });    
    </script>
    
    

</head>

<body>


<div class="resim">
    <img src="kiraz.jpg" alt="" />
    <div class="a1"><div class="a1over">A Binası</div></div>
    <div class="a2"><div class="a2over">B Binası</div></div>
</div>


</body>
</html>