Cancelled

Responsive Image Map

I have a hand drawn image that contains 6 different buildings in black and white, I will need to change this image to be an 'Image Map', so that when the user moves the mouse over one of the buildings (on mouse hover) this building only gets colored, when the user moves way with the mouse from the building then the building returns back to the black/white version, and when the user clicks on one of the buildings he is directed to another page (i.e. another link or URL)

Take care of the following:

1) The buildings are originally black/white

2) On mouse hover the building gets colored (i.e. the windows has a color, the walls has another color ... etc.) and not only highlighting the whole building using a single color

3) If the resolution of the used browser is reduced to a certain size (i.e. the size of a smart phone) then this image map should be responsive so that only the buildings appear under each other in vertical order without the rest of the image (i.e. each building on a single row)

I will provide the freelancer with the following:

1) 1 image with colored background and all the 6 buildings are in black/white

2) 1 image for each building without the background and the building is in black/white - to use for the responsive version

3) 1 image for each building without the background and the building is colored - to use for the responsive version

4) 1 image with colored background for each building colored - to use in the full width version (i.e. 1 image with background and building 1 is colored, 1 image with background and building 2 is colored ... for all the 6 buildings)

You will need to write the code including any HTML, CSS and JS that you might need but for the images I will provide you with all the versions that you might need

Acceptance Criteria:

1) Everything is delivered with high quality

2) Work without issues on Chrome, Firefox, IE11, Edge and Safari

3) The responsive version is working as explained above

4) Delivered in the agreed upon number of days

5) You will deliver all the source code plus instructions on how to add it into the website using IFrame

6) The code should be working without issues within an IFrame embedded inside a WordPress theme, we are using the 'Total' WP theme and the page that will host the responsive image map is built using 'WP Divi Builder' inside an IFrame

Skills: CSS, HTML5, Javascript

See more: asp net google map image, google map api saving map image, save map image google, save google map image google map api, save map image google maps api, google map image gallery integration, google maps save map image, aspnet google maps save map image, save map image google map, google map image days older, address google map image, saving google map image, save goog map image, save google map image, save map image google maps

About the Employer:
( 33 reviews ) Cairo, Egypt

Project ID: #12756855

10 freelancers are bidding on average $59 for this job

$150 USD in 5 days
(123 Reviews)
6.9
$55 USD in 2 days
(33 Reviews)
5.3
OECWeb

Hello, I have high experience in fields. I'm start work today and I can help you immediately Thank you, OECWeb

$100 USD in 1 day
(39 Reviews)
4.9
ZahidHasanKhan

Dear Sir, By reading the entire project descriptions, I am pleased to present my application for your your job posting. Having several years experience in the programming and a strong educational background featuring More

$22 USD in 1 day
(22 Reviews)
4.5
yogeshssanwal

I am Yogesh sanwal, 5+ years experienced in website and e-commerce development using PHP/MySQL and Internet Marketing. Take a look to my last work: [url removed, login to view] [url removed, login to view] http: More

$25 USD in 1 day
(15 Reviews)
3.9
$25 USD in 1 day
(3 Reviews)
3.5
khizarali47

Hi, Immediate Available, Expert of this task.. Please visit few recent jobs performed: [url removed, login to view] [url removed, login to view] [url removed, login to view] [url removed, login to view] http://mysocialmedia10 More

$30 USD in 1 day
(4 Reviews)
3.0
$140 USD in 4 days
(4 Reviews)
3.1
jhgomez89

It will be implemented in a clean, clear and documented way for greater understanding, in the implementation with wordpress using <iframe>

$22 USD in 5 days
(0 Reviews)
0.0
phpboss786

Greetings ! I have read your project and checked details. I can do this task. For my portfolio (previous work) please contact me. If needed I can provide little demo. We are sJSolutions which is an IT firm with 9 emplo More

$20 USD in 0 days
(1 Review)
0.0