tabbed notebook metaphor - text over usemap image ??

[expatCanuck]

Greetings -

 

I'm modifying my site to implement a tabbed notebook metaphor.

I've developed a handful of notebook .jpgs, an example of which

is here:

 

http://oldwithoutmoney.com/wip/index2.html

 

As an initial approach, I created a usemap to implement tab navigation.

Moving the cursor over a tab shows that the usemap works --

each tab is a link to another page (not yet placed on the site).

 

But just as important is the ability, for any given page, to define

an area in the .jpg where I can place editable text (e.g. - where

the taped photo is).

 

 

Currently, any text I add shows up before or after the entire image

(i.e. - on the black bacground before or after the wood grain).

But if I place the image in the background, that breaks the usemap.

 

Can text be added over an image being used as a usemap and, if so, how?

 

Alternately, do I need to split the tabs into a separate graphic

(in which case, can I seamlessly display the left & right side)?

Or might I have to (learn and) create some javascript to implement

the tab navigation?

 

Any & all insight, best practices & experience welcome.

 

Thanks,

 

- Richard

[newseed]

I haven't really looked at this much but you can still use the tabs as background without any text in the image. You can then apply a transparent image with text overlaying the background. You can also use actual text via html but using positioning.

[expatCanuck]

I haven't really looked at this much but you can still use the tabs as background without any text in the image. You can then apply a transparent image with text overlaying the background. You can also use actual text via html but using positioning.

I've not been able to get usemap to work on a background image, but a 'Div on Div' approach worked.

The 'breakthrough' came when I realized that I had neglected to specify 'px' after the Div's numeric position parameters,

and so the text Div that I had defined stayed stuck at the top left.