Hoi Jan,

Heel lang gelee heb ik zoiets op deze manier opgelost:

Long time ago i made something to get similar effect.

https://andreweb.nl/x5_test/map.html

Volgens mij kan het niet direct. 
Ik zou wel een idee post van je bericht kunnen maken,wellicht kan Inco iets maken

Hello Jan,

Post your code here and we can check this .

Axel

I am sending simple test code that works outside of WebSite X5.I need to insert code into the WebSite X5 environment that works on the same principle, but is significantly more comprehensive.

Jan

I would suggest you take a look at the Webanimator: https://www.webanimator.com/en/

It is not free, but it gives value for the maoney.

With the tool you can create adaptive animations and other stuff. AND - X5 has an object to integrate what you create.

If you want some free stuff you could take a look at the free Google Webdesigner: https://webdesigner.withgoogle.com/

It can produce pages in html5 that you can integrate in X5 using html-objects.

If it is quite simple projects you want to make, you can make it manually - if it is a bit more complicated you should use a tool for your "animations". It makes it easier to maintain and it solves the adaptive-problem.

Hello Jan,

You code is working fine.
Follow this advice.

- Create a page with an HTML object

- On you local directory project, choose (create) a directory where you will copy your files. Into my case the local directory will be afs-demo/imagemap. And I have copied all your files into this local directory...

- Into your html code you need to change the path of your files copied previously like below with the good path to find your files.

Here it's the directory name is  where you code will go to find files configured into itself (we recommend to have same directory name locally and remotly. See later)

The previously choosen directory will be need to exported to your web site with the files too. So to do that you need to use the advanced tab into you HTML object like:

And here you need to configure which files will be transferred into your website during export of the project.
in our cas you need to configure all your files to be exported .

So you can add file by file by this way.

And you add a file like below.

So you choose file file which file needs to be exported to the website... Here ALL files

And you choose the same name for the remote directory where the files would be exported.

Here afs-demo/imagemap for my case.

Just to be easier for the management of you project, I recommend to have same directory nale locally and remotely... Not mandatory to...

But don't forget into your html code previously we have configured the remote path into each src= "" html line

And you add all file which need to be exported, like below

Export you project.... Normally it's OK like on my demo

https://wsx5demo.afsoftware.fr/imagemap.html

Hope this helps

Axel

... + ... or do this:
1) - On the page, insert an HTML Code Object that is taller and wider than the image (400x400px).
2) - In the Expert tab of this object, add/attach the image "pokus.png" Leave "files" as the default folder, so the relative path to the image is:
files/pokus.png
3) - In the main tab of this object, "HTML Code," paste all this code exactly as you see it, with the correct path to the image:
<img src="files/pokus.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="Square" title="Square" href="square.html" coords="49,57,161,170" shape="rect">
<area target="" alt="Circle" title="Circle" href="circle.html" coords="317,113,62" shape="circle">
<area target="" alt="Polygon" title="Polygon" href="polygon.html" coords="132,368,209,217,290,368" shape="poly">
</map>

4) - obviously in the project there must be pages square.html, circle.html, polygon.html  in the structure at step_3.

 ...!... done...!... ... you can preview it...

.

ciao

.