[jQuery] explain this please

[jQuery] explain this please

So for school i had to make an imagemap with jQuery, but now we have to explain it to the teacher and i dont really know how it works. So if somebody could explain it to me that would be great

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>GIP 6e IB</title>
  6. <link rel="shortcut icon" href="../afbeeldingen/favicon.ico" type="image/x-icon" />
  7.     <link rel="stylesheet" type="text/css" href="../css/css.css"/>
  8. <link href="../menu_assets/styles.css" rel="stylesheet" type="text/css">
  9. <script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
  10. <script type="text/javascript">
  11.  $(document).ready(function(){
  12.  
  13. $('#foto1').click(function(){
  14. $('.backdrop, #lb1').animate({'opacity':'.50'}, 300, 'linear');
  15. $('#lb1').animate({'opacity':'1.00'}, 300, 'linear');
  16. $('.backdrop, #lb1').css('display', 'block');
  17. });
  19. $('#foto2').click(function(){
  20. $('.backdrop, #lb2').animate({'opacity':'.50'}, 300, 'linear');
  21. $('#lb2').animate({'opacity':'1.00'}, 300, 'linear');
  22. $('.backdrop, #lb2').css('display', 'block');
  23. });
  25. $('#foto3').click(function(){
  26. $('.backdrop, #lb3').animate({'opacity':'.50'}, 300, 'linear');
  27. $('#lb3').animate({'opacity':'1.00'}, 300, 'linear');
  28. $('.backdrop, #lb3').css('display', 'block');
  29. });
  30.  
  31. $('.close').click(function(){
  32. close_box();
  33. });
  34.  
  35. $('.backdrop').click(function(){
  36. close_box();
  37. });
  38.  
  39. });
  40.  
  41. function close_box()
  42. {
  43. $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
  44. $('.backdrop, .box').css('display', 'none');
  45. });
  46. }
  47. </script>
  48. </head>

  50. <body>


  53. <div align="center" class="titel" >
  54. ALBI
  55. </div>
  56. <div id="header" align="center">
  57. <img src="../afbeeldingen/Albi-Finale.jpg" alt="foto albi" width="100%" height="250" />
  58. </div>
  59. <div id='cssmenu'>
  60. <ul>
  61.    <li><a href='index.html'><span>Home</span></a></li>
  62.    <li><a href='laville.html'><span>La Ville</span></a></li>
  63.    <li><a href='excursions.html'><span>Excursions</span></a>
  64.       <ul>
  65.         <li><a href='sportif.html'><span>Sportif</span></a></li>
  66.          <li><a href='culture.html'><span>Culture</span></a></li>
  67.          <li><a href='nature.html'><span>Nature</span></a></li>
  68.       </ul>
  69.    </li>
  70.    <li><a href='hotel.html'><span>Hôtel</span></a></li>
  71.    <li><a href='route.html'><span>Route</span></a></li>
  72.    <li><a href='photos.html'><span>Photos</span></a></li>
  73.    <li><a href='contact.html'><span>Contact</span></a></li>
  74.    <li class='active'><a href='vues.html'><span>Vues</span></a></li>
  75. </ul>
  76. </div>

  78. <div id="inhoud">
  79. <img src="../imagemap/albi-map.jpg" width="500" height="731" alt="imagemap albi" usemap="#albi" />

  81. <map name="albi">
  82. <area shape="circle" coords="108,363,48" href="#" id="foto1"/>
  83.     <area shape="circle" coords="89,442,35" href="#" id="foto2"/>
  84.     <area shape="circle" coords="294,516,44" href="#" id="foto3"/>
  85.     
  86. </map>
  87. </div>

  89. <div class="backdrop"></div>
  90. <div class="box" id="lb1"><div class="close">x</div>
  91. <img src="../imagemap/400px-Albi_Palais_de_la_Berbie.jpg" width="400" height="300"><br />Ici c'est le Palais de la Berbie</div>
  92.             
  93. <div class="box" id="lb2"><div class="close">x</div>
  94.   <img src="../imagemap/Albi Cathédrale Ste Cécile2.jpg" width="400" height="300" alt="cathedrale" /><br />Ici c'est le Cathédrale de Saint Cécile<br /></div>
  95.         
  96. <div class="box" id="lb3"><div class="close">x</div>
  97. <img src="../imagemap/castelnau-de-montmiral-02.jpg" width="400" height="300" alt="stadhuis" /><br />Ici c'est le hôtel de ville</div>
  98.         
  99. <div id='footer'>
  100. Thomas Van der Straeten ©
  101. </div>
  102. </body>
  103. </html>