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:
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: 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"
width="19" height="18" border="0" alt="Sticky
Image"></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"
width="19" height="18" border="0" alt="Sticky
Image">Sticky Image</a></p>
That would do this:
Website Services
