Background to hyperlinks?

by "Hilma" <Hilma(at)hilma.freeserve.co.uk>

 Date:  Sun, 31 Mar 2002 08:38:10 +0100
 To:  <hwg-techniques(at)hwg.org>
  todo: View Thread, Original
Hi all-
I'm not sure I'm allowed here (being a beginner) - but i've read loads of
books and got no help on one problem, so i'm hoping someone here can answer
it.
I suspect the answer will be "don't do it" - as no-one else seems to so it,
there must *be* a problem with my aim; but i can;t see it; unless it is
simply impossible :-(

What i want to do is -
Define, via a css, a background image to a hyperlink;
i.e. I want to have a single (blank) button image for my site, and overlay
hyperlinks on it as the text.
So it looked and acted exactly as a navigation button, but the image was a
background to a text-link :-)

I got it working in IE6; no problem, it did exactly what i wanted;
Then i branched out into the exciting world of "browser compatibility" (
only NS6 and Opera )- and things went pear-shaped;
the NS background button-image was only the height of the text on it, rather
that the defined size, and Opera doesn;t show background images - at least,
not to links it doesn't (at least - i cannot persuade it to do so!).

I struggled on, used a "sizing text" to force the NS image to be big enough
(with plans to make it the same colour as the button, or possibly invisible
as i've since discovered the invisibility attribute);
and i declared a background colour for Opera in the same place.
So (using the z-index and also the sequence of declarations) I ended up
with:
a background colour the size of a button, overlaid by
a background image of a button, overlaid by
some spacer-text with a font to force the background image and colour to be
the correct size, overlaid by
my hyperlink.

Which looked ok (but not perfect) in the 3 browsers; but then Opera's
hyperlink didn;t work.
Since then, I've got a hyperlink over a bgColour to work in Opera; but then
i can't figure out the code that i'd already written  to get the whole thing
going as i wanted it (as i don't have a lot of fluency in HTML yet!)

But also, i cannot see that what i want to do is really so extreme; it makes
sense with bandwidth to need only one button, but more, it gives the
flexibility to add more buttons and change the text within HTML, without the
need to go running back to the image-processing package to create new
buttons, and makes changing button style soooo easy.

Please, can anyone tell me either
1/ why i should not be doing this, or
3/ Whether it *can* work successfully and to persevere - and if so, what
technique i should use to
2/ get it working?  :-)

many thanks for any ideas and comments -

hilma
--x----

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA