Tuesday, February 15, 2011

Popup Image/Text

University somehow uses the software called Sitecore for WCM(web content management), it's a dot net application using IIS. wonder why away from *nix open sources?

Anyway I have to use Sitecore to put up our Organization chart, good thing is that sitecore has the Edit Html option even though taking me some time to get famliar with the basic stuff in Sitecore.

The Chart is from Powerpoint since it was prepared for the presentation. We have adobe CS5 but looks the Powerpoint picture is the way to go. Sitecore limits the picture size to 700px, so the quality is kind of bad.

How to get better presentation of our organization chart based on the ppt converted picture:

1. Mouseover to get the original size, see effect1. This one is from Dynamicdrive.com (a super cool DHTML site)
2. Mouseover to magnify the portion, see effect2. This is also from Dynamicdrive.com, using jquery from google api libray , very cool.

The above effects have a shared weakness, can not get hotspot links, since it's a whole picture, I can only think to make link is doing hotspots.

So finally I did use CSS and javascript to have the CSS popout, as shown in effect3 , this one is ok for click the hotspots.

If ever anyone interests in the code, you can download here.

If you have any cool ways to do those thing, please drop me a link/links, appreciated.

No comments:

Post a Comment