Highlighted

Can I make image replacement on rollover of hotspots responsive?

Participant ,
Jul 13, 2018

Copy link to clipboard

Copied

Hello Forum

I'm redesigning a client's website and one thing they still want is the programs map which I created through an old version of Dreamweaver involving image swap on rollover of 20 different hotspots on the map. It seems clumsy, or clunky considering what might be available these days.

Any advice on how I can accomplish this in today's world of responsive web design? If you look at the map of Wisconsin on a laptop or tablet, it still works. But on phones it doesn't. I think it changes where these hotspots are as the map scales down to fit on the page.

Ideally I wouldn't have to have 20 different image rollovers, but would still like the effect of the highlighted radius and a box that pops up showing program location, etc.

And I know, it might not be so "practical" to have such a map on small phones, but the client wants it.

Thanks for any help!

Dave

Wisconsin Association for Homeless and Runaway Services | Programs

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Image maps are not responsive because as you say, the hotspots drift out of aligment with the rescaled image.  Below are some workarounds.

Custom Google Maps.

My Maps – About – Google Maps

jQuery plugin. 

Responsive Image Maps jQuery Plugin

Responsive SVG.

the new code – Create A Responsive Imagemap With SVG

Views

408

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can I make image replacement on rollover of hotspots responsive?

Participant ,
Jul 13, 2018

Copy link to clipboard

Copied

Hello Forum

I'm redesigning a client's website and one thing they still want is the programs map which I created through an old version of Dreamweaver involving image swap on rollover of 20 different hotspots on the map. It seems clumsy, or clunky considering what might be available these days.

Any advice on how I can accomplish this in today's world of responsive web design? If you look at the map of Wisconsin on a laptop or tablet, it still works. But on phones it doesn't. I think it changes where these hotspots are as the map scales down to fit on the page.

Ideally I wouldn't have to have 20 different image rollovers, but would still like the effect of the highlighted radius and a box that pops up showing program location, etc.

And I know, it might not be so "practical" to have such a map on small phones, but the client wants it.

Thanks for any help!

Dave

Wisconsin Association for Homeless and Runaway Services | Programs

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Image maps are not responsive because as you say, the hotspots drift out of aligment with the rescaled image.  Below are some workarounds.

Custom Google Maps.

My Maps – About – Google Maps

jQuery plugin. 

Responsive Image Maps jQuery Plugin

Responsive SVG.

the new code – Create A Responsive Imagemap With SVG

Views

409

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 13, 2018 0
Adobe Community Professional ,
Jul 14, 2018

Copy link to clipboard

Copied

Image maps are not responsive because as you say, the hotspots drift out of aligment with the rescaled image.  Below are some workarounds.

Custom Google Maps.

My Maps – About – Google Maps

jQuery plugin. 

Responsive Image Maps jQuery Plugin

Responsive SVG.

the new code – Create A Responsive Imagemap With SVG

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2018 1
Participant ,
Jul 19, 2018

Copy link to clipboard

Copied

Thanks Nancy,

Not sure the workarounds really work for my purposes. For the time being I'll give up and just keep what the client wants for desktop/tablet and hide it on phones.

One problem on the page I forgot about. Maybe you can help.

When I open the Programs page on a desktop or tablet the secondary navigation shows the "Wisconsin Runaway" tab as the default open page. When I open the Programs page on a phone the navigation "Wisconsin Runaway" tab is not showing in the default open state (until clicked on). Any clue as to how to fix that?

Here's are the two scripts:

<script>

// Used to toggle the menu on small screens when clicking on the menu button

function myFunction() {

    var x = document.getElementById("navDemo");

    if (x.className.indexOf("w3-show") == -1) {

        x.className += " w3-show";

    } else {

        x.className = x.className.replace(" w3-show", "");

    }

}

</script>

<script>

function openProgram(evt, programName) {

    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) {

        tabcontent.style.display = "none";

    }

    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {

        tablinks.className = tablinks.className.replace(" active", "");

    }

    document.getElementById(programName).style.display = "block";

    evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

And here is the page: Wisconsin Association for Homeless and Runaway Services | Programs

As always, thanks for any help!

Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
LEGEND ,
Jul 20, 2018

Copy link to clipboard

Copied

daveharr1s0n  wrote

One problem on the page I forgot about. Maybe you can help.

When I open the Programs page on a desktop or tablet the secondary navigation shows the "Wisconsin Runaway" tab as the default open page. When I open the Programs page on a phone the navigation "Wisconsin Runaway" tab is not showing in the default open state (until clicked on). Any clue as to how to fix that?

You don't need 2 instances of your navigation code.....that's a nightmare to manage if you want to update the links text at a future stage and also bloats the code........just use the 1 instance for both desktop and mobile, see revised code below: (this also takes care of your 'active' tab when initially visiting the website). The reason the 'active' tab its currently not working is you have 2 instances of the id 'defaultOpen' but if you only use 1 instance of it both desktop and mobile will work, as you require.

<div class="w3-row w3-navigation">

<div class="w3-third tab">

<button class="tablinks" onClick="openProgram(event, 'Runaway')" id="defaultOpen">Wisconsin Runaway</button>

</div>

  

<div class="w3-third tab">

<button class="tablinks" onClick="openProgram(event, 'Transitional')">Transitional Living</button>

</div>

        

<div class="w3-third tab">

<button class="tablinks" onClick="openProgram(event, 'Street')">Street Outreach</button>

</div>

  

</div>

<!-- end w3-navigation -->

Then you can add a simple css media query to your css file which adds the padding around the links and the bottom margin for mobile devices:

@media screen and (max-width: 768px) {

.w3-navigation {

padding: 32px;

background-color: #000;

}

.w3-navigation button {

margin: 0 0 8px 0;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2018 2
Participant ,
Aug 09, 2018

Copy link to clipboard

Copied

Ah, problem solved! Yes, I didn't like the idea of having two instances of that in there either.

Thanks, Osgood! I really appreciate it!

Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 09, 2018 0