Typing Over Image

Is it possible to have a linked font over an image (not being a background image)? If so, how do I accomplish that?

You want text on top of an image? And you don;t want the image to be the background...kinda like a button?

Well, you can make a button in photoshop and then code it.

<a href="http://thelink.com" target="_blank"><img src="http://theimage.theextension" border="0" alt="your Description"></a>

I have thought about that, but I would prefer not to use a button. I would just like to be able to create a link on top of an image. Case-in-point what you see at the bottom of this page: http://forums.xisto.com/no_longer_exists/

I have thought about that, but I would prefer not to use a button. I would just like to be able to create a link on top of an image. Case-in-point what you see at the bottom of this page: http://forums.xisto.com/no_longer_exists/

 

on the contrary, that example you gave just uses one big background image, with text aligned to occupy the desired positioning. if you want it that way, you might want to view the source code of the page, and see how it was done. then just tweak it according to your needs. (although you want it NOT as a background which renders your example moot and irrelevant already).

ight man i think i have exactly what you need i helped write this script a while back and the only thing i did different for you is the part in orange

 

everything in red can be changed to your liking as far as colors

also font can be changed as well

 

and make sure you change the image link in green

 

<div align="center"><table border="0" cellpadding="0" cellspacing="0" width="425" height="175" background="http://forums.xisto.com/no_longer_exists/404.png"><td width="425" height="175" colspan="1"><td width="1" height="175"><td width="400" height="50"><div style="width: 425; height: 175; overflow: auto; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#538BB1; scrollbar-face-color:#275A7D; scrollbar-highlight-color:#538BB1; scrollbar-1dlight-color:#275A7D; scrollbar-darkshadow-color:#0A253B; scrollbar-shadow-color:#275A7D;"><div style="padding: 0px;">

 

<a href="http://forums.xisto.com/no_longer_exists/404.png; target="blank">Brushless Background</a> if you want text without link just type text only

 

<br></div></div></td><td width="1" height="127"></td></tr><tr><td width="400" height="0" colspan="1"></td></tr></table></div>

 

hope this helps

I can't honestly see why you wouldn't use a background image (for a div or a table cell) but if you feel the great need to do it another way, you can use the z-index variable in css which allows for the layering of multiple elements.

I can't honestly see why you wouldn't use a background image (for a div or a table cell) but if you feel the great need to do it another way, you can use the z-index variable in css which allows for the layering of multiple elements.

Like WaW says, using an image in the HTML and then using z-index to position text over it would be a dumb way of doing it but if you absolutely had to (although I'd like to hear a good reason why), then you'd also need to use positioning (absolute/relative) to get the two elements to occupy the same space.

this is what you need to do:

<img src="source" style="vertical-align: middle" />

<span style="position: relative; left: -width_of_the_image">

text

</span>

 

the parts in red are parts that you edit depending on your preferences

you can make text a link as you wanted

 

the only problem is that text doesn't center itself within the image. i cant figure out how to do that (unless you manually get it to the center by moving it pixel by pixel).

Edited July 14, 2006 by andrew1123 (see edit history)