HTML and JQuery - area tag

whatever...click for more information

nice channel...click for more information

nice again...click for more information

this is cool...click for more information

Here is the code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>



<script>

$(document).ready(function(){

  $("#city").click(function(){

    $(".venice").animate({

      top:'10px',

      height:'300px',

      width: '400px',

opacity:'1'

    },8000);

  });

});



$(document).ready(function(){

  $("#first").hover(function(){

    $("#picture1").toggle();

$("#p1").toggle();

  });

});



$(document).ready(function(){

  $("#second").hover(function(){

    $("#picture2").toggle();

$("#p2").toggle();

  });

});



$(document).ready(function(){

  $("#third").hover(function(){

    $("#picture3").toggle();

$("#p3").toggle();

  });

});



$(document).ready(function(){

  $("#four").hover(function(){

    $("#picture4").toggle();

$("#p4").toggle();

  });

});





</script>

<style>



img.venice

{
position:relative;
 left:20px;
opacity:-0.5;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */
-webkit-filter: grayscale(100%);
}

img.venice:hover{
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: none;
}

#picture1
{
display:none;
position:absolute;
top:100px;
left:650px;

}

#picture2
{
position:absolute;
top:100px;
left:650px;
display:none;
}

#picture3
{
position:absolute;
top:100px;
left:650px;
display:none;
}

#picture4
{
position:absolute;
top:100px;
left:650px;
display:none;
}

#p1
{
display:none;
position:absolute;
top:310px;
left:650px;
}

#p2
{
display:none;
position:absolute;
top:310px;
left:650px;
}

#p3
{
display:none;
position:absolute;
top:310px;
left:650px;
}

#p4
{
display:none;
position:absolute;
top:310px;
left:650px;
}

</style>

<div>

<button id="city">Show city</button>

</div>

<img height="200" id="picture1" src="http://www.ieeer8.org/wp-content/gallery/operating-committee/venice-gondola.jpg" width="200" />



<br />

<div>

<img height="200" id="picture2" src="http://upload.wikimedia.org/wikipedia/commons/3/38/Gondola-Venice-Italy.jpg" width="200" />

</div>

<div>

<img height="200" id="picture3" src="http://www.zastavki.com/pictures/2560x1600/2011/Cities_Venice_in_the_spring_028456_.jpg" width="200" />

</div>

<div>

<img height="200" id="picture4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOq6V8Vqum0rqt6lgDVSY8-vI9mPzUa8aPoY_vmnnXQZG9rw9aB01fjJC6p3UYoSD8K1IXg6UeA9fvoXFLAPUGlZrGx-Xc1btNjpXW6rvdrKSyK5xgxcF1-I_KyeA3he9AaX0SLC96AhzI/s1600/Lost_in_Venice_by_zew.jpg" width="200" />

</div>

<br />

<div id="test">

<img border="1" class="venice" height="100" src="http://www.airpano.com/files/Italy-Venice/image7a.jpg" usemap="#map" width="100" />

</div>

<map name="map">

<area alt="HTML tags" coords="20,20,100,150" href="http://en.wikipedia.org/wiki/Venice" id="first" shape="rect"></area>

<area coords="150,150,30" href="http://en.wikipedia.org/wiki/Venice" id="second" shape="circle"></area>

<area coords="180,180,30" href="http://en.wikipedia.org/wiki/Venice" id="third" shape="circle"></area>

<area coords="230,280,30" href="http://en.wikipedia.org/wiki/Venice" id="four" shape="circle"></area>

</map>

<br />

<div>

<div id="p1">

whatever...click for more information</div>

<div id="p2">

nice channel...click for more information</div>

</div>

<div id="p3">

nice again...click for more information</div>

<div id="p4">

this is cool...click for more information</div>