WebSite X5Help Center

 
Tamás H.
Tamás H.
User

Create "hot area" on image background  en

Autor: Tamás H.
Besucht 2022, Followers 1, Geteilt 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!

Gepostet am
7 ANTWORTEN - 1 KORREKT
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.

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von John S.
Tamás H.
Tamás H.
User
Autor

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

Mehr lesen
Gepostet am von Tamás H.