SOURCE

$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});

$(document).ready(function(){
  $("h1").click(function(){
    return "欢迎观看旅游地图";
  });
  $("h1").click(function(event){
    $("h1").html(event.result);
  });  
});

$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","pink");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","lightgray");
  });
});

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

$(document).ready(function(){
  $("#flip").dblclick(function(){
    $("#panel").slideUp("slow");
  });
});

$(document).ready(function(){
  $("#p3").click(function(){
    $("#p3").css({"background-color":"yellow","font-size":"200%"});
  });
});

$(document).ready(function(){
  $("#p4").click(function(){
    $("#p4").css({"background-color":"#ff0000","font-size":"200%"});
  });
});

$(document).ready(function(){
  $("#p5").click(function(){
    $("#p5").css({"background-color":"#0000ff","font-size":"200%"});
  });
});

<div id="p1"><header><h1>中国故宫黄山龙门石窟旅游地图展览</h1>  </header>
<section>
   <table>
    <tr>
    <td ><img src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264506349&di=47346d13d22fa111d141394e4a61df0c&imgtype=0&src=http%3A%2F%2Fimg1.ph.126.net%2FU4m_OSidjzEk4F06soRJnw%3D%3D%2F6608257297470004570.jpg style="width:500px;">
    </td>
    </tr>
    <tr>
    <tr>
    <td id="p3">故宫旅游地图全景</td>
     <tr>
    <td><img src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264595614&di=0d66cf3389af42d6a286505c118ba98a&imgtype=0&src=http%3A%2F%2Fhswx.tumayou.com%2Fuploads%2Ft%2Ftvbody1417593459%2Fc%2F0%2F4%2Fe%2F560b50e485b74.jpg style="width:500px;"></td>
    </tr>
    <tr>
    <tr>
    <td id="p4">黄山旅游地图全景</td>
    <tr>
     <td><img src=http://www.esmartgo.com/Pictures/UeditorImg/TrustSoft/%D4%B6%B3%CC%D7%A8%C7%F8/AllRemote/2016-03-24/a6852bba-d913-424f-919d-22b455907b65.jpg style="width:500px;"></td>
    <tr>
    <tr>
    <td id="p5">龙门石窟旅游地图全景地图</td>
    </table> 
   <p id="P2"> 旅游小常识
  <p id="P2"> 1在青山绿水间旅游要学会走路。掌握“走路经”者玩得轻松、愉快又安全;反之则劳累、紧张，甚至受伤。</p>
  <p id="P2" >2要走不要跳三步并做二步走或蹦蹦跳跳会加重膝踝负担，容易劳累或受伤。</p>
  <p id="P2"> 3要匀不要急匀速行走最省体力，而且有利于保持良好心态;急一阵歇一阵的走路方式最累人。</p>
  <p  id="P2">4快去慢返上午出游的路可走得稍快，傍晚返程则要慢些走，以免疲劳的关节、肌腱受伤。</p>
  <p id="P2"> 5走阶不走坡上下山时尽量走石阶，少走斜坡。这样较符合力学和生理要求，安全又省力。</p>
  <p id="P2"> 6走硬不走软在水泥、沥青、石板等硬地上行走比在草地、河滩、湿地等软地面行走更省劲和安全。</p>
  <p id="P2">7避滑就涩宁可绕点路从较涩的雪地、草坡走，也不走既滑又危险的冰面、沙石坡，以求安全。</p>
 <p id="P2"> 8旅游卫生以及防护常识</p>
  <div id="flip">温馨提示</div>
<div id="panel">在旅游途中，请注意安全！</div>
</section>

#p1{
  
  width:1000px;
  
  margin:auto;
}
header{
  width:1000px;
  height:50px;
  background-color:gray;
  
}

h1{
  text-align:center;
  
}
section{
   
  width:1000px;
  height:1800px;
   background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494181044590&di=c3a3b2ade35a31e243a299fcb74c585e&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F130201%2F235113-13020110045928.jpg);
  
}

td{
  text-align:center
}
#P2{
font-size:23px;
text-align:center;
}
table{
  margin:0 auto;
}
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:120px;
	display:none;
}