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
Comments:
I would like to know how to do image mapped rollover buttons in dreamweaver?
Cool map of the world. Nice Job!
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?
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:
image_rollover_solar_system_180.php
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.
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.
Is it possible to get a psd-file for the world map?
Ive tried this effect using stylesheets but given up due to compatability... this seems to work cross browser though. Many Thanks
Great CSS world map
Rollover world map that aint javascript or flash - about time !
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.
More CSS related to this script:
CSS vertical numeric keypad. Stylish CSS vertical numeric keypad. How about this for a funky css navigation system. Not a single line of flash to be seen!
CSS World Map Rollover. 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.
Transparent Vertical Menu. This vertical golf menu uses a simple PNG image to give some transparency so that the image behind can be seen. Creating a navigation menu such as this gives a sense of depth (foreground and background). It looks quite trendy but is really simple to produce.
The background image is of the famous golfer "Ben Hogan". He pioneered the famous golf swing and is still considered one of the greatest golfing legends of all time.
This menu works in all common browsers and is constructed with CSS and Xhtml only.
Dark Blue Web Template. This simple website template took less than 30 minutes to put together. It is just a simple example of positioning div tags to get the required structure for your website. Once your website has got the required structure, it is then possible to experiment further with images and colours.
Matt Cardle Vertical Menu. 2010 Xfactors Matt Cardle Menu. This vertical menu shows how a png image can be used to create a great looking feature to enhance your website.
CSS Navigation:
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 ...
![]()
4.3 / 5 - 53 Ratings
CSS World Map Rollover
I made the UK rollover map las ...
![]()
4.4 / 5 - 43 Ratings
Huge Expandable Horizo ...
You may be thinking that this ...
![]()
4.9 / 5 - 19 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
![]()
4.5 / 5 - 15 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
![]()
4.4 / 5 - 14 Ratings




