EverWeb Codebox

Simple Image Map

Create a Simple Image Map

Text Box Hyperlinks

An example of a simple image map is shown to the right...


The screenshot to the left shows the icon for the Audio Button player with an empty text box dropped over it.


The text box is selected and the link set in the Link inspector.


Simple - yes?

Map Markers

These map markers are created using CSS. The code includes the title attribute so that, when the mouse is hovered over a marker, the tooltip text appears. The markers are also hyperlinks to other pages.

HTML

<a href="#"><div class="circle" style="background: #FF0000" title="Tooltip Text"></div></a>

Change Tooltip Text to the required content and replace the hash sign with the URL to the target page.

The background color of the marker is changed by entering a different hex color number. For a transparent circle with border only, delete this part of the code...

background: #ff0000

The styles used are shown below and should be pasted into the Head Code box in the Page inspector.

Note that, when changing the size, the value for border radius is half that of the width or height.

CSS

<style type="text/css">

.circle {

     width: 20px; /* change all values marked in blue to increase/decrease the marker size */

     height: 20px;

margin:0;

padding:0;

     background: transparent;

     border-radius: 10px; /* add all vendor prefixes if required */     

     border:2px solid #FFFFFF; /* border width, style and color. for no border use border:none */

}

</style>

Text box image map link
Image Map in EverWeb