I am making this plant label webpage for a biology project (here: http://nspowers.org/flower/flower-parts.html). Using ImageMapster and many tutorials, I can get the image map to highlight on hover, but I cannot get the map to stay highlighted with a custom color when a a single plant part is selected.
I referenced examples using onClick on the ImageMapster site, including the vegetable tray (http://jsfiddle.net/sb9j7/). However, I have not been able to correctly implement it to this project. When I try to isolate the onClick command to learn how it works, it breaks.
I commented the onClick event out of the script in the project because it breaks all of the highlighting. The following is the current script:
$(window).load(function(){
$('img').mapster({
fillColor: 'efe41b',
fillOpacity: 0.3,
stroke: true,
strokeWidth: 1,
staticState: true, /*Enables highlighted areas on load*/
singleSelect: true,
mapKey: 'data-key',
listKey: 'data-key', /*Runs single selection)*/
render_highlight: {
strokeWidth: 5,
fillColor: 'efe41b',
fillOpacity: 1,
mapkey: 'data-key',
},
});
$("#stamens").click(function() {
$("#annotation01").toggle();
$("#annotation01").fadeIn(1500);
$("#annotation02").hide(0);
$(".annotation-placeholder").hide(0);
});
$(".petals").click(function() {
$("#annotation02").toggle();
$("#annotation02").fadeIn(1500);
$("#annotation01").hide(0);
$(".annotation-placeholder").hide(0);
});
});
I would like to learn how to use an onClick event to cause the selected area to be filled with color. This is what I have now, (in the webpage, this is commented out because it breaks all of the hover highlighting).
$('img').mapster ({
onClick: function (e) {
image.mapster('set_options', {
}),
},
var='set_options' {
mapKey: 'data-key',
listKey: 'data-key',
fillColor: 'efe41b',
stroke: true,
strokeWidth: 5
},
});