 Typing Over Image |
|
|
|
|
  |
 Apr 18 2006, 08:00 PM
Post
#1
|
|
|
Newbie  Group: Members Posts: 9 Joined: 10-April 06 Member No.: 21,629  |
Is it possible to have a linked font over an image (not being a background image)? If so, how do I accomplish that?
|
 |
 
|
|
Apr 18 2006, 08:04 PM
Post
#2
|
|
|
To Cool for Cache  Group: [MODERATOR] Posts: 1,082 Joined: 16-June 05 From: Some Place. Member No.: 8,317  |
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. CODE <a href="http://thelink.com" target="_blank"><img src="http://theimage.theextension" border="0" alt="your Description"></a> |
|
|
|
|
Apr 18 2006, 08:41 PM
Post
#3
|
|
|
Newbie Group: Members Posts: 9 Joined: 10-April 06 Member No.: 21,629 |
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://www.faithcity.org/contact.html
|
|
|
|
|
Apr 18 2006, 08:56 PM
Post
#4
|
|
|
Ancient Enigma Group: [MODERATOR] Posts: 1,741 Joined: 11-July 04 From: under the stars Member No.: 76 |
QUOTE(ctbrons @ Apr 19 2006, 04:41 AM)  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://www.faithcity.org/contact.html 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).
|
|
|
|
|
Apr 18 2006, 09:17 PM
Post
#5
|
|
|
Privileged Member Group: [HOSTED] Posts: 659 Joined: 16-April 06 From: Texas Member No.: 21,945 |
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 QUOTE <div align="center"><table border="0" cellpadding="0" cellspacing="0" width="425" height="175" background="http://img149.imageshack.us/img149/3522/garbagegrouch4yr.jpg"><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://img136.imageshack.us/img136/918/brushlessbgtutbygarbage2nr.jpg" 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 |
|
|
|
|
Apr 19 2006, 12:10 AM
Post
#6
|
|
|
Advanced Member Group: Members Posts: 106 Joined: 1-April 06 Member No.: 21,148 |
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.
|
|
|
|
|
Apr 19 2006, 03:01 AM
Post
#7
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
QUOTE(WindAndWater @ Apr 19 2006, 10:10 AM) 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. |
|
|
|
|
Jul 14 2006, 07:35 AM
Post
#8
|
|
|
Newbie Group: Members Posts: 1 Joined: 14-July 06 Member No.: 26,602 |
this is what you need to do:
 QUOTE <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). 
This post has been edited by andrew1123: Jul 14 2006, 07:45 AM |
|
|
|
|
Similar Topics