Click on different transparent PNG's. Which one is clicked? - javascript

I am trying to create a map of a country, divided in different provinces. When my products 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.

Related

Get the displayed color of an area of the screen using javascript

I am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.

Edge Animate Change SVG Image on Mouseover

I am new to Edge Animate and JavaScript as well. I have a map and currently I have text displaying or colors changing as the moues moves over a specific country. What I want to happen is when the I mouseover the country I would like for the image to pop-out and enlarge. So for example when I mouseover France France becomes larger and a different color and then when the mouse leaves the larger France area the map returns to the original map. Is this possible?
Also you can use following fast trick:
Create "france_default" layer.
Create "france_mouse_over" layer.
On mouseover hide "france_default" layer.

Highlight text and a polygon shape on an image simultaneously

I am trying to achieve an effect similar to this site:
only instead of the mouseover function putting a border around the corresponding image, I want to simply highlight different parts of the image by drawing a polygon with defined coordinates over the image.
I have a test of my site up at:
http://perfectdays.ca/image-map/
I used a plugin called ImageMapper in Wordpress to create the image map as you see it on the site. Right now, when you mouseover the arms, for example, the arm regions on the image are highlighted.
I cannot figure out how to a)have the corresponding text on the left get highlighted when you mouseover the arms, or vice versa (and more importantly), have the arms highlight when you mouseover the text "Full Arms."
There was a somewhat similar post called Javascript Newbie: How to highlight text and image in different divs on mouseover.
However I cannot figure out how to adapt that to include the highlighting of certain parts of the image without using the plugin mentioned above.
Any help is much appreciated.
Are you able to put this in your area tags?
onmouseover="highlight(this.id);"
Then you can just make a simple javascript function that changes the class of the corresponding link.

Javascript: Make colors in an image into links?

Basically, there's a color-coded map with 5 different regions on it. They're all oblong, discontinuous, and would take forever to make an image map for. I'm wondering if there's a way to make the colors click-able instead of making a ridiculous image map. Separating the colors into separate images or other similar trickery wouldn't be an issue if it lead to a solution.
Also, I'd upload the image, but it's 2.1MB
Try rendering the image into a <canvas>. Add a click handler to the canvas, and read the color value at the clicked pixel. If you know which color corresponds to which logical region, you got yourself a solution.
In case the image does not have pure solid colors, you might have to get the average in a small region around the clicked pixel.

Can a canvas within a canvas easily be cleared from the main canvas?

I'm currently working on an interface where I have a primary canvas that is 800x800 in size. At the top I've generated a bunch of icons. When a user mouses over the icons at the top, it matches his mouse's x and y coordinates to determine if he is currently hovering over any of the icons. If he is, I want to have a hover effect where a label appears next to the mouse with the name of the icon. As he moves, the label follows the mouse. If he leaves the icon or moves to a different one, the last one is cleared, and either there is no label displayed (if the user moved off all icons), or another label is displayed next to the mouse in the last one's place (if he hovers over another icon, the width of the label is a variable length depending upon the width of the text).
The process of ordering and displaying these icons all occurs within a separate object from the rest of the canvas renderings, thus I wouldn't exactly want to re-render that entire object to display the icons every time a mousemove event triggers, so I'm wondering if there's a way to draw to another "temporary" canvas' context and whether or not that could be easily cleared. as the mouse moves so there isn't any trails left behind on the primary canvas? Can anyone point me in the direction of an example like this or advise me on how I should go about accomplishing this sort of task?
Yes you can certainly draw it onto a temporary (in-memory) canvas. This is done a lot of various reasons, and yours may be valid (especially if you don't have any background that changes). But it may not be the easiest to implement, its hard to say without knowing more about your app.
There's a decent alternative you should consider: you could have two canvases that are 800x800 in size overlaid atop each-other. This can be useful for some applications (like games) where there is a background, foreground, and middle-ground that all have different moving parts (but the background parts move rarely, and foreground isn't always present, etc)
In the same way, you could "layer" your canvas app, with the icons being on one canvas, and the background and other parts of the app being on the other canvas.

Categories