Image map in Zen Foundation Header

[Michael Babb]

Is there a way to add an image map into my Zen Foundation header? I have several images that I want to include in the header that I want the user to be able to click on like facebook and twitter links.

Any thoughts?

[Darryl Duke · Accepted solution]

Here's a working example: http://www.stepstonetech.com/display/help/Dynamic+Image+Map+and+Hot+Spots#Sample

Have a look and see how the macros are nested (the wiki markup reveals the contents of the parameters).

I did notice that this macro set requires the images to be attached to the page where they are viewed. So it's not going to work in the header (because of http://www.stepstonetech.com/display/help/Broken+Images+and+Links+On+.zen+Pages). I've raised a ticket to fix this in a future version.

Speaking of which, 5.2.7 will be released March 4 (iffy whether this patch will make it in time, however).

You might give the Active Image macro a try (http://www.stepstonetech.com/display/help/Active+Image). It's not as fancy as the dynamic image maps, but does work with images on other pages and spaces.

Cheers!

[Michael Babb]

Darryl,

Thanks for the information. I was trying to reference the images from a separate page, which explains why it wouldn't work in the page. I was able to get it working once I attached the images to the page.

Thanks for all your help. I'll look forward to future releases in hopes that I can get this working in the header in the future.

[Michael Babb]

Darryl,

Thanks. I was able to get the entire image to show in the header now. Unfortunately I still wasn't able to get the Dynamic Image macro working. I even tried it in the body of a page with no luck. Any change there is a bug in it too?

Also, when do you expect Zen 5.27 to come out?

Thanks for all your help.

[Darryl Duke]

Hi Michael,

Well, it turns out you've uncovered a bug in Zen. We'll include the patch in Zen 5.2.7, but in the meantime, you can add this CSS to your brand, which should resolve the problem:

#wrapper #header #zen-header {
height: $zenHeaderHeight;
}

This will follow whatever height you have specified in the Brand Designer for the header.

Please let me know whether that does the trick!

[Michael Babb]

Darryl,

Thanks for the help. I've still not got it to work though. I have tried using the Wrap and also adding a Clear after the image with no luck. Unfortunately, I'm not savvy enough to know how to add the CSS to put the minimum height on the element. Do you happen to have an example of how this has been done before for a header? Also, I was able to get an image map to work in the body of the page, just not the header.

What I am trying to do is to add a facebook icon and twitter icon to my header that allows people to click on it and go to our Facebook or Twitter space. We also have a SDVOSB logo that can be clicked on where the user is brought to our profile on the VA website. In essence, I want to add and position a couple of clickable images on top of my header...

I feel confident that I can get it to work if I have an example of some sort.

Thanks again for all of your help.

[Darryl Duke]

Hmm... a couple of ideas:

I wonder if you're floating the image right or left, which can cause it to not be calculated in the parent element's height. In this case, try adding a Clear macro after the image.

If you're positioning it absolutely, a similar problem occurs (parent doesn't resize to fit), so you can force the height of the containing (non-floating, non-absolutely positioned element), (put it in a Wrap macro if you need a sizing handle). Or add CSS or JavaScript to put a minimum height on the element cutting of your image.

[Michael Babb]

Sorry for the slow reply and thanks for the help. I've tried using both the Active Image and the Dynamic Image Map and for some reason it only shows the first 20 px or so of the top of my image. Any ideas?

[Darryl Duke]

You can use the regular image embeds, but for more control, here are some Zen macros that might be useful:

• Active Image (for displaying images with hover state that also serve as links, such as the "learn more" button at the bottom of our home page)
• Dynamic Image Map and Hot Spots (for complex images maps like this one)
• Rotate Images (for simple animations that run through multiple images)
• Wrap (to add DIVs and SPANs with lots of styling controls)
• Random Content (for fancy content animations, such as on our home page)

[Darryl Duke]

Hi Michael,

Yes, you can embed images on the .zen.header page (which you can create from the Zen site or space settings admin panels).

However, make sure the images are located on another page. Please read http://www.stepstonetech.com/display/help/Broken+Images+and+Links+On+.zen+Pages for a full explanation and to ensure your headers always display properly.

Cheers,
Darryl