text over a usemap image ?

[expatCanuck]

Greetings -

I'm modifying my site to implement a tabbed notebook metaphor.
I've developed a handful of notebook .jpgs, and example of which
is here

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

As an initial approach, I'm using a usemap to facilitate 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, might I have to (learn and) create some javascript
to implement the tab navigation?

Thanks,

- Richard

 

[Absolution]

I never tried this myself, but I would think that CSS would allow you to have text over such an image, possibly using its float commands. But using a usemap does make it harder. Personally I would break the images apart and align them using divs.

 

[expatCanuck]

I never tried this myself, but I would think that CSS would allow you to have text over such an image, possibly using its float commands. But using a usemap does make it harder. Personally I would break the images apart and align them using divs.

Turns out that a 'Div on Div' approach worked. The solution came when I realized that I had neglected to specify 'px' after the numeric position parameters, and so the text Div that I had defined stayed stuck at the top left.

 

[Absolution]

Turns out that a 'Div on Div' approach worked. The solution came when I realized that I had neglected to specify 'px' after the numeric position parameters, and so the text Div that I had defined stayed stuck at the top left.

The solution usually ends up being that! lol. CSS is easy to learn but almost impossible to master lol.

 

[PixelPusher]

Using an image map seems to be an outdated solution. The only benefit I see to it is the fact that you can create no-rectangular map areas (clickable sections) as opposed to anchors that can only be rectangular.

My suggestion:
Set the image as a background-image for an element
Place the anchors as needed within this parent element using absolute positioning