Highlight text and a polygon shape on an image simultaneously - javascript

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.

Related

Is there a premade javascript script to present a circle picture, which is clickable and wherever you click it an X appears? (changeable x,y position)

I am creating a website for an eye doctor & need to draw a circle somewhere on an html page, and it needs to have the following functionality:
wherever you click it, an X will appear. (X's position is changeable, by clicking a different place in the circle)
i will be able to collect the (x,y) co-ordinates of the X. (back to my html page)
it was to my understanding that i can only perform this using Javascript embedded in my HTML page. Anyone heard of some javascript code which is similar to this?
Thanks, Dan
Fabric Js can be useful, what you have to do is you need to add image to canvas and then you are able to draw on it and save it.
http://fabricjs.com/

Segmented Circle Interaction in html/css/javascript

I have a segmented Circle like the one below, and I would like to be able to interact with it by clicking on the numbers.
I've created an imagemap, hooking the area-tags with onclick-events, but I would like the background behind the number I click to change from white to blue.
I'm not locked in on the imagemap idea, so if there are any other approaches to achieve this then I'm open for those suggestions too.

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.

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 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.

Creating a dynamic multi-layered image for the web

I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.

Categories