title: image src transitions appears for the user
body: <p>I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..</p>
  
  <p>So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing </p>
  
  <p>....Here are my html,css,javascript</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("Golds").addEventListener('touchstart', function(){
   window.location.href='#loginpage';
   var x= document.getElementById("GymLogin");
   x.src="goldsgymlogo.png";
   x.style.display = "inline";
  });
  document.getElementById("Titans").addEventListener('touchstart', function(){
   window.location.href='#loginpage';
   var x= document.getElementById("GymLogin");
   x.src="Titans.jpg";
   x.style.display = "inline";
  });
  document.getElementById("Smart").addEventListener('touchstart', function(){
   window.location.href='#loginpage';
   var x= document.getElementById("GymLogin");
   x.src="smart.png";
   x.style.display = "inline";
  });
  document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
   window.location.href='#loginpage';
   var x= document.getElementById("GymLogin");
   x.src="Samia-Allouba.jpg";
   x.style.display = "inline";
  });
  document.getElementById("Fibers").addEventListener('touchstart', function(){
   window.location.href='#loginpage';
   var x= document.getElementById("GymLogin");
   x.src="fibers.jpg";
   x.style.display = "inline";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
  Thats My CSS
  */
  
  #GymLogin{
   display: none;
   margin-left:30%;
   margin-top:15%;
   max-width:135px;
   max-height:135px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--HTML CODE HERE--&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Phone Gap trial&lt;/title&gt;
  &lt;link rel= 'stylesheet' href='css/bootstrap.css' /&gt;
  &lt;link rel= 'stylesheet' href='css/font-awesome.min.css' /&gt;
   &lt;link rel= 'stylesheet' href='css/style.css' /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="childbrowser.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="Torch.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="start" class="ourteam text-center"&gt;
   &lt;!--start container--&gt;
   &lt;div  class="team"&gt;
   &lt;section class="header"&gt;
    &lt;div&gt;
    &lt;h1&gt;Train &amp; Game&lt;/h1&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;div class="container"&gt;
    
     &lt;div class="row"&gt;
  
     &lt;div class="col-xs-4"&gt;
     &lt;div class="person"&gt;
     &lt;img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/&gt;
     &lt;h6&gt;Gold's Gym&lt;/h6&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="col-xs-4"&gt;
     &lt;div class="person"&gt;
     &lt;img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/&gt;
     &lt;h6&gt;Titans Gym&lt;/h6&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="col-xs-4"&gt;
     &lt;div class="person"&gt;
     &lt;img id="Smart" class="teamphotos img-circle" src="img\smart.png"/&gt;
     &lt;h6&gt;Smart Gym&lt;/h6&gt;
     &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;/div&gt;
     &lt;br&gt;
     &lt;div class="row"&gt;
     
     &lt;div class="col-xs-6"&gt;
     &lt;div class="person"&gt;
     &lt;img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/&gt;
     &lt;h6&gt;Samia Allouba&lt;/h6&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="col-xs-6"&gt;
     &lt;div class="person"&gt;
     &lt;img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/&gt;
     &lt;h6&gt;Fibers Gym&lt;/h6&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;/div&gt;
  
     &lt;/div&gt;
     &lt;!--end container--&gt;
   &lt;/div&gt; 
   &lt;!--end team--&gt;
   &lt;/div&gt;
  &lt;!--Our team div end--&gt;
  
  
  
  &lt;!-- Start Login Page --&gt;
  &lt;div data-role="page" id="loginpage" onblur="deletesrc()"&gt;
    &lt;img id="GymLogin" class="img-circle" src=""/&gt;
        &lt;input type="text" size="15"  id="Usernameinput" placeholder="Username"&gt;
          &lt;span id="asterisk1" class="asterisk"&gt;  &lt;/span&gt;  
        &lt;input type="password" id="Passwordinput" placeholder="Password"&gt;
        &lt;span id="asterisk2" class="asterisk"&gt;  &lt;/span&gt;  
    &lt;button class="btn btn-danger" id="GymName"&gt;Omar&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- End Login Page --&gt;
  &lt;script src="js/jquery-2.1.4.min.js"&gt; &lt;/script&gt;
  &lt;script src="js/jquery.mobile-1.4.5.min.js"&gt; &lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt; &lt;/script&gt;
  &lt;script src="js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>