Tagged: clickable, hotspot, image with hotspot, map
Is there a way to change the size of the clickable area in an image hotspot?
I have a map. I am NOT showing any tooltips. And, the pulses are transparent. The person needs to click on the name of plot of land and then will go to the specific area. What I would like to do is pretty much double or triple the size of the clickable area to make it easier to find and click.
Please see the “Site Map” at http://wsbp.wpengine.com/sites/. (hosted on WPengine)
Thank you.
Hey rmatus,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 990px) {
.responsive .av-image-hotspot {
height: 100px;
width: 100px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
For those following this discussion, you need to also change the margins around the hotspot. Otherwise, the hotspot starts in the same place and then goes to the right and down. Here is what I did to create a large circle of 200px, which is centered in the right place:
/* Hotspot circle size */
@media only screen and (min-width: 990px) {
.responsive .av-image-hotspot {
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
}
}
Hi rmatus,
Glad you got it working for you and thank you for sharing! :)
If you need further assistance please let us know.
Best regards,
Victoria