Ezwebin is the eZ Publish Web Interface extension that simplifies creating and maintaining web content in a traditional CMS style.
eZ Flow is another such extension developed and maintained by the eZ Systems developers. eZ Flow explores the very latest design features like device dependence and time scheduled publishing-unpublishing.
Both extensions are so feature laden they would require a book to describe the inner workings and how to use them. The code developers show no inclination to write such a book. Even if they commissioned one, the frantic development pace would outdate the book shortly after it was put to ink.
If there is written documentation regarding use of the "image map" feature for banner images in the ezwebin extension, I could not dig it up in half a days search. So it was time to go debugging this useful feature to figure out how to use it. I will spare the debugging details, the usage details are below.
Image Maps Definition
Image maps are clickable overlays of html images on a web page that act as hyperlinks to other content. The MAP tagging is standard html, defining the regions is a bit of an art form. More MAP tag info at w3schools.com
Simple Image Map Generation
This online image map generator quickly brings newbies up to speed by supplying examples via automated code generation.
A Picture is Worth a Thousand Words
The image map for the banner on the front page of lakedata.net circa December, 2010.
image map for ezwebin banner
Sample Code
<map id="#banner_map" name="banner_map"> <area shape="rect" coords="1,24,125,129" href="http://innovation" alt="A Decade Makes a Difference" /> <area shape="rect" coords="304,2,446,147" href="http://Crazy-Apple" alt="Crazy Apple" /> <area shape="rect" coords="632,17,759,133" href="http://Mobile" alt="Mobile Future is Here!" /> </map>
Because the CSS is custom for each page, a standard naming convention of #banner_map is used.
That was the missing piece of information that required a debugging session to discover.