Introduction
Image maps are an intuitive user interface enhancement that adds style and sizzle to engage the interest of new visitors to a site.
Usage of image maps in ezwebin (eZ Website Interface, one of the packages you can choose when installing eZ Publish) is self obvious to experienced developers after the first few times around. Finding the info or the time to do it the first time around may be off-putting the chore for busy developers.
This quick intro will hopefully pique some interest in this powerful out of the box feature and lead to more engaging sites. The usage is indeed simple. A few external links are included for complete newbies to the html <map> tag.
Pre-requisites and target population
Requires ezwebin extension with demo content installed. You can choose this package when installing eZ Publish. The full name is eZ Website Interface. Banners are included by default only when demo content is installed.
The first and last lines are the key
Middle section defines the regions :
<map id="#banner_map" name="banner_map">
<area shape="rect" coords="12,7,243,110" href="http://cms-software-review.toptenreviews.com/index.html" alt="Award Winning eZ Publish" title="Award Winning eZ Publish" />
<area shape="rect" coords="251,31,498,153" href="http://lakedata.net/index.php/eng/Knowledge/eZ-Publish/eZ-Publish-the-100-percent-solution/" alt="100 percent solution for Web Content" title="100 percent solution for Web Content" />
<area shape="rect" coords="512,13,744,162" href="http://ez.no/customers" alt="Client base" title="Client base" />
</map>
The 'name' attribute should always have “banner_map” as value. Indeed, once the map is applied (see further below : “Applying the map”), eZ Publish automatically refers to it by the “banner_map” name, from the <img> tag. Easy.
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, http://www.w3schools.com/TAGS/tag_map.asp
Simple Image Map Generation
http://www.image-maps.com/
This online image map generator can quickly bring newbies up to speed by supplying examples via automated code generation.
Applying the Map
Once you have generated the HTML code for the imagemap, applying it goes through content edition. From the administration interface, navigate to “Media Library > Images > Banners” content location. You will see listed, as children, the banners associated to the main landing pages. Edit the one you would like to modify, fill-out the “Image map” field with the image map prepared earlier, and publish. This is done !
Here is how it looks, using the banner found here :
Conclusion
Like practically everything else in the eZ Publish universe, image maps are simple when you know how to use them. The usage is simple enough and hopefully now documented for easy access to newcomers who may be interested in this functionality.
Resources
This tutorial is available for offline reading in PDF format : Doug Brethower - Image Maps in eZ Website Interface - PDF version
About the author : Doug Brethower
Open source, OS X, social networks, mobile, the cloud. Seeking the 5GL, user programmable interface for information access. Together, we will make it happen.
License choice
GNU Free Documentation License (GFDL) http://www.gnu.org/copyleft/fdl.html