Not sure what I’m getting at with the title to this entry – wasn’t there a film called the walls have eyes? Or was it hills? ‘The walls have hills’ ... that makes no sense at all …

Now look at me. Almost five lines written and not a single reference to what this post is actually about. So without further a do …

I’ve just finished a website via the View Creative bunch called ‘Walled Towns’ (www.walledtowns.co.uk). It’s a site about all the walled towns in Wales and also about the walls around Chester – it’s a tourism thing. And when I say walls, I don’t just mean the ones you have at the front of yer garden with a gap for a gate. No. I mean walls as in castle type walls. Used to keep out Vikings and other pests back in the ‘olden days’. When folk had big beards and all ate sat around a big wooden table with maidens sat on there knees, smashing flagons of ale together and tearing lumps of meat from baked pigs with there bare hands etc. etc. – you get the picture.

Yeah. So. Anyway. The site, apart from having a nice design and some nice flash, has a little map feature that uses some nice show hide thing using the CSS :hover behaviour. Hand coded by myself. Thought I’d share it wid yer …

The idea / thinking is that a visitor to the site may not actually know where North Wales is in relation to the UK. They then would like to know where the individual walled town locations are in relationship to North Wales / Chester, and also perhaps a major road that links them. From there they would want to either visit the individual page relating to the point on the map, or see a large detailed map to plan a possible route to reach the destination/s. I know, I know. I’m confused as well …

I’ve basically covered all the above requirement in a single CSS driven kinda ‘map module’.

Here’s the HTML:

<div id="map">
<h3>locate our walled towns</h3>
<ul>
<li>
<a title="Beaumaris // North Wales" class="beaumaris" href="/our-walled-towns/beaumaris.htm#beaumaris">
<span>Beaumaris</span>
</a>
</li>
<li>
<a title="Caernarfon // North Wales" class="caernarfon" href="/our-walled-towns/caernarfon.htm#caernarfon">
<span>Caernarfon</span>
</a>
</li>
<li><a title="Chester // North West England" class="chester" href="/our-walled-towns/chester.htm#chester">
<span>Chester</span>
</a>
</li>
<li>
<a title="Conwy // North Wales" class="conwy" href="/our-walled-towns/conwy.htm#conwy">
<span>Conwy</span>
</a>
</li>
<li>
<a title="Denbigh // North Wales" class="denbigh" href="/our-walled-towns/denbigh.htm#denbigh">
<span>Denbigh</span>
</a>
</li>
<li>
<a title="+ View Large Map" class="lrg-map" href="/pics/map-big.jpg" rel="lightbox">
<span>+ View Large Map</span>
</a>
</li>
</ul>
</div>

and here’s the CSS:

#map { height: 207px; position: relative; background: url(../images/left-map-back.jpg) no-repeat 14px 0; margin-bottom: 8px; }
#map h3 { font: 1.2em Arial, Helvetica, sans-serif; color: #fff; position: absolute; top: 11px; left: 25px; z-index: 5; }
#map ul { display: none; background: url(../images/left-map-hover.jpg) no-repeat; position: absolute; top: 0; left: 14px; z-index: 4; height: 207px; width: 200px; }
#map:hover ul { display: block; }
#map ul li { width: 10px; height: 10px; }
#map ul a { display: block; position: absolute; left: 30px; top: 30px; width: 10px; height: 10px; background: url(../images/blank.gif) no-repeat; }
#map ul a.beaumaris { top: 60px; left: 48px; }
#map ul a.caernarfon { top: 78px; left: 41px; }
#map ul a.conwy { top: 59px; left: 65px; }
#map ul a.denbigh { top: 81px; left: 92px; }
#map ul a.chester { top: 70px; left: 118px; }
#map ul a.lrg-map { top: 170px; left: 60px; width: 100px; height: 25px; }

The way it all works is that you have 1) a div (id of #map) with a fixed height and width and the background image of the first map. Within that div you have a 2) ul tag with the same width and height as the div, and that has a background image of the close-up map. In the ul you have 3) li tags containing 4) a tags that are absolutely positioned in relation to the ul tag to create links over each point relating to each walled town, and also 5) a link in the bottom right to the large detailed map.

You basically set the ul to display:none, and then set the ul to display:block when you hover over the div (with an id of #map).

Add a sprinkling of Bubble Tool-Tip magic for the a tags, and utilise LightBox for the large map link, and Bob’s yer auntie’s uncle’s nephew’s dog … a working roll-over map module. Loads of information in as fewer clicks as possible.

If I’ve completely lost you, check out the working model at www.walledtowns.co.uk and investigate further. I recommend the Firefox Web Developer Tool Bar and Firebug when sussing out a code on a site, btw …

One thing: the feature is slightly glitch-y in our old friend IE6 – anyone got any suggestions that may fix it? ...

On another side note, I’m having to use:

pre { white-space: -moz-pre-wrap; }

for Firefox (2.0.0.4) rather than just ‘pre-wrap’ – thought it may be supported??? ...