Really need another pair of eyes to look at some JavaScript code

Question

I think it is just something simple, but I have done trying for two days. All I want to do is just to hide one image and turn on the other image. But nothing seem to work. I have tried clearing the browser cache ever time I test the page. Every time I mouse over on the image map to trigger function Change1(), all it does is hiding image "body_interactive_image_default.png". But it does nothing to image "body_interactive_image_love_lit.png"???? Why????

The browsers I am using:
Windows Chrome 75.0.3770.100
Windows IE 11
Android Chrome 75.0.3770.100

Here is my JavaScript code:

function change1() {
    document.getElementById('maptreebg').style = "visibility:hidden; z-index: 0";
    document.getElementById('image1ch').style.display = "block";
    document.getElementById('image1ch').style = "visibility:visible; z-index: 100";
    document.getElementById('image1ch').width = 290;
    document.getElementById('image1ch').style.width = 290;
    return true;
};

Here is my HTML code:

    <div id="div4" class="div4">
        <img name="maptreebg" id="maptreebg" class="img4" alt="" src="/handheld/images/mainbody/body_interactive_image_default.png" usemap="#maptree" />
        <map name="maptree" id="maptree" class="maptree">
            <area id="ar1" shape="poly" coords="3,390,13,381,66,371,113,351,172,313,193,290,217,273,242,259,297,238,344,222,394,213,461,206,521,202,588,205,638,208,694,221,751,249,800,289,835,340,852,397,849,435,815,494,781,526,767,543,728,566,670,586,614,593,521,597,467,590,386,585,309,565,276,554,253,542,228,537,174,503,113,464,76,438,36,416,6,398,4,394" alt="Love" onmouseover="change1()" href="/handheld.aspx" />
            <area id="ar2" shape="poly" coords="1990,389,1967,376,1929,373,1879,351,1846,334,1814,308,1786,279,1705,243,1636,220,1549,210,1475,203,1399,204,1331,212,1267,232,1213,268,1179,303,1155,336,1138,390,1138,419,1153,462,1191,510,1226,545,1305,581,1368,593,1448,597,1540,587,1610,586,1674,566,1737,545,1775,530,1841,487,1913,440,1949,416,1968,414,1991,392" alt="Family" onmouseover="change2()" href="/handheld.aspx" />
            <area id="ar3" shape="poly" coords="0,849,32,835,73,827,123,806,156,779,188,749,227,723,292,699,358,676,426,667,517,662,609,664,654,671,727,692,770,721,807,755,834,796,850,842,852,880,845,906,814,952,776,993,736,1017,689,1038,635,1051,573,1054,494,1053,435,1045,384,1043,328,1030,272,1013,256,1003,218,993,186,968,149,944,118,924,92,906,66,890,47,878,22,867" alt="Friend" onmouseover="change3()" href="/handheld.aspx" />
            <area id="ar4" shape="poly" coords="1987,848,1972,837,1919,826,1868,805,1812,760,1773,728,1668,684,1585,669,1492,661,1385,662,1301,675,1225,712,1178,760,1158,794,1137,853,1143,896,1180,959,1224,1000,1294,1039,1365,1050,1470,1055,1552,1045,1615,1040,1677,1023,1757,996,1815,963,1876,925,1924,890,1969,866,1991,848,1985,850" alt="Colleaque" onmouseover="change4()" href="/handheld.aspx" />
            <area id="ar5" shape="poly" coords="0,1305,16,1295,55,1290,109,1266,139,1253,172,1226,208,1193,253,1171,315,1145,388,1128,480,1117,582,1119,644,1124,701,1141,758,1168,808,1211,835,1257,853,1310,847,1359,796,1428,750,1468,713,1487,645,1509,556,1509,493,1509,432,1505,368,1497,317,1482,265,1467,231,1453,187,1429,73,1352,43,1335,21,1326,6,1312" alt="Business" onmouseover="change5()" href="/handheld.aspx" />
            <area id="ar6" shape="poly" coords="1987,1302,1960,1293,1914,1281,1865,1262,1815,1222,1777,1191,1692,1154,1614,1130,1520,1121,1409,1117,1331,1126,1280,1145,1216,1178,1177,1225,1159,1251,1140,1302,1138,1323,1145,1358,1174,1409,1222,1456,1263,1481,1330,1503,1373,1510,1463,1512,1539,1503,1606,1500,1667,1485,1707,1476,1732,1460,1771,1449,1827,1412,1909,1355,1980,1319" alt="Educator/Learner" onmouseover="change6()" href="/handheld.aspx" />
            <area id="ar7" shape="poly" coords="47,3567,995,3069,1952,3569,1839,3569,1839,3568,1772,3569" alt="Registration" onmouseover="change7()" href="/handheld.aspx" />
        </map>

        <img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_love_lit.png" />
        <img name="image2ch" id="image2ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_family_lit.png" />
        <img name="image3ch" id="image3ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_friend_lit.png" />
        <img name="image4ch" id="image4ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_clq_lit.png" />
        <img name="image5ch" id="image5ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_bus_lit.png" />
        <img name="image6ch" id="image6ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_ed_ln_lit.png" />
        <img name="image7ch" id="image7ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_reg.png" />

    </div>

Here is the top of my HTML code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="/handheld/default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WeConnec</title>
    <link rel="stylesheet" href="/handheld/style/index.css" type="text/css" />
    <script type="text/javascript" src="/handheld/handheld.js"></script>
</head>

Answer 1

I've replaced the map with images, and reduced the function to its essentials. Notice also that I've removed the height and width attributes from img#image1ch :

 function change1() { var el = document.getElementById('image1ch'); el.style.visibility = "visible"; el.style.zIndex = "100"; el.style.width = "290px"; el.style.height = "auto"; return true; }; 

 <div id="div4" class="div4"> <img name="maptreebg" id="maptreebg" class="img4" alt="" src="http://placekitten.com/120/120" usemap="#maptree" /> <img src="http://placekitten.com/100/100" onmouseover="change1()" href="/handheld.aspx" /> <img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0;" alt="" src="http://placekitten.com/140/140" width="0" height="0" /> </div>