Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Garulian Empire Map</title>
- <link rel="shortcut icon" href="fire.ico">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <script src="index.js"></script>
- </head>
- <body>
- <img src="gem_2000x.png" alt="" usemap="#Map" />
- <map name="Map" id="Map">
- <div class="mappoints">
- <area alt="" title="" href="" id="area1" shape="circle" coords="1055,662,8" />
- <area alt="" title="" href="" id="area2" shape="circle" coords="1205,656,8" />
- <area alt="" title="" href="" id="area3" shape="circle" coords="1055,742,8" />
- <area alt="" title="" href="" id="area4" shape="circle" coords="1333,1005,8" />
- <area alt="" title="" href="" id="area5" shape="circle" coords="1329,1038,8" />
- <area alt="" title="" href="" id="area6" shape="circle" coords="1028,1364,8" />
- <area alt="" title="" href="" id="area7" shape="circle" coords="1046,1364,8" />
- <area alt="" title="" href="" id="area8" shape="circle" coords="935,1423,8" />
- <area alt="" title="" href="" id="area9" shape="circle" coords="1029,1437,8" />
- <area alt="" title="" href="" id="area10" shape="circle" coords="1030,1462,8" />
- <area alt="" title="" href="" id="area11" shape="circle" coords="1121,1470,8" />
- <area alt="" title="" href="" id="area12" shape="circle" coords="1333,1380,8" />
- <area alt="" title="" href="" id="area13" shape="circle" coords="1361,1405,8" />
- </div>
- </map>
- <div id="infodiv"></div>
- </body>
- </html>
- <style>
- body {
- background-color: rgb(157,145,105);
- }
- #infodiv {
- float: left;
- position: absolute;
- display: none;
- -webkit-border-radius: 28;
- -moz-border-radius: 28;
- border-radius: 28px;
- text-shadow: 1px 1px 3px #666666;
- font-family: Arial;
- color: #ffffff;
- font-size: 20px;
- background: #b5a602;
- padding: 10px 20px 10px 20px;
- border: solid #227dcc 3px;
- text-decoration: none;
- }
- </style>
- <script>
- $(".mappoints").on({
- mouseleave: function () {
- $('#infodiv').css({display: "none"});
- }
- });
- $("#area1").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Pirate Hub");
- }});
- $("#area2").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Empire Hub");
- }});
- $("#area3").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Boats");
- }});
- $("#area4").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Ice Pyramid");
- }});
- $("#area5").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("TnT Shisha Bar");
- }});
- $("#area6").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Radiant Tower");
- }});
- $("#area7").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("PvP Arena");
- }});
- $("#area8").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("PvP Arena");
- }});
- $("#area9").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Radiant Chaple");
- }});
- $("#area10").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Old Hub");
- }});
- $("#area11").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("PvP Arena");
- }});
- $("#area12").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("PvP Arena");
- }});
- $("#area13").on({
- mouseenter: function () {
- $('#infodiv').css({display: "block"});
- $('#infodiv').text("Julias Church");
- }});
- $(document).bind('mousemove', function(e){
- $('#infodiv').css({
- left: e.pageX + 20,
- top: e.pageY - 20,
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement