WebSite X5Help Center

 
Tamás H.
Tamás H.
User

Create "hot area" on image background  en

Author: Tamás H.
Visited 2020, Followers 1, Shared 0  

 This option in X5 is possible only, when you edit the header line of the website. There you can drag and drop anything above the background of the header line (x and y distance). But I need the same possibility on the main body (there just lines and colums that you can create and put apps on the box). For a simple example I want to set a tablet on the background with icons, witch actually works by click command and the screen could change on the tablet. I can make the "hot areas" (insert icons picure with links) on the header line, but the tablet screen (header background) will never gona change after you click on the icon. I can not put a new picture (like different background) in front of the original screen in the header line. Is it possible to make the same on the main body in x5 or make it possible in header line? Thank you for your help in advance!

Posted on the
7 ANSWERS - 1 CORRECT
Esahc ..
Esahc ..
Moderator

Tamás, what you are referring to is an image map not directly implemented in WX5. If you google "website image map" you will find free resources and further information, if you choose to follow this route the code can be pasted into an html object in WX5.

A workaround I have used in the past is to place the image as a cell background and then place the icons with links within the cell (usually just a text object with the icons (images) appropriately placed). By having hidden duplicate pages with the background images replaced in each it is a simple matter to have the user click on an icon, the link opens the hidden page and it simply appears that the image has changed.

Read more
Posted on the from Esahc ..
John S.
John S.
User

Hello Tamás

You can make a clickable area on an image. In this old example : http://www.energifremtiden.dk/c4d/accordion-3---copy.html

I have made an image map in a html-object to the left, and an accordeon in a html-object to the right.

All is made with pure HTML and CSS.

If you hover some of the images to the left, the accordeon is affected. The images can also be clicked.

If you hover the images in the accordeon to the right, the image is affeccted. The images can also be clicked.

Another way is to use the WebAnimator. I have a very simple example here : http://www.bramminginfo.dk/brm26/side-8.html

If the yellow circle ( lower right ) is clicked, then the background is changed. You can also make hovering by using js in the WebAnimator ( you can make hovering without code, but you cannot make it disappear again without code )

Is it something like one of these examples you want? Or did you mean soemthing else.

Read more
Posted on the from John S.
Axel  
Axel  
User

May be you can use also an area HTML tag

https://www.w3schools.com/tags/tag_area.asp

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap"
>


<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map

Read more
Posted on the from Axel  
John S.
John S.
User

I just made a quick new example : http://eksempelsite.dk/x52019test/webanimator.html

I guess this is kind of what you mean.

The "apps" is just static - they could as well have been animated. In the "apps" could be other clickable areas.

Read more
Posted on the from John S.
John S.
John S.
User

The example from  Wsx5.afsoftware.fr is a good example. My first example is based on this example from w3schools.com

Read more
Posted on the from John S.
Tamás H.
Tamás H.
User
Author

Thank you guys for your help! Really thats what I need to create image map on my site! :)

Read more
Posted on the from Tamás H.