Cable Forum

Cable Forum (https://www.cableforum.uk/board/index.php)
-   Internet Discussion (https://www.cableforum.uk/board/forumdisplay.php?f=25)
-   -   Javascript Text/Image manipulation (https://www.cableforum.uk/board/showthread.php?t=15657)

Tricky 01-08-2004 21:21

Javascript Text/Image manipulation
 
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 01-08-2004 23:42

Re: Javascript Text/Image manipulation
 
Quote:

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:

Code:

<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 02-08-2004 05:16

Re: Javascript Text/Image manipulation
 
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 02-08-2004 21:40

Re: Javascript Text/Image manipulation
 
Cheers guys ... Playing with this now!

bopdude 02-08-2004 22:18

Re: Javascript Text/Image manipulation
 
Is anyone else having to scroll horizontally to read \ view this thread :shrug: 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 :shrug:

Anyone ????

Matth 02-08-2004 23:26

Re: Javascript Text/Image manipulation
 
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.


All times are GMT. The time now is 03:56.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2026, vBulletin Solutions Inc.
All Posts and Content are © Cable Forum