[triangle-zpug] Can I make my site logo an image map?

Chris Calloway cbc at unc.edu
Fri Mar 17 20:11:20 CET 2006


Rick DeNatale <rick.denatale at ...> writes:
> I'm using plone to set up a web site for the "Carolinas+" region of
> the International Plastic Modelers Society.  I haven't gone public
> with it yet, but the url is
> http://ipmsr12.denhaven2.com
> 
> My logo is a map of the Carolinas with stars representing the location
> of the chapters in the region.  I've had my chapter contacts have a
> look, and it's been suggested that it would be nice if those stars
> could be used for navigation.
> 
> I'd like to have a label pop up with the name of the chapter when the
> mouse rolled over one of the stars, and have clicking on a star
> navigate to the folder for that chapter.
> 
> Is this easy/hard to do, any suggestions?

Not too hard.

First, wow, that's a big logo. It takes up half the real estate in a typical
browser. It would be much better to put in the content body, which would be a
lot easier to use there as an imagemap than instead of the portal logo. Most
people won't get navigation to anything other than the site home in the logo
anyway. It's counterintuitive. Whoever suggested this obviously isn't a UI
expert. The customer rarely is. But the customer pays the bills, so...

Realize that the portal logo is normally set as a background image in CSS. That
makes it kind of magic (image replacement in CSS). But, of course, background
images in CSS are not imagemaps. So first, we have to turn off the CSS which
renders the portal logo as a background image of some tag in our main_template.

The CSS id we are looking for is #portal-logo. You can find that by using
FireFox Developer Tools while looking at your site. Then you can find where that
CSS id is by searching the portal_skins folder in the ZMI. It's in
portal_skins/portal_styles/public.css:

#portal-logo {
background: url(&dtml-portal_url;/&dtml-logoName;) no-repeat;
border: 0;
margin: 0.75em 0em 0.75em 1.5em;
padding: 0;
}

So there's some DTML which fetches the value of logoName from baseProperties,
which you've presumably set to your logo image already since it is displaying.
The the CSS is *dynamically* rendered with that value for a background image of
the portal logo.

Wow, Plone is cool. Dynamic CSS. Who knew?

So we need to turn that portal logo off since we want to use an imagemap instead
of a background image:

#portal-logo {
border: 0;
margin: 0.75em 0em 0.75em 1.5em;
padding: 0;
}

Of course, we don't want to do that by customizing public.css in the ZMI. That
wouldn't be manageable site code. We couldn't tar it up and distribute to a
customer. We couldn't put it under version control. What we'd want to do is
create a site skin product which registers a CSS which overrides #portal-logo
with the css above.

If you want to write a site skin product, there's plenty of tutorial on how to
do this on plone.org. Or you can go to a Plone Boot Camp. :)

Now, we've gotten rid of the normally magical portal logo image. We want to put
an imagemap where it used to be, right?

Well, we don't want to change main_template. That's a "third rail" thing to do,
as Joel Burton says. You will die if you do that. Especially if you upgrade your
Plone instance in the future.

What you want to do is customize the macro main_template calls in order to
render the portal logo. Where's that? Well, the logo macro is called
portal_logo, as main_template tells me when I search for #portal-logo CSS id
which styles it according to FireFox. Then searching the portal_skins folder for
something containing portal_logo shows me that it is in
portal_skins/plone_templates/global_logo.

So, in your site skin product, you need to create a global_logo ZPT with your
client-side imagemap. Something like:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">

<body>

<!-- THE PORTAL LOGO DEFINITION -->
<h1 id="portal-logo" metal:define-macro="portal_logo">
    <map name="ipms_map">
        <area shape="rect"
              coords="20,27,82,111"
              href="raleigh.html">
        <area shape="circle"
              coords="129,113,29"
              href="columbia.html">
        <area shape="rect"
              coords="21,158,170,211"
              href="mailto:webmaster at ipms.org">
        <area shape="default"
              nohref>
    </map>
</h1>


</body>
</html>

OK, how much of your client's fee do I get?

Cheers, Chris Calloway





More information about the triangle-zpug mailing list