Javascript Text/Image manipulation

[Tricky]

Help!? - I am currently redeveloping one of my websites and have started to attack! the menus...

I want to have a image (the button) which I am displaying on screen within a table:
<td width="10%"><a href="loadpage.htm" OnMouseOver="ypSlideOutMenu.showMenu('menu1');hide me();" OnMouseOut="ypSlideOutMenu.hideMenu('menu1');showm e();"><img src="http://mysite.com/images/stdbutton.gif" alt="Menu1" /></a></td>

The button is a plain graphic I.e. {______}
What I want to do is overlay some text on top of the image I.e. {_MENU_}

Therefore I can have one image to reuse on my sites without defining one for each menu option.

[punky]

Originally Posted by Tricky

Help!? - I am currently redeveloping one of my websites and have started to attack! the menus...

I want to have a image (the button) which I am displaying on screen within a table:
<td width="10%"><a href="loadpage.htm" OnMouseOver="ypSlideOutMenu.showMenu('menu1');hide me();" OnMouseOut="ypSlideOutMenu.hideMenu('menu1');showm e();"><img src="http://mysite.com/images/stdbutton.gif" alt="Menu1" /></a></td>

The button is a plain graphic I.e. {______}
What I want to do is overlay some text on top of the image I.e. {_MENU_}

Therefore I can have one image to reuse on my sites without defining one for each menu option.

You can define layered panels in HTML, like this:

<div id="Menu1" style="position:absolute; width:75px; height:20px; z-index:1; left: 50; top: 100px; Some Menu Text</div>

The z-index is greater than 0 so should appear above the image. The position absolute means it is positioned properly. You should have a div with you image as well so you have full control over that as well.

HTH

[Richard M]

Just a note about absolute positioning: be very careful with it, test it in at least two different browsers and at as many screen resolutions as possible.
For example, some text positioned 100 pixels from the top of the screen might look fine in IE but most other browsers tend to use extra line breaks around headings and things so the text might actually appear on top of other text, making it look pretty bad.

[Tricky]

Cheers guys ... Playing with this now!

[bopdude]

Is anyone else having to scroll horizontally to read \ view this thread seems to me looking at that some ones user details have gotten misshaped \ sized

EDIT : It's punkys details that are offset to the left of everyone else's, is this just my side ?

EDIT EDIT, its the left and right borders of punkys posts in my window

Anyone ????

[Matth]

I'd be inclined to use background, either a table cell background (Netscape/IE extension to HTML) or a style background applied to whichever element it works best with - a few other style parameters would be needed, to size the element and centre the text within it.... with luck, it would degrade gracefully in non-CSS older browsers.