menu
Ad goes here

Sunday, 30 September 2012

Create Interactive World Map through CSS and HTML

Whenever you will try to develop some interactive features on the website then always flash software will come in your mind. But Mobile devices users, such as iPhone users will be noticed that the Flash websites can not be navigate on iPhone and even the search engine does not support properly. That's why the most business oriented website owner avoid flash base webistes and their features.

See Interactive Map in CSS and HTML.




Code:

<style type="text/css">
.map_container { font-family:Arial, Helvetica, sans-serif;
font-size:12px; margin:0 auto; width:590px; height:308px; position:relative;}
.map_container img { position:absolute; left:0; top:0; z-index:1}
.map_container a.northamerica,
.map_container a.europe,
.map_container a.africa,
.map_container a.asia,
.map_container a.latinamerica,
.map_container a.oceania {
position:absolute; left:0; top:0; z-index:2;
color:#fff;text-decoration:none; width:243px;
height:150px;}
.map_container a.europe { width:147px; height:132px; left:252px; top:0px;}
.map_container a.africa { width:147px; height:132px; left:252px; top:132px;}
.map_container a.asia { width:156px; height:99px; left:400px; top:74px;}
.map_container a.latinamerica { width:252px; height:109px; top:177px; left:0;}
.map_container a.oceania { width:107px; height:93px; left:439px; top:199px;}

.map_container a.northamerica span,
.map_container a.europe span,
.map_container a.africa span,
.map_container a.asia span,
.map_container a.latinamerica span,
.map_container a.oceania span{ display:none;}

.map_container a.northamerica:hover span,
.map_container a.europe:hover span,
.map_container a.africa:hover span,
.map_container a.asia:hover span,
.map_container a.latinamerica:hover span,
.map_container a.oceania:hover span
{display:block; padding:5px;
background:#000;
border-radius:5px;
-moz-border-radius:5px;
box-shadow:0 1px 2px 1px #fff;
float:left; position:absolute;
top:100px; left:50px;}

.map_container a.europe:hover span {top:80px;}
.map_container a.africa:hover span { top:30px;}
.map_container a.asia:hover span {top:30px;}
.map_container a.latinamerica:hover span {top:30px;}
.map_container a.oceania:hover span {top:20px; left:20px}
</style>


<div class="map_container">
<a href="#" class="northamerica"><span>North America</span></a>
<a href="#" class="europe"><span>Europe</span></a>
<a href="#" class="africa"><span>Africa</span></a>
<a href="#" class="asia"><span>Asia</span></a>
<a href="#" class="latinamerica"><span>Latin America</span></a>
<a href="#" class="oceania"><span>Oceania</span></a>
<img src="worldmap.gif" width="590" height="308" border="0" />
</div>






3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. It’s very excellent information and more real facts to provided that post.Thank you for sharing this information. Download Call Of Mini: Zombies Apk

    ReplyDelete

Books for you (Crafted with )