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");

rscheitlin

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>