onmouseover event with image map

Question

I want to light up items when you hover your mouse over the iPhone. But not when you go over the area tags. Below is my code:

window.onload = function () {
    var imgPad = "../images/";
    var canSwap = document.images ? true : false;

    function swapImage(targetImg, newImg) {
        var plaatje = document.getElementById(targetImg); // There must be an img object in your HTML with the id 'mainImg' in this case.
        if (canSwap) {
            plaatje.src = imgPad + newImg; // in this case the source of image "../images/newImg.gif"
        }
    }

    mainImg.addEventListener("mouseover", function () {
        swapImage("mainImg", "backCamera.png"); // Perform function  
    }, false);

    mainImg.addEventListener("mouseout", function () {
        swapImage("mainImg", "iphonexInside.png"); // Perform function  
    }, false);
}

<div id="iphone"><img id="mainImg" src="../images/iphonexInside.png" alt="iPhone X" usemap="#hardwareMap"></div>

<map id="hardwareMap" name="hardwareMap">
    <area class="iphoneLink" alt="" title="" href="#" shape="rect" coords="552,48,688,313">
    <area class="iphoneLink" alt="" title="" href="#" shape="rect" coords="59,1209,347,1316">
    <area class="iphoneLink" alt="" title="" href="#" shape="rect" coords="477,21,528,101">
    <area class="iphoneLink" alt="" title="" href="#" shape="rect" coords="426,1339,655,1414">
    <area class="iphoneLink" alt="" title="" href="#" shape="poly"
          coords="47,220,398,218,401,814,606,822,607,1186,38,1190">
</map>

Mouse events are not available in most mobile devices, with a few exceptions such as desktops with touch screens, etc.. You'll need to target hover for desktop and "long touch" for mobile. Check out this thread to differentiate touched from 'long touch': https://stackoverflow.com/questions/6139225/how-to-detect-a-long-touch-pressure-with-javascript-for-android-and-iphone — Marventus, Jan 16 '18 at 21:10

onmouseover event with image map

0 Answers0