Dreamwork Designs Linking Images Tutorial

Linking Images Tutorial

This tutorial will show you how to remove link lines from around images, how to open a link in a new window,
how to link right and left guestbook images together and how to link one image with 2 urls.

Click the links below to see how or just scan down the page....

Removing Link Lines
Opening A Link In A New Window
Linking Right and Left Images
Linking One Image with 2 URLS

Removing Link Lines

This clickable image shows a link line

This clickable image has no link line

To remove the link lines from clickable images, add border="0" to the img src tag like so:

click inside the box to select the code, right click to "copy" and then "paste" it into your editor

<a href="URL"><img src="IMAGENAME.jpg" width="" height="" border="0" alt=""></a>

Fill in the "width" and "height" of the images or they may not show on your page and add the URL

Opening A Link In A New Window

Add target="_blank" to the a href tag like so:

click inside the box to select the code, right click to "copy" and then "paste" it into your editor

<a href="URL" target="_blank">LINK NAME</a>

Fill in the URL and LINK NAME

Linking Right and Left Images

Here is a guestbook graphic that was split in half so both the SIGN and VIEW urls could be used

Sign View

Here is the guestbook graphic linked to our guestbook using both urls,
put your cursor over both sides and the url changes

Here is an example code to use:

click inside the box to select the code, right click to "copy" and then "paste" it into your editor

<a href="SIGN URL"><img src="SIGN.jpg" width="" height="" border="0" alt="Sign"></a><a href="VIEW URL"><img src="VIEW.jpg" width="" height="" border="0" alt="View"></a>

Fill in the "width" and "height" of the images or they may not show on your page
and add the SIGN and VIEW urls.

Linking One Image with 2 URLS

To do this we need to use an "image map" written in HTML.
I'll show you how using this guestbook graphic.

book

First we need to know the WIDTH and HEIGHT of the graphic.
To find out, right click on it and from the menu choose PROPERTIES.

You will see....

The width is 200 and the height is 150

You can also save the guestbook graphic to your computer and use your
favourite graphics program to determine the width and height as well.

Here is the code to use for an image 200x150 in size:

click inside the box to select the code, right click to "copy" and then "paste" it into your editor

<IMG SRC="IMAGENAME.jpg" usemap=#imagemap border="0" alt="Please sign my guestbook"> <map name=imagemap> <area shape=rect coords=0,0,100,150 href="SIGN URL"> <area shape=rect coords=100,0,200,150 href="VIEW URL"> </map>

Fill in the IMAGENAME and add the SIGN and VIEW urls.
The above image map code will only work on a graphic that is 200x150

To explain more about the area shape=rect coords= numbers

The top row of numbers 0,0,100,150
0,0 represents the coordinates for the top left corner of the graphic
100 represents the coordinate for the exact middle of the graphic
150 represents the coordinate for the height of the graphic

The top row of numbers will make the left side of the graphic clickable

The bottom row of numbers 100,0,200,150
100,0 represents the coordinates for the top of the graphic in the exact middle
200 represents the coordinate for the width of the graphic
150 represents the coordinate for the height of the graphic

The bottom row of numbers will make the right side of the graphic clickable

To show another example:
a guestbook graphic that is 180x120, the coordinate numbers would be:
0,0,90,120
90,0,180,120

If you have any questions, please feel free to email us. Good luck and have fun!

Visit Deb's Websites