CODEWITHSUNDEEP
javascript
mohaidar
mohaidar

Reputation: 4286

changing the display value using JavaScript does not work

I need your help.

I have the following code, in the end of this cod there exist a JavaScript code which change the display value for the div and the tables elements on click of some area of the map, but unfortunately it does not work. 

<img src="http://mobiadhome.com/wp-content/uploads/2014/07/HOW-DOES-MOBIAD-WORK.jpg" style="min-width: 756px;" alt="HOW DOES MOBIAD WORK" usemap="#How" id="how">

<map name="How">
  <area shape="circle" coords="365,150,70" alt="Mercury"  href="#how"  onclick="showImage('#ad1');">
  <area shape="circle" coords="531,218,70" alt="Mercury"  href="#how"  onclick="showImage('#ad2');">
  <area shape="circle" coords="610,375,70" alt="Mercury"  href="#how"  onclick="showImage('#ad3');">
  <area shape="circle" coords="565,545,70" alt="Mercury"  href="#how"  onclick="showImage('#ad4');">
  <area shape="circle" coords="415,640,70" alt="Mercury"  href="#how"  onclick="showImage('#ad5');">
  <area shape="circle" coords="241,610,70" alt="Mercury"  href="#how"  onclick="showImage('#ad6');">
  <area shape="circle" coords="135,465,70" alt="Mercury"  href="#how"  onclick="showImage('#ad7');">
</map>



<style>
    #ad1, #ad2, #ad3, #ad4, #ad5, #ad6, #ad7
    {
        width:100vw;
        height: 100vh;
        z-index: 200;
        position: absolute;
        top: 0px;
        right: 0px;
        display:none;
    }

    #ad1 img, #ad2 img, #ad3 img, #ad4 img, #ad5 img, #ad6 img, #ad7 img
    {
        width: 500px;
    }

    #background
    {
        opacity: 0.6;
        background-color: black;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
        width:100vw;
        height: 100vh;
        display:none;
    }
</style>

<div id="background">

</div>

<table id="ad1" class="adunit" >
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-472.png" /></center>
        </td>
    </tr>
</table>

<table id="ad2"  class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-381.png" /></center>
        </td>
    </tr>
</table >

<table id="ad3" class="adunit">
    <tr>
        <td valign="middle "  class="asunit">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-561.png" /></center>
        </td>
    </tr>
</table>


<table id="ad4" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-111.png" /></center>
        </td>
    </tr>
</table>

<table id="ad5" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-201.png" /></center>
        </td>
    </tr>
</table>

<table id="ad6"  class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-201.png" /></center>
        </td>
    </tr>
</table>

<table id="ad7" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-40.png" /></center>
        </td>
    </tr>
</table>



<script type='text/javascript'>

    function showImage(id)
    {
        document.getElementById(id).style.display='block';
        document.getElementById("background").style.display='block';

    }

    document.getElementById("background").onclick = function(){

        document.getElementsByClassName("adunit").style.display='none';
        document.getElementById("background").style.display='none';

    }

</script>

Upvotes: 0

Views: 49

Answers (2)

Upperstage
Upperstage

Reputation: 3757

document.getElementById("background").onclick

Try changing this to

document.getElementByClass("body").onclick

Upvotes: 0

Amit
Amit

Reputation: 15387

Use as below HTML, No need to # in JAVASCRIPT

<map name="How">
  <area shape="circle" coords="365,150,70" alt="Mercury"  href="#how"  onclick="showImage('ad1');">
  <area shape="circle" coords="531,218,70" alt="Mercury"  href="#how"  onclick="showImage('ad2');">
  <area shape="circle" coords="610,375,70" alt="Mercury"  href="#how"  onclick="showImage('ad3');">
  <area shape="circle" coords="565,545,70" alt="Mercury"  href="#how"  onclick="showImage('ad4');">
  <area shape="circle" coords="415,640,70" alt="Mercury"  href="#how"  onclick="showImage('ad5');">
  <area shape="circle" coords="241,610,70" alt="Mercury"  href="#how"  onclick="showImage('ad6');">
  <area shape="circle" coords="135,465,70" alt="Mercury"  href="#how"  onclick="showImage('ad7');">
</map>

Upvotes: 2

Related Questions