Css rollover uk map template

CSS code in acion:

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

Description: Free rollover map of the United Kingdom. Use this smart css rollover on your own website so that visitors can quickly tell you where about in the UK they are from. This css effect is an illusion which could, potentially take any form of animation you wish. I use the word illusion because the brain immediately believes that something clever is going on.

With a little time and patience you could replicate this simple css rollover map, or you could just copy and paste these images and code.

Category: Image Rollover

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

Rate this script: Rating: 4.3 / 5
55 ratings.


Comment from: Niall

That should be Northern Ireland, dude.

Posted on: Saturday 22 Oct, 2011
Comment from: Jeorge Peter

Amazing! Its such a great thing to know that I can use css rollover to view the location wherever I wanted to look at my page where am I exactly located.

Posted on: Tuesday 22 Mar, 2011
Comment from: Uk Maps

Great UK map template. The colour purple looks quite funky over the United Kingdom!

Posted on: Tuesday 01 Jun, 2010
Comment from: Glenn

One of the things that frustrates me with these things is calculating the top/left coordinates. I do it through trial and error. Is there a way to do it more efficiently ?

By the way, to reduce some of the headaches of trying to duplicate hover effects in IE - use an XHTML strict doctype.

Posted on: Thursday 20 May, 2010
Comment from: John (webmaster)

The rollovers are basic hyperlinks, so once clicked can take you to any info page of your choice. If you want info on the uk to apper as a pop-up whilst hovering(mouseover)then I will have to spend a little time coding this for a future addition to the site.

Keep coming back to look!

Posted on: Monday 05 Apr, 2010
Comment from: TS

This is really a great effect, that I'd like to make use of. Is there anyway to make the areas that appears on rollover link to various other pages? (Like an info page on Wales, one on England, etc..) Thanks so much.

Posted on: Sunday 04 Apr, 2010
Comment from: John


This example is just using the html shown. The CSS code gives each part of the html some rules to follow. Each hyperlink has had its position, size and background image formatted to form part of the uk map. Finally we add a hover state in the CSS code which makes a new background image appear (when mouseover)to create an animation or hover effect

You MUST use all the CSS, Html and images to make the effect work.
Good Luck... John

Posted on: Wednesday 24 Mar, 2010
Comment from: Andy

Thanks for your reply - can you confirm that the only HTML required for this UK rollover map is just an hyperlink? Is your version using coordinates in an image map to determine which areas have clickthroughs?

Thanks again!

Posted on: Tuesday 23 Mar, 2010
Comment from: John

Just change the text-indent in the css code to something like: -999px. This should move the text off screen and out of eye shot.

Posted on: Monday 22 Mar, 2010
Comment from: Andy

This is just what I've been trying to do for ages! One quick question (I'm still fairly new to HTML/CSS) but when I view the HTML all I can see is the code for the <ul> (i.e. text next to the regions). I don't want text next to the regions on my version - therefore what is the HTML code for applying the CSS? Sorry and thanks!

Posted on: Monday 22 Mar, 2010
Comment from: Zhanna

Remarkable menu. Thank you!

Posted on: Tuesday 26 Jan, 2010
Comment from: Caroline Bishop

These examples go way beyond the tutorials at W3C schools. You have given me some great inspiration!

Many Thanks

Posted on: Friday 13 Nov, 2009
Comment from: Sam

Ive tried in both firefox and ie to no prevail. I've basically tried to add more regions to the map and i cant figure out how to code where they should display upon rollover, obviously once i get the original map to show first.

Posted on: Friday 16 Oct, 2009
Comment from: John

What browser are you trying to view the map in?

Posted on: Friday 09 Oct, 2009
Comment from: Sam

I have tried to use a variant of this map & code but i cannot get it to work even when using your code. For some reason the initial map does not display and the rollover images will not line up properly. For testing purposes i have told the html to draw its css by using this "<style type="text/css">@import url(css.txt);</style>" How did you figure out where the rollover images should display? How would i make the initial map show? Thanks

Posted on: Wednesday 07 Oct, 2009
Comment from: John

Fine piece of CSS.

Posted on: Tuesday 25 Nov, 2008
Comment from: Mark

This is a great CSS Rollover map! I thought that this kind of image rollover could only be produced using Flash, Javascript or Fireworks. I cant believe the html code is just hyperlinks! Great Script!

Posted on: Tuesday 25 Nov, 2008
Comment from: Ricardo

Nice effect! I'm trying to do something similar with css but for a world map. This is really helpfull though. Thanx

Posted on: Friday 14 Nov, 2008

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


More CSS related to this script:

Multi Colour Buttons 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! Red Green and Blue Menu Red Green and Blue Menu. These three css menus use subtle shades of red, green and blue, just enough to add a touch of class to any website. When you come to copy the code, only copy the css and xhtml that corresponds to the colour which you have decided to use. Image Rollover Solar System Image Rollover Solar System. This example of css uses one main image for the whole solar system and then 9 separate rollover images for each planet. The separate images are carefully positioned using the background-position command. This technique is very simple to do using css, just maybe a little time consuming to adjust every image into position. Some of the images, due to the size of the planet and proximity to the next, needs to use the z-index attribute to overlap or share space. Remember only use z-index on a div which uses the position:absolute attribute. Green Push Button 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. Diagonal Horizontal Blue Menu 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.

Top of Page go back to top of page

More Simple colour schemes for UK map:

free simple uk map free simple uk map free blue uk map free green uk map

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:

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

free css design inspiration
What is CSS?