Image Links

[rarebit]

Hi,

Simply, i'm wanting to display an image, which is a link, but also has text inside it. The whole thing needs to be the size of the image, but the size is unknown and no javascript allowed.

 

The following does actually do the trick, but i'm after a simpler way...

<div style='position:relative;float:left;'><a href='#'><img src='imgs/block.gif' border='0px' /><span style='position:absolute;left:0px;top:0px;'>Link 1</span></a></div>
<div style='position:relative;float:left;'><a href='#'><img src='imgs/block.gif' border='0px' /><span style='position:absolute;left:0px;top:0px;'>Link 2</span></a></div>
<br />

 

maybe something along the lines of...

<a href='#'><img src='imgs/solved.gif' alt='Test' border='0px' content='Link 3' /></a><br>

But obviously 'content' doesn't work like that...

 

If possible using no div's.

 

 

hmmm... I love asking questions just because in asking them it makes you think...

<a href='#' style='position:relative'><img src='imgs/block.gif' alt='Test' border='0px' style='position:absolute;left:0px;top:0px;z-index:-10;' />Test</a><br>

That might actually do the trick, basically it does, but i'll have to thoroughly test it.

 

But, how do you do it?

[rarebit]

It works, but I can't get the text to center, it appears the problem is the inner div is parented to the a tag and that doesn't get sized until later... or something...

 

 

<a href='#' style='position:relative;'><img src='imgs/block2.gif' alt='' border='1px' style='z-index:-10;' /><div style='position:absolute;left:0px;top:0px;margin:auto auto;width:100%:height:100%;border: 1px solid #7b0118;'>Test</div></a><br>

<br><br>

 

<a href='#' style='position:relative;'><img src='imgs/block.gif' alt='' border='1px' style='z-index:-10;' /><div style='position:absolute;left:0px;top:0px;margin:auto auto;width:100%:height:100%;border: 1px solid #7b0118;'>Test</div></a><br>

or

<a href='#' style='position:relative;'><div style='position:relative;width:100%:height:100%;'><img src='imgs/block.gif' alt='' border='1px' style='z-index:-10;' /><div style='position:absolute;margin:auto auto;border: 1px solid #7b0118;'>Test</div></div></a><br>

 

Things seem to be getting convoluted here, but if I don't have the inner text then the images' alt won't act as link if the image is missing...

<a href='#' style='position:relative'><img src='imgs/missing.gif' alt='Test' border='1px' style='position:absolute;left:0px;top:0px;z-index:-10;' /></a><br>

 

 

? ? ? HOW TO CENTER SOME TEXT WITHIN AN IMAGE, WITHIN A LINK ? ? ?

[neogemima]

hmmmmm, i've never tried that...you can't just use the image as the background for a table cell and make the text a link inside that cell?