Canvas Support

Responsive image map on background Image Parallax index-parallax.html

1 reply · opened Feb 12, 2019

Kkhalid11Feb 12, 2019

Please help I am trying to create an image map when I hover over coordinates on the background image a new image pops up like a tool tip but with an image. Also I want to make it responsive so that the coordinates adjust based on screen size. Here's my code below please help.

	<div class="full-screen force-full-screen" style="background: url('images/slider/full/UAV_VTOL_Main1.png') center center no-repeat; background-size: cover; img id="main-img"  usemap"#Map1">

<!-- Content
============================================= -->
<section id="content">

		&lt;div class="content-wrap nopadding"&gt;

			&lt;div class="section parallax full-screen dark nomargin noborder" style="background-image: url('images/slider/full/UAV_VTOL_Main1.png') img id="main-img" usemap="#Map1";" data-bottom-top="background-position:0px 0px;" data-top-bottom="background-position:0px -300px;"&gt;
            
            &lt;map name="Map1" id="Map1"&gt;
            
			  &lt;area shape="circle" coords="541,204,12" href="#" alt="Clio Surface Actuation"&gt;
			  &lt;area shape="circle" coords="437,175,12" href="#" alt="Clio Engine Management"&gt;
			  &lt;area shape="circle" onMouseOver="document.getElementById('main-img').src = 'images/slider/full/UAV_VTOL_Clio_radio_mgmt.png';" onMouseOut="document.getElementById('main-img').src = 'images/slider/full/UAV_VTOL_Main1.png';" coords="395,134,10" href="#" alt="Clio Radio Management"&gt;
			&lt;area shape="circle" onMouseOver="document.getElementById('main-img').src = 'images/slider/full/UAV_VTOL_Tercel_Flight_Computer.png';" onMouseOut="document.getElementById('main-img').src = 'images/slider/full/UAV_VTOL_Main1.png';" coords="535,141,10" href="#" alt="Tercel Flight Computer"&gt;
		  &lt;/map&gt;
SSemicolon WebSTAFFFeb 12, 2019

Hello,

Unfortunately, we currently do not support Customization Requests! You will need to code this functionality manually or Hire a Freelancer to do it for you. Please consider checking out the Item Support Policy: https://themeforest.net/page/item_support_policy .

We are always here to help you with any issues you face with the features included with Canvas. Thanks for Understanding.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard