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

CSS Script Page: Css rollover uk map

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.

CSS Script Page: Css rollover uk map

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!

CSS Script Page: Css rollover uk map

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.

CSS Script Page: Css rollover uk map

Andy

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

CSS Script Page: Css rollover uk map

Hi,
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!
Andy

CSS Script Page: Css rollover uk map

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.

CSS Script Page: Css rollover uk map

Hi,
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!

CSS Script Page: Css rollover uk map

Remarkable menu. Thank you!

CSS Script Page: Css rollover uk map

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

Many Thanks

CSS Script Page: Css rollover uk map

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.

CSS Script Page: Css rollover uk map

What browser are you trying to view the map in?

CSS Script Page: Css rollover uk map

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

CSS Script Page: Css rollover uk map

Fine piece of CSS.

CSS Script Page: Css rollover uk map

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!

CSS Script Page: Css rollover uk map

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

CSS Script Page: Css rollover uk map