Databases
StackOverflow2013
Postsdbo
POSwitch image when page refreshes using Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSwitch image when page refreshes using Javascript
    text
    copied!<p>How to switch an image when the page refreshes, using Javascript?</p> <p>Let's say I have 2 images:</p> <ul> <li>ImageA.jpg</li> <li>ImageB.jpg</li> </ul> <p>I want to switch those images at locationA and locationB when the page is refreshed.</p> <p><strong>Simulation:</strong></p> <pre><code>- Page Refresh #1 &lt;img id='locationA' src='ImageA.jpg'&gt; &lt;img id='locationB ' src='ImageB.jpg'&gt; - Page Refresh #2 &lt;img id='locationA' src='ImageB.jpg'&gt; &lt;img id='locationB ' src='ImageA.jpg'&gt; - Page Refresh #3 &lt;img id='locationA' src='ImageA.jpg'&gt; &lt;img id='locationB ' src='ImageB.jpg'&gt; </code></pre> <p><strong>[Update #1]</strong></p> <p>I try this implementation, but it doesn't work. Could anyone tell me whats wrong with this code?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; var images = []; images[0] = "I_am_Super_Magnet%21.jpg"; images[1] = "World_In_My_Hand%21.jpg"; var index = sessionStorage.getItem('index'); if(index) index = 0; if(index==0) { document.getElementById("locationA").src=images[index]; document.getElementById("locationB").src=images[index+1]; index = index + 1; } else if(index==1) { document.getElementById("locationA").src=images[index]; document.getElementById("locationB").src=images[index-1]; index = index - 1; } sessionStorage.setItem('index', index); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img id='locationA' src=''&gt; &lt;img id='locationB' src=''&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>[Update #2]</strong></p> <p>Tested on: </p> <ul> <li>FF 16.0.1 --> Working! </li> <li>IE 8 --> doesn't work</li> </ul> <p>Here is the code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function switchImage() { var images = []; images[0] = "I_am_Super_Magnet%21.jpg"; images[1] = "World_In_My_Hand%21.jpg"; var index = sessionStorage.getItem('index'); if(index == null) index = 0;//set index to zero if null index = parseInt(index);// parse index to integer, because sessionStorage.getItem() return string data type. if(index == 0) { document.getElementById("locationA").src=images[index]; document.getElementById("locationB").src=images[index+1]; index = index + 1; } else if(index == 1) { document.getElementById("locationA").src=images[index]; document.getElementById("locationB").src=images[index-1]; index = index - 1; } sessionStorage.setItem('index', index); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="switchImage()"&gt; &lt;img id='locationA' src='src_locationA'&gt; &lt;img id='locationB' src='src_locationB'&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <blockquote> <p>Thanks to <a href="https://stackoverflow.com/users/1338292/jack">Jack</a> for the clue! and thanks to <a href="https://stackoverflow.com/users/946199/jon-kartago-lamida">Jon Kartago Lamida</a> for the sample!</p> </blockquote> <p>Thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload