Popups & Things

Information Map

Found this at CSS Play and have altered it slightly from the origional code (below) just to fit in with the colour theme of the site.

Hover the mouse over the black squares to see a pop-up information box about the particular place of interest. The pop-up box is styled to look as though an arrow is pointing from the place of interest to the photograph and descriptive text.

The code is easy to adapt for your own needs, I added another city (Aberdeen) in a matter of minutes. If you use this on your site please link to the authors site.

CSS

/* setup the background image of the British Isles */
.uk {padding:0; margin:0; list-style-type:none; background:#fff url(../graphics/britain.gif); width:300px; height:350px; margin:50px 225px 100px 225px; position:relative; z-index:100;}
/* move the text off screen */
.uk li a {text-indent:-999px; display:block; width:8px; height:8px; background:#000; position:absolute; line-height:8px;}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.uk li a em {visibility:hidden; position:absolute;}
/* position the square markers */
.uk li a.bs {top:288px; left:190px;}
.uk li a.ln {top:280px; left:240px;}
.uk li a.sw {top:282px; left:162px;}
.uk li a.nt {top:235px; left:210px;}
.uk li a.gl {top:130px; left:148px;}
.uk li a.bf {top:172px; left:112px;}
.uk li a.du {top:220px; left:105px;}
/* move the text back into view on hover */
.uk li a:hover {background:#600; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;}
/* hack for IE5.x */
* html .uk li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:150px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;}
/* hack for IE5.x */
* html .uk li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.uk li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.uk li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#600; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}

HTML

<ul class="uk">
<li><a class="ab" href="#nogo">Aberdeen<em><img src="images/Aberdeen.jpg" alt="Parish church of Old Machar" title="Parish church of Old Machar" />One of the first churches in Aberdeen and the parish church of Old Machar, the building in its present form dates from the 1520s.The church website has a wealth of information about the early history.<span></span></em></a></li>
<li><a class="ab" href="#nogo">London<em><img src="images/london.jpg" alt="View of London" title="View of London" />London has the greatest concentration of major attractions in Britain and boasts four World Heritage Sites.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Bristol<em><img src="images/bristol.jpg" alt="View of Bristol" title="View of Bristol" />Bristol is an exciting city, overflowing with intriguing, traditional and occasionally off the wall things to do and see.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Swansea<em><img src="images/swansea.jpg" alt="View of Swansea" title="View of Swansea" />Swansea, Wales' City by the Sea and birthplace of Dylan Thomas and Catherine Zeta Jones, is a lively and vibrant maritime city and regional shopping centre.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Nottingham<em><img src="images/nottingham.jpg" alt="View of Nottingham" title="View of Nottingham" />Some of the most popular places of interest with visitors are Nottingham Castle Museum and Art Gallery, the historic Lace Market area and the Caves.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Glasgow<em><img src="images/glasgow.jpg" alt="View of Glasgow" title="View of Glasgow" />One of Europe's leading cultural capitals, Glasgow has an enviable portfolio of internationally renowned museums and galleries.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Belfast<em><img src="images/belfast.jpg" alt="View of Belfast" title="View of Belfast" />The capital of Northern Ireland combines fine Victorian architecture, a fascinating industrial heritage and beautiful scenic surroundings.<span></span></em></a></li>
<li><a class="ab" href="#nogo">Dublin<em><img src="images/dublin.jpg" alt="View of Dublin" title="View of Dublin" />Dublin has become a fashionable and cosmopolitan destination, yet remains one of Europe's more intimate capital cities.<span></span></em></a></li>
</ul>