WebSite X5Help Center

 
John W.
John W.
User

Adding different links on a single image  en

Autor: John W.
Visited 721, Followers 2, Udostępniony 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

Posted on the
3 ODPOWIEDZI
John S.
John S.
User

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=

Czytaj więcej
Posted on the from John S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
John W.
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

(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

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪