Text on pictures

G

Guest

I am really not experienced in FP but learning. So how can I put text on a
picture so I can still hyperlink that picture to other page. It works when I
put that picture in background, but I cant hyperlink it anymore.
 
R

Rob Giordano \(Crash\)

Do it with an image editor...like Photoshop, Photoshop Elements, whatever
your favorite image editor is, use that. Resave the image for the web,
re-Import it, then place it in your layout (not as a background image) -
then use it as you normally would for a hyperlink...or use hotspot for just
the area of text if you don't want the entire image as a hyperlink.



|I am really not experienced in FP but learning. So how can I put text on a
| picture so I can still hyperlink that picture to other page. It works when
I
| put that picture in background, but I cant hyperlink it anymore.
 
M

Mark Fitzpatrick

Placing text onto an image through an image or paint program is the best
way. HTML is not really designed to do a lot of the things we're used to for
other documents such as Word, Illustrator, etc.. You're looking at a more
flattened view of things without objects that can overlap. Because of that,
you're best creating a graphic for the complex layouts that require
overlapping elements into a graphic, so you can then make the whole graphic
a link, or use imagemaps to link only portions.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage
 
M

Mike Mueller

message
:I am really not experienced in FP but learning. So how can
I put text on a
: picture so I can still hyperlink that picture to other
page. It works when I
: put that picture in background, but I cant hyperlink it
anymore.

Another option which may work is layers. Instead of having
the picture as a background, you would put it in a <DIV>, as
the bottom layer and set the hyperlink. You would then
create another <DIV> with a higher number for the layer, and
put the text in there. You would need to put a hyperlink on
that text also, otherwise when the text was hovered over the
link would not be recognized.

More on layers:
http://www.w3.org/TR/REC-CSS2/visuren.html#q30

See it Live:
http://lfd.lannonfire.com/forums/FP-NG/layers.htm
See it Live-code:

Example:
<html><body>

<!-- This first layer contains the image, the 'z-index' is
the layer number -->
<div style="position: absolute; top:10px; left:10px;
z-index: 1">
<a href="about:blank">
<img src="tp.gif">
</a>
</div>

<!-- This is the second layer. The text is here, and will
appear over the image below it -->
<div style="position: absolute; top:175px; left: 75px;
font: bold italic 24pt ; z-index: 2; color: #f00">
<a href="about:blank">
Wipe Me!
</a>
</div>
</body></html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I place text labels to the left of a picture 1
Picture as background 5
How to display 'tool tip' or info when mouse hovers over picture? 3
Create a web site link from a part link and a data field in access 2003 1
Hyperlink to Picture 2
Hyperlinks, Pop-up Windows & Graphics 6
text hyperlink mouseover shows picture 11
Icon picture Favorites 1

Top