Skip to main content
daveharr1s0n
daveharr1s0n
Inspiring
July 13, 2018
Answered

Can I make image replacement on rollover of hotspots responsive?

  • July 13, 2018
  • 1 reply
  • 1153 views

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

This topic has been closed for replies.
Correct answer Nancy OShea

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

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
July 14, 2018

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— Product User & Community Expert
    daveharr1s0n
    daveharr1s0nAuthor
    Inspiring
    July 20, 2018

    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

    O
    osgood_
    Legend
    July 20, 2018

    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;

    }

    }

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices