Click on different transparent PNG's. Which one is clicked?
I am trying to create a map of a country, divided in different provinces. When my products 开发者_C百科are available in a certain provinces, these provinces will light up on the map. I then want people to be able to select one province and click on it.
I'm thinking of doing it like this: 1) I have a background of the complete country in dark colors 2) Every province has a separate transparent png in a light color 3) When my database detects a product is available, it will show the background image + the light color image of each province
The problem is: I want the light color image to be clickable, but the canvas of all the images will overlap. Is there any way to accomplish this ? It should work in all major browsers, and preferably NOT with image maps. I would like to link the clickable area to the non-transparent part of the PNG image.
I hope this makes a bit sense, many thanks in advance.
An option is to just create your world image, and another hittest image, where all provinces are a different color. When the user clicks somewhere, you can just get the color of the clicked pixel, and relate that back to the province. So your hittest image would, for example, have Texas as red, California as blue and New York as Green. When you click you just have to figure the color out, and there you have your state.
As for getting the pixel color under the mouse, canvas can do that. However thats not supported in < IE8, perhaps you can look into explorercanvas. Otherwise you could do it serverside, just do an AJAX request to your page with the (relative!)x/y on click, your backend can figure it out then.
You can register click only on whole images, not colored parts of it. To have your map accurate you'll have to use canvas or flash.
<img> tag is clickable by it's square size, doesn't matter if part of image is transparent. Even if you click on transparent part of image, the click event will occur.
To couter-act that, take a lok at HTML IMAGE MAP <area> HTML tag (google it) and optionally tell the browser what part of image do you want to apply some event.
Click will also propaginate to bottom elements at the same position. This means that <body> is always clicked, if you don't stop propagination with e.stopPropagination();
If you don't want image maps, you can place invisible DIVs on the top in the shape of the clickable area. But I'd probably go with image maps.
加载中,请稍侯......
精彩评论