CSS World Map Rollover

CSS code in acion:

Author: Free CSS Menus: www.freecssmenus.co.uk

Description: I made the UK rollover map last year and thought that it was about time the internet had a descent CSS rollover world map... well here it is.
Before I start getting emails, I know that this map is geologically inaccurate but it was the best map that I could find to use for this example. It is impossible to use the sliding doors technique with this example. To avoid slow down upon rollover you could use javascript to preload the images in the HEAD section of the code.

Category: Image Rollover

Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7

Rate this script: Rating: 4.4 / 5
43 ratings.


Comment from: SEO Sheffield

I would like to know how to do image mapped rollover buttons in dreamweaver?

Posted on: Wednesday 23 Nov, 2011
Comment from: The Chunkanator

Cool map of the world. Nice Job!

Posted on: Tuesday 18 Oct, 2011
Comment from: Brendan Meighan

When creating the map on my website, i am struggling to get the roll over effect to work. i.e. the continents will not highlight when you hover over each one. How would i go about making this work?

Posted on: Thursday 02 Jun, 2011
Comment from: John (Web Master)

Response to: CorrectIT

Thanks for your response. This is an example of the possibilities of CSS image swap. This website has not at any point described the areas in this example as continents. As described in the "Description" this map is geologically inaccurate. Although six out of seven regions on this map are continents, the relevancy of this fact is quashed as it is still just an example of the CSS image swap.

If any offense has been caused to anyone from this example then it will be removed if I receive enough feedback. I will also be willing to remove Pluto from:


because apparently Pluto is not considered a planet anymore, just a very big bit of rock floating in space. Although you felt it not applicable to pick me up on that one.

Many Thanks and sorry for any inconvenience.

Posted on: Tuesday 21 Sep, 2010
Comment from: CorrectIT

Greate, but information is incorrect. There is no continent called middle east. Even as a region Afganistan, Pakistan does not belong to Middle East. It looks like you are trying to limit Muslims in to Middle East. That's wrong.

Posted on: Saturday 18 Sep, 2010
Comment from: Niels

Is it possible to get a psd-file for the world map?

Posted on: Thursday 04 Mar, 2010
Comment from: Simon

Ive tried this effect using stylesheets but given up due to compatability... this seems to work cross browser though. Many Thanks

Posted on: Friday 19 Feb, 2010
Comment from: Wee man

Great CSS world map

Posted on: Saturday 23 Jan, 2010
Comment from: Buzz

Rollover world map that aint javascript or flash - about time !

Posted on: Thursday 11 Jun, 2009
Comment from: mariana

Wow! Didnt realise that this kind of effect was achievable with CSS. I found this page ranked no 1 with google for rollover world map. It looks and works great! There are some great other css effects on this site, well worth surfing! Try Divine CSS for more great css resources.

Posted on: Saturday 23 May, 2009

Read all Comments

Post Your Comments Post your comments!

Match Random Colour
Match Random Word!
Anti-Spam Image:
anti-spam image Match Image (3 letters then 1 number)

Note: Comments are checked before they are displayed.
Please read our Terms & Conditions before submitting any comments

Top of Page go back to top of page

100% free online css website builder
100% free online css website builder

Editable Templates:

CSS Website Template: Clean Dark Blue
CSS Website Template: Sea Bubbles
CSS Website Template: Pastel Purples
CSS Website Template: Machine City
CSS Website Template: Neon Light Club

Latest CSS:

Css3 Iphone Menu Pad
Creating an iphone app? how about this funky dark purple menu made in css3. Look ...
Added: Friday 24 Jun, 2011

Huge Expandable Horizontal Menu
You may be thinking that this menu was made with CSS3. Not the case! This menu w ...
Added: Monday 13 Jun, 2011

Matt Cardle Vertical Menu
2010 Xfactors Matt Cardle Menu. This vertical menu shows how a png image can be ...
Added: Saturday 16 Oct, 2010

Sleek Drop-down Menu
A great example of what css can be used to create. This free download from PSDGR ...
Added: Friday 13 Aug, 2010

Bright Yellow Vertical Menu
If your website is bright and sunny then add this vertical menu to give it a spl ...
Added: Tuesday 15 Jun, 2010

Top Rated:

Css rollover uk map te ...
Free rollover map of the Unite ...
Rating 4.3 / 5
4.3 / 5 - 55 Ratings

CSS World Map Rollover
I made the UK rollover map las ...
Rating 4.4 / 5
4.4 / 5 - 43 Ratings

Huge Expandable Horizo ...
You may be thinking that this ...
Rating 4.7 / 5
4.7 / 5 - 21 Ratings

Free Tabbed Navigation ...
Tabbed navigation menus improv ...
Rating 4.6 / 5
4.6 / 5 - 16 Ratings

Transparent Vertical M ...
This vertical golf menu uses a ...
Rating 4.4 / 5
4.4 / 5 - 14 Ratings

CSS Tags:

Blue Watermark Style Sheets Css Solar System Yellow Orange Design Iphone Text Color Border Opacity Background Animation Vertical Expandable Light Themes Chrome Css Xfactor Texture Rating Hover Gradient Display Metal Red Rollover Grey Blog Depth Green 3d Style Transparency Sliding Doors List Border-radius Z-index Positioning Flash Css3 Font Rounded Website Template Cascading Horizontal Text-decoration Menu Drop Down Forms Templates Cyan Tutorials Navigation Png Alignment Purple Music Dark Tabbed Wallpapers Image Corner Photo Gallery Layout Script Gold Hypertext Button Colour Menu Icon Block Url Width Centering Pink Float
100% free online css website builder

Terms & Conditions | Site Map | Contact | asterix templateWebsite Template Builder | Free Templates | Free Wallpapers

W3c compliant (XHTML)    W3c Compliant (CSS)

Web Design    Personal Blogs - Blog Rankings

Css is one of the main ingredients for a User-friendly, Accessible website.
A good web designer should make every effort not to discriminate against those with disabilities.

Thank-you for visiting Free CSS Menus today: Friday 26th of August 2016

free css design inspiration
What is CSS?