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
Comments:
Comment from: NielsIs it possible to get a psd-file for the world map?
Comment from: SimonIve tried this effect using stylesheets but given up due to compatability... this seems to work cross browser though. Many Thanks
Comment from: Wee manGreat CSS world map
Comment from: BuzzRollover world map that aint javascript or flash - about time !
Comment from: marianaWow! 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:
Simple CSS Cloud Form Design. Forms can look dull and boring. Using little CSS code they can be given depth and colour. This simple Css desing can be easily modified to suit your designing needs. Try changing the background image to relate to the theme of your website.
Green Css Button. This green 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.
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!
Diagonal Horizontal Blue Menu. This horizontal menu took quite a few hours to perfect but hopefully, the result is quite effective. The only way to create this effect (and I tried all of them)was to change the width, background-image and z-index apon the hover state. If there are any other ways of acheiving this effect with CSS please let me know.
Green Push Button. This green push button shows a little more movement than other CSS buttons. The dimentions may have to be tweaked a little when altering the button text but just have a play with the CSS and see what you can come up with yourself. There are more Cascading Style Sheets on this website for you to view and use on your websites... just take a look.
Latest CSS:
•
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
•
Transparent Vertical Menu
This vertical golf menu uses a simple PNG image to give some transparency so tha ...
Added: Saturday 17 Apr, 2010
•
css3 Border Radius
CSS Border radius achievable with CSS3.
I do love the idea of creating corner ...
Added: Tuesday 06 Apr, 2010
•
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
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
Green blue rating
Ever wondered how to replicate ...
4.2 / 5 - 18 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 10 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.4 / 5 - 9 Ratings
Image Rollover Solar S ...
This example of css uses one m ...
4.9 / 5 - 7 Ratings
CSS Tags:
Website Template Yellow Color Grey Chrome Text-decoration Green Rounded Z-index Purple Metal Url Display Rollover Tabbed Centering Background Colour Float Border Texture Horizontal Watermark Corner Light Text Gold Forms Css Animation Cyan 3d Icon Style Tutorials Design Button Expandable Transparency Templates Vertical Flash List Cascading Hypertext Blue Alignment Photo Gallery Css Solar System Navigation Red Image Style Sheets Png Border-radius Width Orange Script Blog Pink Opacity Depth Block Css3 Positioning Menu Menu Drop Down Font Hover Rating Sliding Doors Dark
