expatCanuck Posted October 31, 2011 Report Share Posted October 31, 2011 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 Quote Link to comment Share on other sites More sharing options...
newseed Posted November 1, 2011 Report Share Posted November 1, 2011 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. Quote Link to comment Share on other sites More sharing options...
expatCanuck Posted November 1, 2011 Author Report Share Posted November 1, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.