How to create an image link
Images and links have been commonplace in web sites almost since HTML was invented. If you are new to HTML and Web Design you may have asked yourself if it is possible to add an image to a webpage that when a person clicks on it, it will link to another webpage or website. Good news! You can make an image on your webpage a link.
It's very simple to do. Here's how:
1. Get an image!
If you don't already have an image you want to turn into a link, you'll need to get one. It is recommended that you use images that you created, but any image will work for the link. Once you've found an image you'll need to add it onto your web page.
2. Add your image onto your webpage
In order to add the image onto your webpage, you'll need to open the file in a text editor such as Notepad for PC or TextEdit for MAC. Next, add the IMG HTML code onto your webpage:
< img src="url" / >
"url" - needs to be changed to the URL or file location of your image.
3. Turn your Image into a link
Now that you have your image on your webpage it's time to turn it into a link. To do so, we need to surround the previous image html code with HTML link code. Add the code onto your webpage:
< a href="url" > < /a >
"url" - needs to be changed to the web site address your a linking to.
Once you add the code to your web page, and surround the image code, the completed HTML image link code should look like this:
< a href="url" > < img src="url" > < /a >
4. Tips & Suggestions
TIP #1! - Use Alternate Text! Some mobile phones, handhelds, and browsers made for the blind don't display images, so use the alternate text attribute to display a description of the image if and when the images doesn't show up.
To add alternate text to your images, add this code to them:
alt="Image Description"
Change "Image Description" to the description of your image. The complete image code will look like this:
< img src="url" alt="Image Description" / >
TIP #2! Add Width & Height Values! A browser doesn't know the size of image until it loads, but this could take time, and mess up your layout until it does load. By adding width and height values to the image, the browser knows what size it is, and you layout will be correct even when the image hasn't loaded yet!
To add width and height values to your images, add this code to them:
width="x" height="x"
Change "x" to the correct width or height value in pixels. The complete image code will look like this:
< img src="url" width="x" height="x" / >
TIP #3! Open in a New Browser Window! Sometimes when you create links to other web sites, you won't the link to open the linked web site into a new browser, that way your site is still active.
To make sure your links to other sites open in a new window, add this code to them:
target="_blank"
When added to a linked image the code will look like this:
< a href="url" target="_blank" > < img src="url" > < /a >
Now you should be well on your way to turning images into links!
Learn more about this author, Alex Landis.
Click here to send this author comments or questions.
Below are the top articles rated and ranked by Helium members on:
by Niamh Brown
How to Create an Image Link
One of the most common forms of navigation in a site these days is the image link logo. Look
by Angel Sosa
For those out there, creating an image link may not be something of importance; however, look around. On the screen right
by Toni Laberge
Many tools are available when creating a website. You can work in a text editor and write html code, or you can use one
Inserting a link to an image isn't as hard as you would think. For starters, you would need to know the basics of HTML.
by EMoore
You create an image link by writing the correct html coding. This basically done by writing the code, the html page and
View All Articles on:
How to create an image link
Add your voice
Know something about How to create an image link?
We want to hear your view.
Write now!
Cast your vote!
Click for your side.
Featured Partner
One Note At A Time has partnered with Helium, giving you the chance to write for a cause. Browse One Note At A T...more
hide