Image mapping

Ask the community
,
1

I am trying to create a clickable map of each county in Iowa for the home page of my website. I am new to all of this and have tried creating an image map with html and also via sites that help create image maps. I tried copy and pasting example code and plugging in my coordinates in the Home Page Code box, among other information, as well as unsuccessfully trying to copy the image source to the image map creating wesbites. Any thoughts??

2

Hi,
Do you have an example of what you were trying to achieve?

Tal.

3

960×720 73.2 KB

I am trying to have each one of the outlined counties be linked to their respective pages on my site.

4

Hey,
I have an idea of how we can achieve that. Basically, you can place on each country a transparent box and create an onClick event for each box to redirect to the relevant dynamic page.

In order to do so, you should do the following:

  1. Create an array of all countries and their dynamic page URL.
  2. Place a transparent box on each country and change the IDs to have the same index as the array. For example, if countries[0] is “Lyon” than the box id which is placed on Lyon should be box0 .
  3. Add those two functions to the page code and call them on the onReady page function:
//countries is the countries array you've created which the dynamic 
//page URLs
function setMap(countries) {
  const numberOfCountries = 50;
	
  for (let i = 0; i < numberOfCountries ; i++) {		
     countries.forEach((country) => {
	$w(`#box${i}`).onClick(redirectToCountryPage.bind(null, country));
     });
   }
}

function redirectToCountryPage(country) {
   wixLocation.to(`/${country.pageURL}`);
}

This is the main idea. I hope it’s clear.

Good luck,
Tal.

5

Great, thank you! I’ll see what I can do.

6

export function play_click(event, $w) {
//Add your code for this event here:
let myImages=$w(“#box3”).children;
myImages[0].src="https://engansamsalman.wixsite.com/summergame/images/1.jpg;
}
trying to change the src of image in website to other image but it change to nothing.
i don’t want to use the link as the image will be changeable every time.
#rawabi

7

Hi,

try jsonbix.com for mapping interactive Maps.