Buttons vs Images...

[jaykapalczynski]

I have an image working to fire some code and a button as well....I want to change the BUTTON below to something liek this and cant figure it out.

HTML:

<td align="center" id="DrawGraphics" class="tdHeader">

    <img alt="Settings" src="imagesApp/PencilBlue.png" class="imgOptions" title="Draw" style="cursor: pointer" />

</td>

JAVASCRIPT

on(dojo.byId('DrawGraphics'), "click", DrawGraphics);

function DrawGraphics() {

    if (action2 != undefined) {

          action2.pause();

    }

}

I WANT TO CHANGE THE BELOW TO fire with an image and not a big button....  any thoughts on this..can I get this toggle to run from an image click instead of a button....

HTML

<td align="left" id="Imagery" class="tdHeader">

    <button id="programmatic"></button>

</td>

JAVASCRIPT

   base1 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {

      id: "baseTopo",

      visible: true

   });

   base2 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {

      id: "baseImagery",

      visible: false

   });

  app.map.addLayers([base1, base2]);

   new ToggleButton({

        showLabel: true,

        checked: false,

        onChange: function (val) {

            base1.setVisibility(!val);

            base2.setVisibility(val);

        }

   },"programmatic");

[RobertScheitlin__GISP]

Jay,

  What specifically are you having trouble with? You already have the code that is needed to attach to the images click function...

[RobertScheitlin__GISP · Accepted solution]

DGIFMapping_2.js

     on(dojo.byId('Imagery').children[0], "click", changeBasemap);

      function changeBasemap(){
          if(base1.visible){
            base1.setVisibility(false);
            base2.setVisibility(true);
          }else{
            base1.setVisibility(true);
            base2.setVisibility(false);
          }
        }

DGIFMapping_2.html

<td align="center" id="Imagery" class="tdHeader">
     <img src="imagesApp/Layers2.png" title="Basemap" style="cursor: pointer"/>
</td>

[jaykapalczynski]

That was it....I was still trying to use the Toggle inside a function which was screwing me up...

The IF ELSE statement does just fine....

THANKS....again....

[RobertScheitlin__GISP]

Jay,

  You can also shorthand this function by removing the if statement and just using these two lines:

     function changeBasemap(){
          base1.setVisibility(!base1.visible);
          base2.setVisibility(!base2.visible);
     }

Some may like it better the other way for readability, but I like shorter code.