Free Css Menus. There are many websites out there that offer free css menus and buttons. We aim to be different. Our Css rollover maps, buttons and menus will show you that with thought and patience, anything is possible with css.

CSS World Map Rollover

The working code:

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.9 / 5

29 ratings.

Comments:

Comment from: Niels

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

Date posted: 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

Date posted: Friday 19 Feb, 2010

Comment from: Wee man

Great CSS world map

Date posted: Saturday 23 Jan, 2010

Comment from: Buzz

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

Date posted: 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.

Date posted: Saturday 23 May, 2009

Read all Comments

Top of Page go back to top of page

More CSS related to this script:

Orange CSS Rollover Button. This orange css button has been refined to contain only one image. Other rollover buttons of this nature would normally contain two images. Here we use the: background-postion command to display the image in four different positions. Why four? Well the normal state (no hover)has both left and right edges which are needed so that the button can stretch with more text. Apon the hover state the button uses another two edges.

Red Horizontal Tabbed Menu. This Horizontal tabbed menu shows the user three different states: Normal, Hover and Active/Selected. This menu is still only using one image and the sliding doors technique.

Icon Yellow Rollover Button. Some visitors to your websites may have poor vision or disabilities which prohibits them from clicking on small buttons easily. This problem is easily remedied with very little css code and minimal effort... and it looks better than your boring old hypertext. Don`t forget that even though scripts like this use images, they are still just hypertext!

Blue Tabbed Horizontal Navigation. This horizontal menu only uses one image. For best results, use this css example on a dark background. Have a look at our other tabbed menus to see which more suits your web page.

Multi Colour Buttons. Have fun using these multi coloured css buttons in your website. Dont forget that our free css button creator utility will be up and running soon!

Top of Page go back to top of page

CSS by Colour:

Red Pink Purple Blue Cyan Green Yellow Orange Light Dark

Latest CSS:

• Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010

• CSS vertical numeric keypad
Stylish CSS vertical numeric keypad. ...
Added: Sunday 03 Jan, 2010

• Red Green and Blue Menu
These three css menus use subtle shades of red, green and blue, just enough to a ...
Added: Thursday 31 Dec, 2009

• 2010 Dark Gloss Nav
If you have a dark website, this glossy nav menu a perfect compliment for it. ...
Added: Wednesday 30 Dec, 2009

• Dark Flash Metal Menu
You may be mistaken for thinking that this menu was created using flash. CSS, ba ...
Added: Monday 30 Nov, 2009

Top Rated:

CSS World Map Rollover
I made the UK rollover map las ...

4.9 / 5 - 29 Ratings

Curved Horizontal Menu
This horizontal menu shows how ...

4.5 / 5 - 16 Ratings

Diagonal Horizontal Gr ...
This horizontal menu took quit ...

4.8 / 5 - 5 Ratings

Diagonal Horizontal Bl ...
This horizontal menu took quit ...

4.6 / 5 - 5 Ratings

Curved white css borde ...
Creating curved corners for yo ...

4.5 / 5 - 4 Ratings

CSS Tags:

Rollover Font Yellow Tabbed Z-index Blue Image Tutorials Text Transparency Border Expandable Photo Gallery Alignment Purple Design Red Vertical Gold Float Width Background Forms Css Hypertext Url Style Menu Flash Pink Button Animation Cascading Website Template Script Menu Drop Down Watermark Css Solar System Rating Green Horizontal Display Colour Text-decoration Chrome Cyan Block Rounded Navigation Orange Png 3d Texture Centering Sliding Doors Hover Positioning Icon Blog Style Sheets Depth Dark Opacity Metal Color Light Grey