Using Image Map to simulate Tabs on a screen

[zwart]

Is there an easy way to create Image Maps to simulate clicking through Tabs on a screen?

[KevinDAmery]

I don't think so, at least not and have it behave smoothly. You could add the image map easily enough with the image of the tabs, but image maps aren't really designed to swap one image out for another. You'd probably be better off trying to set something up with javascript and CSS.

[Adrian Durand]

Hi,

I've used a similar process, and in the image map I added a region for each tab on the screen image.
Clicking on the "tab" in the image jumps to the help page containing the tab, and displays the relevant information.

It does work very well, and impressed our sales / marketing team, so could well be worth trying.
As Kevin said, it's not neccessarily the smoothest of processes, but it works.

Adrian

[TheGreatAndPowerfulOz]

I don't know if anyone here would be interested in a JavaScript solution to actually creating tabs based on topic headings, but you may want to check out http://www.barelyfitz.com/projects/tabber/.

I've implemented this solution in my WebHelp project and it works phenomenally! It allows me to split up my topic content by "categories" of sorts and thus take up less room on the screen at any point in time, particularly when the topic is first accessed (I prefer a "just the facts, ma'am" approach to the initial view of the topic). A new tab is created on the fly for as many <h2> or other heading elements as you have for a given topic.

Another nice thing about the coding behind this approach is that it allows one to tweak their print stylesheet so content is displayed in a linear (top-to-bottom) fashion, rather than as tabs, in PDF or hard copy output. I came up with some fancy-pants JavaScript code of my own which works in conjunction with the "tabbifier" code to allow the user to specify *which* tabs to print (see a screenshot of the print interface, below).

PrintSample.png

Of course, my own JS code is super-secret and could never be revealed to anyone , but I just wanted to offer up a sampling of what could be done with the "tabbifier" JS code — kudos to the BarelyFitz Designs team!

Regards,