How to add multiple links to an image with image mapping Tutorial
|
|
|
|
|
|
How to add mutiple links to a single image by image mapping tutorial
Did you ever wonder how those mutiple links in a single image were achieved. Do you want to have multiple links on one image on your website but didn't know how to do it? Then you had better read-on.
Image mapping is the way to add multiple link to a single image. With weebly websites you will have to do this using the HTLM code element or place the code in the page html directly. Click the link to See my finished image mapped page it will open in a new window or look at the header on this page and try out the multiple links in the map. Clicking on any area or town on the map will take you to the photo gallery for that part of the Isle Of Wight.
The map of the Isle Of Wight is split into areas which have been image mapped using the "poly" variable to link different areas to separate webpages. the image has 8 different area links to 8 different webpages. Every town shown on the map has also been linked using "rect" rectangular coordinates variable to the relevant webpages on my website. This makes a total of 40 hyper links in the one Picture. Obviously this is pretty extreme and you can image map with two or more links but it does show you what can be acheived by image mapping.
It is a really cool feature and is pretty simple once you have the layout of the code sorted. The options are "rect" for a rectangal, "circle" for circle around a central point and "poly" for an area of any shape made using straight lines.
Where do you start? Well it is not as difficult as you might imagine. First thing to do is prepare your picture. I have used a PNG type file because I wanted it to overlay the Tall header background picture which allows me to change the background image easily without disturbing the position of the mapped overlay
Did you ever wonder how those mutiple links in a single image were achieved. Do you want to have multiple links on one image on your website but didn't know how to do it? Then you had better read-on.
Image mapping is the way to add multiple link to a single image. With weebly websites you will have to do this using the HTLM code element or place the code in the page html directly. Click the link to See my finished image mapped page it will open in a new window or look at the header on this page and try out the multiple links in the map. Clicking on any area or town on the map will take you to the photo gallery for that part of the Isle Of Wight.
The map of the Isle Of Wight is split into areas which have been image mapped using the "poly" variable to link different areas to separate webpages. the image has 8 different area links to 8 different webpages. Every town shown on the map has also been linked using "rect" rectangular coordinates variable to the relevant webpages on my website. This makes a total of 40 hyper links in the one Picture. Obviously this is pretty extreme and you can image map with two or more links but it does show you what can be acheived by image mapping.
It is a really cool feature and is pretty simple once you have the layout of the code sorted. The options are "rect" for a rectangal, "circle" for circle around a central point and "poly" for an area of any shape made using straight lines.
Where do you start? Well it is not as difficult as you might imagine. First thing to do is prepare your picture. I have used a PNG type file because I wanted it to overlay the Tall header background picture which allows me to change the background image easily without disturbing the position of the mapped overlay
|
|
If your website has a drag and drop header you can do the image mapping the way I have, by putting a html element over the background image. If you dont have a drag and drop header you will need to put everything on the background image and use a no-header type page so you can position the image at the top of the page using a html element.
Second option is to put your mapped image anywhere on the page in the body section. This can be achieved by again using a html element to put your code into.
Third choice, if you have a drag and drop footer is to place your mapped image code in a html element in the footer.
All the above can also be done by inserting the code directly into the relevant section of the pages html code. but it would then appear on every page using that html page template. You can also contact me if you want the work done for you. Send me your picture and what you want done and I will get back to you with a price for the job.
Second option is to put your mapped image anywhere on the page in the body section. This can be achieved by again using a html element to put your code into.
Third choice, if you have a drag and drop footer is to place your mapped image code in a html element in the footer.
All the above can also be done by inserting the code directly into the relevant section of the pages html code. but it would then appear on every page using that html page template. You can also contact me if you want the work done for you. Send me your picture and what you want done and I will get back to you with a price for the job.
Getting Started
First prepare your picture adding any labels, text or graphics. If you want it for an overlay use a transparent background layer and save as a .png type file if you are working directly on the background image save as a jpeg file type. Also keep a copy as a layered .tiff type file so you can easily make changes later.
Make sure the picture is the right size for your intended position on your website upload it and make sure the size is right before trying to image map, because the mapping process is counting pixels from the top left of the picture if you later change the dimensions of your picture you will then have to map it all over again because the coordinates will have changed.
You will need to decide what variables you are going to use in your project "rect""circle" or "poly" or a combination of them mix and match them is ok just don't overlap the coords.
For "rect" rectangle. We will need to plot the top left and bottom right coordinates of our rectangle in pixels.
For "circle" we only need to plot the central point and decide on the circle radius.
For "poly" we will need to plot and record the cordinates working in straight lines around the area.
To get the coords in Photoshop first we need to ensure that rulers are set to pixels.
Clicking top menu/edit/preferences/units & rulers will bring up the preferences box choose the rulers option the blue highlight box is the one to change to pixels, normally the first box. Click ok and we are nearly ready to go.
Next we turn on the info tool which allows us to see the position of the mouse pointer showing the "X""Y" coordinates (coords). We do this by clicking window on the top menu then clicking "info" to put a tick by it. It might also already be on the pallet on the right of your workspace it is an "i" with a white circle around it. once you have it open move your mouse around your picture and you will see the "X" "Y" coordinates changing as you move your mouse. It is these "X"Y" cordinates we will need to record for mapping our image.
Next step is to record the coordinates and you cant beat a pen and paper for this part. Give each hyperlink you want to create a name then under the name put the variable type "rect" "circle" or "poly" now you can start recording the coordinates.
First prepare your picture adding any labels, text or graphics. If you want it for an overlay use a transparent background layer and save as a .png type file if you are working directly on the background image save as a jpeg file type. Also keep a copy as a layered .tiff type file so you can easily make changes later.
Make sure the picture is the right size for your intended position on your website upload it and make sure the size is right before trying to image map, because the mapping process is counting pixels from the top left of the picture if you later change the dimensions of your picture you will then have to map it all over again because the coordinates will have changed.
You will need to decide what variables you are going to use in your project "rect""circle" or "poly" or a combination of them mix and match them is ok just don't overlap the coords.
For "rect" rectangle. We will need to plot the top left and bottom right coordinates of our rectangle in pixels.
For "circle" we only need to plot the central point and decide on the circle radius.
For "poly" we will need to plot and record the cordinates working in straight lines around the area.
To get the coords in Photoshop first we need to ensure that rulers are set to pixels.
Clicking top menu/edit/preferences/units & rulers will bring up the preferences box choose the rulers option the blue highlight box is the one to change to pixels, normally the first box. Click ok and we are nearly ready to go.
Next we turn on the info tool which allows us to see the position of the mouse pointer showing the "X""Y" coordinates (coords). We do this by clicking window on the top menu then clicking "info" to put a tick by it. It might also already be on the pallet on the right of your workspace it is an "i" with a white circle around it. once you have it open move your mouse around your picture and you will see the "X" "Y" coordinates changing as you move your mouse. It is these "X"Y" cordinates we will need to record for mapping our image.
Next step is to record the coordinates and you cant beat a pen and paper for this part. Give each hyperlink you want to create a name then under the name put the variable type "rect" "circle" or "poly" now you can start recording the coordinates.
|
|
With our picture open in photoshop or your chosen software:
For "rect" rectangular put the mouse cursor at the top left position of the rectangle you want your link to be in. read off the coords from the info box put the "X" first and separate with a comma like this 536,248, Next move your mouse to the bottom right corner of where you want the link to be and read of those coords. 234,456
write this down next to the link name on your piece of paper and separate them with another comma like this. 536,248,234,456 Do not put a comma after the last coord. These are the coords for the link that we will put in the code later.
For "circle" Circle. simply put the mouse cursor in the centre of your circle where you want the link to be and record the coords 524,222 The radius of the circle is added by adding the radius value to the end of the coords changing to 524,222,10 The 10 on the end being a 10px radius and don't forget the comma. You can have any value here so play with it and pick what works for you. You can always change it later to make it bigger or smaller.
For "poly" Poly is a shaped area. I found it best to put a blank layer on the picture and shade around the area first which helps with complicated shapes. then switch back to the move tool cursor and retrace around the edge of the shaded area with your mouse stopping at each change of direction and record the coords there are two values for each point. When you are finished switch off the layers visibility ie.
For "rect" rectangular put the mouse cursor at the top left position of the rectangle you want your link to be in. read off the coords from the info box put the "X" first and separate with a comma like this 536,248, Next move your mouse to the bottom right corner of where you want the link to be and read of those coords. 234,456
write this down next to the link name on your piece of paper and separate them with another comma like this. 536,248,234,456 Do not put a comma after the last coord. These are the coords for the link that we will put in the code later.
For "circle" Circle. simply put the mouse cursor in the centre of your circle where you want the link to be and record the coords 524,222 The radius of the circle is added by adding the radius value to the end of the coords changing to 524,222,10 The 10 on the end being a 10px radius and don't forget the comma. You can have any value here so play with it and pick what works for you. You can always change it later to make it bigger or smaller.
For "poly" Poly is a shaped area. I found it best to put a blank layer on the picture and shade around the area first which helps with complicated shapes. then switch back to the move tool cursor and retrace around the edge of the shaded area with your mouse stopping at each change of direction and record the coords there are two values for each point. When you are finished switch off the layers visibility ie.
298,222,128,205,35,282,5,243,111,141,303,68
The coords above are from a shape that had six sides so there are six pairs of coords. More sides = more coords, less sides = less coords.
Once we have all our coords recorded and written down we are ready to construct the code.
Your working image will need to be uploaded to the theme/design side of the website in weebly we go to the design tab then add/edit html/css then to add new files on the left of the page which opens the upload box which will alow us to navigate to where the picture is on your computer it helps if the picture has a simple file name in lower case less chance for error when copy/typing the name into our code.
The code I have split into the different sections to make it easier to explain.
The first part of the code looks something like this: the
<img id="isle-of-wight-image-maps" src="http://www.your-web-site-url/files/theme/your-file-name.png-or.jpg" border="0" width="877" height="515" usemap="#image-maps" alt="" />
There are a number of important parts to the code which I have highlighted in red.
1. The first part is the picture id, call it what ever you want but remember no spaces use dashes between words. mine is called isle-of-wight-image-maps
2. Second is the path to your image you have uploaded to your weebly website this will be your website url followed by /files/theme/your-picture-name ie. http://www.your-url/files/theme/your-file-name.png or.jpg or.gif
3. Next is a piece of style code with the size of your picture in pixels
border="0" width="877" height="515"
4. Lastly is a piece of code saying usemap called image-maps it has a # in front of the name. use any name you want, no spaces between words use the dash.
#image-maps
5. Next a piece of code to tie together the picture id (section 1.) and map name (section 4.) looks like this.
<map name="image-maps" id="isle-of-wight-image-maps">
Two important pieces of information here firstly the map name = image-maps vvhich is the same as the name you used in (section 4.) above this time there is no # in front of the code.
Secondly the picture id = isle-of-wight-image-maps which is the same as the name you used in (section 1.) above.
6. Next is the code for the coordinates which will look something like this.
<area id="shalfleet-to-alum-bay" shape="poly" coords="298,222,128,205,35,282,5,243,111,141,303,68" alt="shalfleet-alum-bay" title="Shalfleet to Alum Bay Gallery" target="_self" href="http://www.the url you want the link to point to" />
Lots of important info in this piece of code.
First is the name you have given to this set of coords. any name you like just no spaces between words use dashes again. ie. shalfleet-to-alum-bay
Next is the type of link you want rectangular, circle or shape. "rect""circle" or "poly" the example is poly poly
Next are your coordinates 298,222,128,205,35,282,5,243,111,141,303,68 remember not to put a comma after the last cordinate only between each number.
Next is the alt text alternative text (http://en.wikipedia.org/wiki/Alt_attribute) the wiki link will explain all you need to know. Search engines like alt text.
alt= shalfleet alum bay
Then we have the Title of the Link itself this will appear when the cursor hovers over the link for this you can use capitals and spaces between words. ie. Shalfleet to Alum Bay Gallery
Lastly for this piece of code is the url you want the link to point to, the page page that will open if the link is clicked. http://www.the url you want the link to point to ie. http://www.manateevoyager.co.uk/binstead-to-east-cowes.html
Repeat step 6. for each of the links you want in your mapped picture as few or as many as you like.
7. Lastly we add the closing code at the end to finish it all off.
</map>
The coords above are from a shape that had six sides so there are six pairs of coords. More sides = more coords, less sides = less coords.
Once we have all our coords recorded and written down we are ready to construct the code.
Your working image will need to be uploaded to the theme/design side of the website in weebly we go to the design tab then add/edit html/css then to add new files on the left of the page which opens the upload box which will alow us to navigate to where the picture is on your computer it helps if the picture has a simple file name in lower case less chance for error when copy/typing the name into our code.
The code I have split into the different sections to make it easier to explain.
The first part of the code looks something like this: the
<img id="isle-of-wight-image-maps" src="http://www.your-web-site-url/files/theme/your-file-name.png-or.jpg" border="0" width="877" height="515" usemap="#image-maps" alt="" />
There are a number of important parts to the code which I have highlighted in red.
1. The first part is the picture id, call it what ever you want but remember no spaces use dashes between words. mine is called isle-of-wight-image-maps
2. Second is the path to your image you have uploaded to your weebly website this will be your website url followed by /files/theme/your-picture-name ie. http://www.your-url/files/theme/your-file-name.png or.jpg or.gif
3. Next is a piece of style code with the size of your picture in pixels
border="0" width="877" height="515"
4. Lastly is a piece of code saying usemap called image-maps it has a # in front of the name. use any name you want, no spaces between words use the dash.
#image-maps
5. Next a piece of code to tie together the picture id (section 1.) and map name (section 4.) looks like this.
<map name="image-maps" id="isle-of-wight-image-maps">
Two important pieces of information here firstly the map name = image-maps vvhich is the same as the name you used in (section 4.) above this time there is no # in front of the code.
Secondly the picture id = isle-of-wight-image-maps which is the same as the name you used in (section 1.) above.
6. Next is the code for the coordinates which will look something like this.
<area id="shalfleet-to-alum-bay" shape="poly" coords="298,222,128,205,35,282,5,243,111,141,303,68" alt="shalfleet-alum-bay" title="Shalfleet to Alum Bay Gallery" target="_self" href="http://www.the url you want the link to point to" />
Lots of important info in this piece of code.
First is the name you have given to this set of coords. any name you like just no spaces between words use dashes again. ie. shalfleet-to-alum-bay
Next is the type of link you want rectangular, circle or shape. "rect""circle" or "poly" the example is poly poly
Next are your coordinates 298,222,128,205,35,282,5,243,111,141,303,68 remember not to put a comma after the last cordinate only between each number.
Next is the alt text alternative text (http://en.wikipedia.org/wiki/Alt_attribute) the wiki link will explain all you need to know. Search engines like alt text.
alt= shalfleet alum bay
Then we have the Title of the Link itself this will appear when the cursor hovers over the link for this you can use capitals and spaces between words. ie. Shalfleet to Alum Bay Gallery
Lastly for this piece of code is the url you want the link to point to, the page page that will open if the link is clicked. http://www.the url you want the link to point to ie. http://www.manateevoyager.co.uk/binstead-to-east-cowes.html
Repeat step 6. for each of the links you want in your mapped picture as few or as many as you like.
7. Lastly we add the closing code at the end to finish it all off.
</map>
|
|
So with mutiple links in an image the whole code would look something like this. The example below contains one of each variable "rect" "circle" and "poly" change the red parts to your details
<img id="isle-of-wight-image-maps" src="http://www.your-website-url/files/theme/your-picture-file-name.png-or-.jpg" border="0" width="877" height="515" usemap="#image-maps" alt="" />
<map name="image-maps" id="isle-of-wight-image-maps">
<area id="shalfleet-to-alum-bay" shape="rect" coords="298,222,128,205" alt="shalfleet alum bay" title="Shalfleet to Alum Bay Gallery" target="_self" href="http://www.url-you-want-the-link-to-point-to" />
<area id="needles-to-compton" shape="circle" coords="34,283,10" alt="needles compton" title="The Needles to Compton Bay Gallery" target="_self" href="http://www.url-you-want-the-link-to-point-to" />
<area id="cowes-to-newtown" shape="poly" coords="304,68,492,0,507,0,498,33,519,118,525,280,299,222" alt="cowes newtown" title="Cowes to Newtown Creek Gallery" target="_self" href="http://www.url-you-want-the-link-to-point-to" />
</map>
The bold Red text in the code above will be different in your mapped image
Now you have your code and have uploaded your picture simply drag a html element onto your webpage and paste the code into it publish your site and your finished.
For working with html code use a text editor like notepad. or better still download the Free text editor Notepad++ which is one of the best free text editors available and includes lots of features not available with notepad including mutiple tabs open at the same time and rows are also numbered making it easier to keep track and find things again. search google for Notepad++ for the download.
So get coding and be sure to let me know how you get on..
Jan. 2014
