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.


<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.latinamerica,
.map_container a.oceania {
position:absolute; left:0; top:0; z-index:2;
color:#fff;text-decoration:none; width:243px;
.map_container a.europe { width:147px; height:132px; left:252px; top:0px;}
.map_container { width:147px; height:132px; left:252px; top:132px;}
.map_container { 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 span,
.map_container 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 span,
.map_container span,
.map_container a.latinamerica:hover span,
.map_container a.oceania:hover span
{display:block; padding: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 span { top:30px;}
.map_container span {top:30px;}
.map_container a.latinamerica:hover span {top:30px;}
.map_container a.oceania:hover span {top:20px; left:20px}

<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" />


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

  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

  3. 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. AI-100 dumps

  4. Let me share this with my visitors and subscribers. Sure, they will like it as much as I do. Very deep, helpful and detailed review.

  5. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
    Rochester MN Web Design

  6. Thanks for sharing. Aviation website design


  7. free DP-200 Braindumps - Here you will find the latest Microsoft DP-200 actual exam questions for free that stimulates a real Implementing an Azure Data Solution with the right answers.

  8. Very interesting information!Perfect just what I was looking for! website designers nyc

  9. Hey there! Great post! Please when I will see a follow up! website design company nyc

  10. Additionally, it doesn’t matter how extremely you should be complete with treating a very platform, gradually you’ll discover an instance the places you should want to do a number instruct care; and as a consequence influenced by your real age but also bodybuilding, therfore the inches of one’s caravan it could be a awfully excessive pastime. motor movers ny web design firms

  11. This comment has been removed by the author.

  12. Loving the info on this site, you have done great job on the posts . branding agency san francisco

  13. What i do not realize is actually how you’re not really much more neatly-liked than you might be right now. You’re so intelligent. You already know thus considerably in relation to this matter, made me in my view believe it from a lot of numerous angles. Its like men and women aren’t interested unless it is something to do with Girl gaga! Your individual stuffs outstanding. Always deal with it up! san francisco design agency

  14. Hey! Nice stuff, do tell us when you post something like that! interface design agency san francisco

  15. I like this website very much, Its a very nice post to read and find information. web design agencies los angeles

  16. Some truly quality blog posts on this web site , saved to my bookmarks . web design company

  17. Hello there, just became alert to your blog through Google, and found that it’s truly informative. I’m gonna watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers! top web design agencies

  18. Step-by-Step create website Easy to Customize, Publish Now! Custom domain name. Multiple payment methods. Free multilingual fonts. 24/7 support center. 1000s of free images. Top industry hosting. 100s of Apps. Easy-to-add blog. Mobile optimized. Create Website


Contact Form


Email *

Message *