How to insert an image with active areas 
Autor: Jan N.
Visited 595,
Followers 2,
Udostępniony 0
I need to insert an image with active areas.For example, as a menu.
Posted on the
(It > En) ... In the normal and level menu items, the insertion of a background image is provided by the normal options, in Step_2...
...(...or there are other ways with the EXTRA code...)...
.
ciao
.
here about html and area tag and how to .
https://www.w3schools.com/tags/tag_area.asp
An example of an image made with active areas: http://eksempelsite.dk/operational-accordion.html
It is based on the same things that Axel refers to at w3schools
It is not adaptive.
To make it adaptive you could use the WebAnimator (also from INCOMEDIA).
Here it is rather simple to create adaptive solutions.
Example: https://bramminginfo.dk/bramny03_nytnavn/rvc/vikingecenter06.html
... As I told you before, depending on what you want to achieve, no extra codes are needed. For example, for an idea like this Marketplace template, which uses this image (V) as the level menu background:
---------------------
---------------------
.
ciao
.
Autor
Thanks for the advice.
I know the principle.Writing the code is not a problem.
I just don't know how to get it into Website x5.
JN
Use a html-object.
Insert the code in the object.
The correct name for this is "Image Map," and here's a post in German.
>> https://helpcenter.websitex5.com/pl/post/269329 (in German)
The post includes a link to a tool for image maps and also the JavaScript code to make the image map responsive.
The code is inserted in the “HTML Code” object, as mentioned by John S.
(German / Deutsch)
Die korrekte Bezeichnung hierfür lautet „Image Map“. Den Community-Post dazu im Link oben.
Der Beitrag enthält einen Link zu einem Tool für Image Maps sowie den JavaScript-Code, um die Image Map responsiv zu machen.
Eingefügt wird der Code im Objekt "HTML Code".
Autor
I normally use the HTML object.In this case, I insert the HTML code and it works, but the image does not appear even if I enter it with the full path.
JN
...I hadn't realized with the translator that you needed a mapped image with active areas...
...this mapping is a well-known historical function, which can be done in various ways...
...if you know how to use Inkscape, you could create natively elastic/responsive mappings in SVG...
...or with the suggestions already given, you can create elastic/responsive mappings even with Javascript integration...
.
ciao
.
On my demo a tool to create your own pictures with area and html code generator
https://wsx5demo.afsoftware.fr/map-generator.html
Autor
I have created code that works reliably outside of WebSite X5.When using an HTML object in WebSite X5, the code does not work.
Jan. N.
...vous avez peut-être fait une erreur dans la procédure...
...sans voir votre code et sans voir le lien vers la page où vous l'avez appliqué, nous ne pouvons pas faire d'évaluation...
.
I tested the free image map tool and made a few corrections to the generated code – now it works in the HTML object, see test page and screenshot.
Free online Tool >> https://image-map.weebly.com/
My test page >> https://findelinks.de/123test-aufklappmenue-2/image-map.html
.
----- Screenshot -----
Que legal esses links que o João compartilhou, muito bom e maravilhoso se existisse essa possibilidade num objeto do WebsiteX5.