Network54 Tech Tips
Adding images to your forum
Time: September 03 05:10am


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. Number three is the size of the image, which should be displayed as well. To fix those problems, we'd add a border tag and make it 0 pixels wide (which means no border), we would add a TARGET tag to make the page open in a _blank window and we would add the width and height of the image to the tag. Also, to be totally browser-friendly, an alt tag is required (alt stands for alternate text, which is displayed in the event your image cannot be found or cannot be displayed by the browser). The alt tag is usually the last item added to the image tag:
<a href="http://www.ripper1.com" target="_blank"><img src="http://www.ripper1.com/nw54/sticky1.gif" width="19" height="18" border="0" alt="Sticky Image"></a>
That will do this:
Sticky Image
Note that the only noticable difference is the missing border and the text that appears when you mouseover the image (the rest is seen by the browser, not you).


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" width="19" height="18" border="0" alt="Sticky Image">Latest Announcements</a>
That will do this:
Sticky ImageLatest 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" width="19" height="18" border="0" alt="Sticky Image"></a>Click the image for our Latest Announcements
That will do this:
Sticky ImageClick 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" width="19" height="18" border="0" alt="Sticky Image">Sticky Image</a></p>
That would do this:

Sticky ImageSticky Image


[ Network 54 Tech Tips ] [ How to post pictures ] [ How to post a link ]
[ Adding a POST button ] [ Adding Content to Different Pages ]
[ 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 ] [ How to add Animation to your Forum ]
[ Adding a Sticky Message ] [ Adding Tables ] [ Adding Votelet Links ]
[ Adding snow for the holidays }
[ Browser Issues ] [ AOL Issues ]



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

OZ Website Services Website Services

Valid HTML 4.01 Transitional