Programo un sistema de reservas online para un camping scout. Lo que intento crear es un mapa interactivo del sitio en el que las personas que deseen reservar puedan simplemente hacer clic en el campo en el que deseen acampar.
Hasta ahora, tengo el mapa de imagen extrayendo las coordenadas de mi base de datos SQL y coloreando el ÁREA según si el campo ya está reservado para ese rango de fechas o no.
https://www.drumhill.org.uk/test-map.asp?startDate=2021-11-05&endDate=2021-11-08
Con lo que estoy luchando es que, para los campos verdes (=disponibles), me gustaría que cambien a amarillo o algo así cuando se hace clic (=seleccionado) y luego de nuevo a verde si se vuelve a hacer clic (=deseleccionado).
He visto que hay un ejemplo en la documentación que hace exactamente lo que quiero: https://projects.davidlynch.org/maphilight/docs/demo_features.html La "estrella" muestra exactamente el comportamiento que quiero... pero Creo que mi falta de conocimiento de JavaScript (o jQuery) me está frenando un poco.
Estás muy cerca de recibir el resultado deseado.
Pase las opciones al método al inicializar el complemento para ese elemento, en la página actual.
<script> $("img.map").maphilight( { fill: true, fillColor: '000000', fillOpacity: 0.2, stroke: true, strokeColor: 'ff0000', strokeOpacity: 1, strokeWidth: 1, fade: true, alwaysOn: false, neverOn: false, groupBy: false, wrapClass: true, shadow: false, shadowX: 0, shadowY: 0, shadowRadius: 6, shadowColor: '000000', shadowOpacity: 0.8, shadowPosition: 'outside', shadowFrom: false } ); </script>Esto inicializa el complemento maphilight para todos los elementos img en la página actual, con una clase "mapa". Recuerda ajustar los colores a tu gusto :-)
Acabo de probarlo en su sitio web, ejecutándolo dentro de la consola del desarrollador:
$("img.map").maphighlight();Todos sus colores personalizados parecen estar funcionando al seleccionar elementos.