title: ImageButton in Nativescript
body: <p>I wanted to know how one could add text to the picture in nativescript and other custom animations etc, and I also wanted to know how one could manipulate a button on each page. For example: I have 2 buttons on one page and I want to manipulate each button so I can have better control.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: So far I have this:</p>
  
  <pre><code>&lt;Page loaded="pageLoaded"&gt;
  
  &lt;StackLayout&gt;
  
      &lt;Image row="1"/&gt;
          &lt;Button row="1"/&gt;
              &lt;Image src="~/images/1stfloor.jpg" height="200" width="200"/&gt;
                  &lt;Button text ="clickone" tap="tapAction" /&gt;
  
  
  &lt;Image row="1" /&gt;
  &lt;Button row="1" /&gt;
  &lt;Image src="~/images/2ndfloor.jpg" height="200" width="200"/&gt;
  &lt;Button text ="hiya" tap="tapAction"/&gt;
  
  
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thats essentially my xml code and I want to know how I could do the above. </p>
  
  <p>JS: </p>
  
  <pre><code>var frameModule = require("ui/frame");
  
  exports.pageLoaded = function(args) {
      var page = args.object;
      page.bindingContext = {};
  
      page.css = "Button1 {color : green}";
      page.css = "Button2 {color: red}";
  }
   //later items will overlap the earlier items
  exports.tapAction = function() {
      frameModule.topmost().navigate("second-page");
  }
  </code></pre>
  
  <p>EDIT: So this is essentially how my app looks like, I essentially need to have 3 pictures that serve as buttons and need to go into different pages. The pictures are to be arranged on top of each other.</p>
  
  <p><a href="https://i.stack.imgur.com/an3jt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/an3jt.png" alt="Info"></a></p>