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>






20 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
  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

    ReplyDelete
  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. www.caramembuatwebsiteku.com

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

    ReplyDelete
  6. Thanks for sharing. Aviation website design
    https://toppng.com

    ReplyDelete

  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.

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

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

    ReplyDelete
  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

    ReplyDelete
  11. This comment has been removed by the author.

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

    ReplyDelete
  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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete

Contact Form

Name

Email *

Message *