Text on pictures

  • Thread starter Thread starter Guest
  • Start date Start date
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.
 
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.
 
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
 
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>
 
Back
Top