<div class="test"> <a href="http://www.example.com/"> <img class="tab-1" src="/images/1.jpg" height="114px" width="156px"></img> <img class="tab-1a" src="/images/1tab.jpg" height="116px" width="139px"></img> </a> <a href="http://www.example2.com/"> <img class="tab-2" src="/images/2.jpg" height="114px" width="156px"></img> <img class="tab-2a" src="/images/2tab.jpg" height="116px" width="139px"></img> </a> </div>
Now to try and explain the above. When my page is loaded, the first a displays 1.jpg and the second a displays 2.jpg. 1tab.jpg and 2tab.jpg are set to display:none. When the page is resized, css in my media query sets 1.jpg and 2.jpg to display none, and 1tab.jpg and 2tab.jpg to display block. So basically only 1 image is ever displayed within an a at any one time, the image depends on the size of the browser.
Ok, so now I display 1.jpg and 2.jpg. When the page is refreshed, I need it to display 2 new images 3.jpg and 4.jpg. When the page is refreshed again, it will go back to 1 and 2 and so forth.
Is something like this possible? As I say, I have seen some examples, but they all seem to display random images in one location. I know what images I want displayed, and I have several places I want to display them.