Opal Image Map

When creating a page with Elementor, please search elementor with name "Opal Image Map" widget.

When drag to widget , form will display for you config , please choose option for source and input code .

Source:

{"id":9186,"editor":{"tool":"oval","shapeCounter":{"ovals":2,"polys":12,"texts":7}},"general":{"name":"Map1","shortcode":"Map1","width":740,"height":800,"naturalWidth":740,"naturalHeight":800},"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/map_h1.jpg"},"tooltips":{"sticky_tooltips":1,"constrain_tooltips":0},"spots":[{"id":"poly-7770","title":"Map 1","type":"poly","x":45.037,"y":45.003,"width":12.162,"height":9,"x_image_background":45.037,"y_image_background":45.003,"width_image_background":12.162162162162163,"height_image_background":9,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8483731138939951},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-344451","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Aroland","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Lora","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/page_buiding_1.jpg"}}}]}}]}},"points":[{"x":44.44444444444444,"y":0},{"x":0,"y":27.77777777777778},{"x":5.555555555555555,"y":62.5},{"x":46.666666666666664,"y":100},{"x":74.44444444444444,"y":95.83333333333334},{"x":90,"y":54.166666666666664},{"x":100,"y":37.5},{"x":91.11111111111111,"y":15.277777777777779}]},{"id":"poly-7523","title":"Map 2","type":"poly","x":62.485,"y":38.628,"width":17.747,"height":16.5,"x_image_background":62.485,"y_image_background":38.628,"width_image_background":17.747,"height_image_background":18.25,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-953981","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Coast","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Lora","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/home3_banner1.jpg"}}}]}}]}},"points":[{"x":30.199034045979072,"y":0},{"x":16.209174893817643,"y":14.154132904132904},{"x":0,"y":72.39288489288485},{"x":5.883148077657198,"y":100},{"x":77.443941932371,"y":95.62994875494878},{"x":100,"y":63.728398425675},{"x":78.62495299685769,"y":47.925685425685465},{"x":49.789629167728314,"y":62.83808783808783},{"x":62.896004125466376,"y":6.8935693935694164}]},{"id":"poly-8450","title":"Map 3","type":"poly","x":27.605,"y":61.128,"width":5.946,"height":5.5,"x_image_background":27.604864864864865,"y_image_background":61.1275,"width_image_background":5.9459459459459465,"height_image_background":5.25,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-652311","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Supermarket","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/page6_banner6.jpg"}}}]}}]}},"points":[{"x":45.45454545454545,"y":0},{"x":0,"y":59.09090909090909},{"x":18.181818181818183,"y":75},{"x":36.35681818181817,"y":100},{"x":65.90090909090911,"y":95.45454545454545},{"x":100,"y":90.9090909090909},{"x":93.18181818181822,"y":47.72727272727273},{"x":75.00000000000003,"y":27.27272727272727}]},{"id":"poly-202","title":"Map 4","type":"poly","x":78.01,"y":8.628,"width":7.837,"height":9.027,"x_image_background":78.01,"y_image_background":8.378,"width_image_background":8.919,"height_image_background":6.25,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","position":"bottom","width":310,"auto_width":0,"offset_x":0.2772312883001007,"offset_y":-1.3828833551769293},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-649121","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Airport","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/home3_banner5.jpg"}}}]}}]}},"points":[{"x":10.3458475672352,"y":3.251053582179403},{"x":0,"y":22.81757977122216},{"x":25.864618918088176,"y":31.848284166164966},{"x":13.794463422980266,"y":58.94039735099338},{"x":27.588926845960714,"y":66.46598434677907},{"x":51.728077857751884,"y":100},{"x":100,"y":31.848284166164966},{"x":87.93970432149956,"y":3.251053582179403},{"x":43.107698196813516,"y":0.24081878386514752},{"x":29.313234773833248,"y":3.251053582179403},{"x":20.69169513447058,"y":3.251053582179403},{"x":15.5187713508528,"y":3.251053582179403},{"x":20.69459508053158,"y":0}]},{"id":"poly-9967","title":"Map 5","type":"poly","x":80.308,"y":60.877,"width":19.557,"height":21.63,"x_image_background":80.173,"y_image_background":60.877,"width_image_background":4.594594594594595,"height_image_background":4.375,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-954051","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"State Bank","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"blod","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/home-5_img-05.jpg"}}}]}}]}},"points":[{"x":2.764015969685769,"y":0},{"x":2.073737495180443,"y":10.979990583010323},{"x":16.87379034497671,"y":13.79672989950094},{"x":0,"y":20.22629844238741},{"x":3.076498211224163,"y":29.01302212063308},{"x":15.133037388933124,"y":26.291466361670984},{"x":10.683359418804582,"y":35.713061456956986},{"x":30.403761084877328,"y":58.3673183623179},{"x":48.543315016674086,"y":61.70357940203891},{"x":62.30636910585285,"y":62.35139731633985},{"x":66.28922418918306,"y":73.89468090650315},{"x":53.51947736925621,"y":85.88105103441104},{"x":76.1911512351231,"y":100},{"x":100,"y":97.01259421151482},{"x":98.12111588801315,"y":60.1010010859511},{"x":72.45844689622724,"y":64.90854897232146},{"x":64.39798384028093,"y":45.58040341739148},{"x":53.20906938853349,"y":26.58313509570916},{"x":39.7591252954979,"y":42.750430378531476},{"x":31.77426581498028,"y":32.268004184734195},{"x":40.81042462078901,"y":23.659458847040092},{"x":26.257115257849073,"y":1.1557884824221358}]},{"id":"poly-9786","title":"Map 6","type":"poly","x":64.767,"y":72.503,"width":5.541,"height":5.625,"x_image_background":64.76702702702703,"y_image_background":73.6275,"width_image_background":5.135135135135128,"height_image_background":4.5,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-484451","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Hospital","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/bg4_h1.jpg"}}}]}}]}},"points":[{"x":46.331279845086044,"y":0},{"x":0,"y":48.888888888888886},{"x":36.58233219684241,"y":80},{"x":75.60348654014089,"y":100},{"x":100,"y":75.55555555555556},{"x":92.6752415653338,"y":35.55555555555556}]},{"id":"poly-6738","title":"Map 7","type":"poly","x":78.821,"y":88.878,"width":21.179,"height":11.122,"x_image_background":78.821,"y_image_background":88.878,"width_image_background":21.314,"height_image_background":12.372,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-6951","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Park","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/home3_banner19.jpg"}}}]}}]}},"points":[{"x":100,"y":0},{"x":63.82726004062151,"y":1.6187787323878007},{"x":65.70625754857446,"y":20.817681911357177},{"x":71.66861565106983,"y":39.0027087758759},{"x":61.755545374613575,"y":55.44165579394572},{"x":46.66590739587607,"y":55.104286583966434},{"x":23.723790829641782,"y":63.097513710579456},{"x":9.230459034510163,"y":68.97590361445778},{"x":0,"y":97.2295900017982},{"x":82.13324519571276,"y":100},{"x":89.31577908007607,"y":89.17597267079191},{"x":95.5333112989282,"y":100},{"x":99.99999999999993,"y":97.75064369226727},{"x":100,"y":47.19299675653545}]},{"id":"poly-1156","title":"Map 8","type":"poly","x":37.605,"y":58.378,"width":2.027,"height":3.125,"x_image_background":37.604864864864865,"y_image_background":58.2525,"width_image_background":2.027027027027027,"height_image_background":2.875,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","width":310,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-897081","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Railway Station:","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/page6_banner9.jpg"}}}]}}]}},"points":[{"x":0,"y":4},{"x":6.665155897996558,"y":100},{"x":99.97733846994696,"y":88},{"x":100,"y":0}]},{"id":"poly-6054","title":"Map 9","type":"poly","x":1.524,"y":0,"width":15.27,"height":11.875,"x_image_background":1.524,"y_image_background":0,"width_image_background":15.27027027027027,"height_image_background":11.875,"default_style":{"background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/page_amenities_04.png","background_color":"#ffffff","background_opacity":0,"stroke_opacity":0.7465736538756127},"mouseover_style":{"background_color":"#c83337","background_opacity":0.8189888748468137,"stroke_opacity":0.5014756146599265,"stroke_width":2},"tooltip_style":{"border_radius":6,"padding":25,"background_color":"#ffffff","position":"bottom","width":310,"auto_width":0,"offset_x":0.677160446579391,"offset_y":-0.6935514831542946},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-375811","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"University","heading":"h1"},"layout":{"box_model":{"padding":{"top":0}}},"font":{"font_family":"Laro","font_size":"18","font_weight":"bold","text_color":"#000000"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/06/home3_banner9.jpg"}}}]}}]}},"points":[{"x":24.778761061946906,"y":3.1578947368421053},{"x":0,"y":61.05263157894737},{"x":1.7699115044247788,"y":69.47368421052632},{"x":23.008849557522126,"y":81.05263157894737},{"x":49.557522123893804,"y":100},{"x":56.63716814159292,"y":94.73684210526315},{"x":100,"y":2.1052631578947367},{"x":99.11504424778761,"y":0}]},{"id":"oval-9533","title":"Oval 0","type":"oval","x":45.713,"y":40.294,"width":10.136,"height":9.128,"x_image_background":45.713,"y_image_background":40.294,"width_image_background":10.136,"height_image_background":9.128,"connected_to":"poly-7770","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-23.png","background_image_opacity":0.9998875038296569},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 0"}}}]}}]}}},{"id":"oval-7797","title":"Oval 1","type":"oval","x":65.254,"y":44.74,"width":5.541,"height":5.125,"x_image_background":65.254,"y_image_background":44.74,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-7523","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-19.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-8749","title":"Oval 1 Copy","type":"oval","x":26.388,"y":56.628,"width":5.541,"height":5.125,"x_image_background":26.388,"y_image_background":56.628,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-8450","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-18.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-6810","title":"Oval 1 Copy Copy","type":"oval","x":79.455,"y":9.612,"width":5.541,"height":5.125,"x_image_background":79.455,"y_image_background":9.612,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-202","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-20.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-2678","title":"Oval 1 Copy Copy Copy","type":"oval","x":86.991,"y":69.095,"width":5.541,"height":5.125,"x_image_background":86.991,"y_image_background":69.095,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-9967","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-21.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-716","title":"Oval 1 Copy Copy Copy Copy","type":"oval","x":63.82,"y":73.061,"width":5.541,"height":5.125,"x_image_background":63.82,"y_image_background":73.061,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-9786","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-22.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-8140","title":"Oval 1 Copy Copy Copy Copy Copy","type":"oval","x":91.372,"y":93.276,"width":5.541,"height":5.125,"x_image_background":91.372,"y_image_background":93.276,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-6738","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-18.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-7756","title":"Oval 1 Copy Copy Copy Copy Copy Copy","type":"oval","x":35.307,"y":52.878,"width":5.541,"height":5.125,"x_image_background":35.307,"y_image_background":52.878,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-1156","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-19.png"},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}},{"id":"oval-8664","title":"Oval 1 Copy Copy Copy Copy Copy Copy Copy","type":"oval","x":5.534,"y":2.287,"width":5.541,"height":5.125,"x_image_background":5.534,"y_image_background":2.287,"width_image_background":5.541,"height_image_background":5.125,"connected_to":"poly-6054","use_connected_shape_tooltip":1,"default_style":{"background_type":"image","background_image_url":"http://dev.wpopal.com/aroland/wp-content/uploads/2019/07/home-5_img-22.png"},"mouseover_style":{"opacity":0.9998875038296569},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oval 1"}}}]}}]}}}]}

Front-end look like :