Adding different links on a single image
Autor: John W.
Visitado 851,
Followers 2,
Compartido 0
I purchased your software last year and I have successfully created a few sites. The project I'm on at present i need 5 different links on one image placed on a page. attached is the image
Publicado en
Hello John
I have an example here : http://eksempelsite.dk/operational-accordion.html
There are many links on the left image and they are set for hovering and clicking.
The example is made from this example : https://www.w3schools.com/tags/tag_area.asp
You have to "define" the image and the links in a html-object.
By following the example from w3school, it should be possible.
Tip : If you have uploaded the image categories.jpg, then you could use the "Try it Yourself" example and then use full URL's to test.
It is also rather easy to copy/paste the code to a html-object in X5 and here use the full URL and see the results in the preview. As no PHP is required all tests can be done in the preview.
You should only copy this :
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
And then change the URL's and the coordinates.
For the categories.jpg you should only use the shape="rect" coords=
(It > En) ...!... you could more correctly create 5 separate images to be inserted for example in a Text Object; ... simple, immediate and without codes...!...
... or you could use different approaches ...
1) ... DIV_CUSTOM;
2) ... Mapping;
3) ... SVG (to be preferred);
... in > this example see methods 1) , 2) and 3) ...
... press Ctrl + U to view and copy the code ...
... code to be pasted into an Object HTML code ...
... for the name of the image you must use the path where you position it; in my case it's in the ROOT ...
ciao
.