Can I make image replacement on rollover of hotspots responsive?

[daveharr1s0n]

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

[Nancy OShea · Accepted solution]

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

[daveharr1s0n]

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

[osgood_]

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;

}

}

[daveharr1s0n]

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