Tech Tips
Adding images to your forum
Time: March 11 05:32pm

To add clickable images to your forum, you must make the image into a hyperlink, then tell the browser where to go when the user clicks on the image:
PLEASE NOTE - DO NOT LINK TO ANY IMAGES HERE, YOUR PAGE WILL ONLY SHOW A BROKEN IMAGE LINK (the dreaded red X)

For example, let's say your image is located HERE:
http://www.ripper1.com/nw54/sticky1.gif
You would first need to assign the image to an image tag, like this:
<img src="http://www.ripper1.com/nw54/sticky1.gif">
That would display the image like this:

Next, you need to make it into a link. For this example, we will link to my home page at:
http://www.ripper1.com
<a href="http://www.ripper1.com"><img src="http://www.ripper1.com/nw54/sticky1.gif"></a>
That will do this:

A few problems here. Number one is the ugly border. Number two is the link will open in the same window. To fix those, we would add a TARGET tag to make the page open in a _blank window and we'd add a border tag and make it 0 pixels wide (which means no border):
<a href="http://www.ripper1.com" target="_blank"><img src="http://www.ripper1.com/nw54/sticky1.gif" border="0"></a>
That will do this:

To add clickable text to the image as well, you simply insert your text after the image tag but before the hyperlink closing tag </a> like this:
<a href="http://www.ripper1.com" target="_blank"><img src="http://www.ripper1.com/nw54/sticky1.gif" border="0">Latest Announcements</a>
That will do this:
Latest Announcements

To add plain text to the image tag, you simply insert your text after the hyperlink closing tag </a> like this:
<a href="http://www.ripper1.com" target="_blank"><img src="http://www.ripper1.com/nw54/sticky1.gif" border="0"></a>Click the image for our Latest Announcements
That will do this:
Click the image for our Latest Announcements

If you want the image in the center of your page, you would surround the entire line of code, like this:
<p align="center"><a href="http://www.ripper1.com" target="_blank"><img src="http://www.ripper1.com/nw54/sticky1.gif" border="0">Sticky Image</a></p>
That would do this:

Sticky Image

[ Network 54 Tech Tips ] [ Adding a POST button ] [ Adding Content to Different Pages ]
[ Adding snow for the holidays }
[ PHP Redirect ] [ HTML Redirect ] [ Embed Forum in a Frame ] [ Smiley Generator ]
[ Using Frames with your forum ] [ Using Inline Frames with your forum ] [ Adding Image Maps to your forum ]
[ Adding images to your forum ] [ How to display a visitor's IP address ] [ How to Add Links to your forum ]
[ Adding a Marquee - (Scrolling Text Box) ] [ How to add Simple Scripts ] [ How to add Sound to your Forum ]
[ Adding a Sticky Message ] [ Adding Tables ] [ Adding Votelet Links ]
[ Browser Issues ] [ AOL Issues ]
[ How to post pictures ] [ How to post a link ]

If you came from a direct link, use the "Back Button".
If you came from a signature link, use "Close This Window".

Website Services