I have an image (graph) inside a <div> on which accumulated clicks are displayed, so it looks like a mess of dots all over the place.
I'd like to make this "nicer" to look at, and thought heatmaps would be the best option.
How could I implement such a solution?
I'm not particularly adept with PHP or javascript, so any pointers would help.
分享 In terms of accumulating clicks, you could simply register a click handler in JS that would work out where on the image the click event occurred. You could then use AJAX (or an alternative method of your choice) to return these clicks to your webserver, and presumably store them somehow.
With regards to creating heatmaps, you have two potential routes.
You could generate a heatmap image server-side in PHP, using a library such as GD or ImageMagick, and lay this image over your graph.
This has the upside of not worrying about browser compatibility with the various JS solutions, but it will mean increased server load.
You could also generate the heatmap client-side in JS - there are a whole host of possible ways of doing this.
This has the nice upside of leaving the hard work to the browser, keeping your server running smoothly. However, you may face issues with browser compatibility.
In order to fully answer this question, it would be helpful to know a little more about what you have already, what constraints you're placed under, and whether you have any preference as to techniques used!
分享
