How to add a photoshop image with hyperlinks 
Author: Adam N.Hi everyone. A bit of an odd question for you....I am trying to insert an image that I created on photoshop. It has several hyperlinks on it. I did it on photoshop because there is no way that X5 can accomodate what I want. So the image is fine - it works perfectly on Firefox and Internet Explorer. When I exported the html and images to a folder from Photoshop everything worked fine again. Then comes the brick wall! I cannot add the image onto X5 in any way. The html code up without any pictures! The images are saved as slices so they cannot be put together on X5. It is driving me nuts! I am using the latest X5 version (13) and if X5 would let me add hyperinks to a jpeg image in more than one place at a time I would be happy! I have added the basic image to show you what I mean. If there's any way that I have missed a way to do this on X5 then I would be happy and just use it. Thanks people - appreciate any help.
Where are the links on?
If you create a page with 3 pictures on the left colum and 1 text objects next to it and set a picture inside the text object then you can set on all three objects links.
I made very fast a small example of 1 row.
I have made a fast example is this what you want?
http://andreweb.nl/x5_testv13/links.html
Author
Not at all. I wanted the picture as it is with three hperlinks on the same picture. Where the three blue 'read more' blocks are. Each has a link to a different page. I can do what you just did easily, but that is not what I want. Thanks though.
Can you make a prtscrn with arrows to where the 3 links are located?
But I think it will be difficult.
Hello Adam
You can do this by using the html object.
You then will have an image shown where the object is located.
You "simply" in this ( the html object ) type for example:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="url 1" alt="Sun">
<area shape="circle" coords="90,58,3" href="url 2" alt="Mercury">
<area shape="circle" coords="124,58,8" href="url 3" alt="Venus">
</map>
The img src is a relative path to the image - You can specify a full path.
URL 1,2 and 3: The URL You wish to use.
Possible values:
This way You have an image ( planets.gif) that has 3 clickable areas ( one rectangle and 2 circles ) in it.
And You have each area to be directed to one of 3 different pages/URL's.
If You want the links to open in a new tab, You have to use the target="_blank" for the HREF.
Example :
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
Hope it is something like this You mean ???????
If - then I hope You are helped
Kind regards
John S.
Hello again Adam
I have made a little test for You. http://www.john-schwartz.dk/imagelink.html
Here You have Your image with 3 links.
1. link is one og my other sites ( wineclub ) opened in a new tab.
2. link is another site opened in a new tab.
3. link is another page on the site where the test is. this is opened in the same window and therefore replaces the page You are on.
The layout of the page, You can see in the attached image.
The code for the html object is here :
<img src="hereyouputYourreftoYourimage" width="400" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="240,90,330,110" href="http://www.bramminginfo.dk/vinklub/" target="_blank" alt="Sun">
<area shape="rect" coords="240,170,330,200" href="http://www.brammingegnsmuseum.dk/" target="_blank" alt="Mercury">
<area shape="rect" coords="240,255,330,280" href="http://www.john-schwartz.dk/index.html" alt="Venus">
</map>
The <img src="hereyouputYourreftoYourimage" is of course not the actual ref. You have to put the reference to Your own image in here.
The alt-names You can choose as You like.
The size of the image You can specify as You like, but remember to change the coordinates then.
The coordinates is x,y and x,y and the numbers starts from the upper left corner.
This way to do it will work on ALL images no matter in which program they are made or edited.
I would like to know if this is what You meant, and if You are/was helped.
Kind regards
John S.
And hello again Adam
Just a tip for You.
You could on the same page where You have the image with the links, have another html object with an iframe.
You can then have links in the image that "fills" this iframe with a detailed description for link 1, and when You click on link 2 the iframe will be "filled" with the description of link 2 and so on.
In the museum page, which one of my links ( 2. link)directs to, You can shift view via visning 1 - visning 2
And You can see another example here : http://www.calendarforum.dk/examples.html
Here You can click on the links, and You will see the iframe"window" change.
You just have to name the iframe and in the links "target" to this iframe.
This last post was just for Your information - it has nothing to do with Your "problem".
Again - keep us informed if You had it to function, or if we didn't understand You right.
Kind regards
John S.
Author
Hi guys. Thanks so much for your help
I had already been working on html and every time I went to preview the page all I got was a lot of lines with images missing. The hyperlinks were there and they worked. I took a couple of days off to have a rest! But this is the code I used
<head>
<title>C:\Users\Adam Nolan\Documents\My Webs\andersons\test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!-- Save for Web Slices (C:\Users\Adam Nolan\Documents\My Webs\andersons\test.jpg) -->
<table border="0" cellpadding="0" cellspacing="0" height="316" id="Table_01" width="485">
<tbody>
<tr>
<td colspan="3"><img alt="" height="98" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_01.jpg" width="485" /></td>
</tr>
<tr>
<td rowspan="6"><img alt="" height="218" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_02.jpg" width="297" /></td>
<td><a href="http://andersonssecurity.co.uk/construction-site-security.html" target="_self"><img alt="" border="0" height="21" src="images/Site-Security.jpg" width="99" /></a></td>
<td rowspan="6"><img alt="" height="218" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_04.jpg" width="89" /></td>
</tr>
<tr>
<td><img alt="" height="65" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_05.jpg" width="99" /></td>
</tr>
<tr>
<td><a href="http://andersonssecurity.co.uk/cctv-monitoring.html" target="_self"><img alt="" border="0" height="21" src="images/Alarm-Security.jpg" width="99" /></a></td>
</tr>
<tr>
<td><img alt="" height="70" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_07.jpg" width="99" /></td>
</tr>
<tr>
<td><a href="http://andersonssecurity.co.uk/cctv-monitoring.html" target="_self"><img alt="" border="0" height="18" src="images/CCTV.png" width="99" /></a></td>
</tr>
<tr>
<td><img alt="" height="23" src="images/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_09.jpg" width="99" /></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices --></body>
(Translated by Google)
1) - attach the list of images inside the HTML Code Object | > The Expert section | ▪Add... (expert panel, attachments);
2) - to use / leave the folder "files" as proposed destination by default;
3) - correct the url / src prefixing "files" in the name of the image;
4) - Complete paste this code in the HTML panel of the same HTML Code Object;
>> LIST NAMES IMAGES to attach:
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_01.jpg
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_02.jpg
Site-Security.jpg
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_04.jpg
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_05.jpg
Alarm-Security.jpg
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_07.jpg
CCTV.png
C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_09.jpg
>> CODE complete to paste into HTML Code Object (appropriate measures):
<!-- start code -->
<table border="0" cellpadding="0" cellspacing="0" height="316" id="Table_01" width="485"><tbody><tr><td colspan="3"><img alt="" height="98"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_01.jpg" width="485" /></td></tr><tr><td rowspan="6"><img alt="" height="218"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_02.jpg" width="297" /></td>
<td><a href="http://andersonssecurity.co.uk/construction-site-security.html" target="_self"><img alt="" border="0" height="21"
src="files/Site-Security.jpg" width="99" /></a></td><td rowspan="6"><img alt="" height="218"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_04.jpg" width="89" /></td></tr><tr><td><img alt="" height="65"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_05.jpg" width="99" /></td></tr><tr>
<td><a href="http://andersonssecurity.co.uk/cctv-monitoring.html" target="_self"><img alt="" border="0" height="21"
src="files/Alarm-Security.jpg" width="99" /></a></td></tr><tr><td><img alt="" height="70"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_07.jpg" width="99" /></td></tr><tr>
<td><a href="http://andersonssecurity.co.uk/cctv-monitoring.html" target="_self"><img alt="" border="0" height="18"
src="files/CCTV.png" width="99" /></a></td></tr><tr><td><img alt="" height="23"
src="files/C-_Users_Adam-Nolan_Documents_My-Webs_andersons_test_09.jpg" width="99" /></td></tr></tbody></table>
<!-- end code -->
regards
____________________________________
I'm sorry, I do not speak English
.
Author
Thanks so very much