4 Replies - 1107 Views - Last Post: 15 September 2012 - 04:56 PM

#1 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

image change on refresh

Posted 15 September 2012 - 02:01 PM

Hi guys, I have seen a lot of examples of what I am after online, however nothing is quite what I need. What I am attempting to do makes things a little more complex. Within a div, I have quite a few images displayed (I am only showing a couple).
<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.

Now for the fun part. What I am attempting to do is change the images with javascript everytime the page is refreshed. I wont bother about the tab images for now, I showed these to demonstrate what I am doing, incase it has a bearing on what I need to do.

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.

Cheers

Is This A Good Question/Topic? 0
  • +

Replies To: image change on refresh

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: image change on refresh

Posted 15 September 2012 - 02:51 PM

if you use a server-side language, make that choose random pictures for each request.
Was This Post Helpful? 1
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: image change on refresh

Posted 15 September 2012 - 03:03 PM

The problem is, I am not really looking to display random images. I want to display specific images on each request.
So, the page is loaded,
div a - image 1
div b - image 2
div c - image 3
div d - image 4

The page is refreshed
div a - image 5
div b - image 6
div c - image 7
div d - image 8

Refreshed again
div a - image 1
div b - image 2
div c - image 3
div d - image 4

etc etc. So its not really random images I want displayed. So, div a will always only have a choice of image 1 or image 5. It will always reverse between the two.

Nick
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: image change on refresh

Posted 15 September 2012 - 03:06 PM

You could store a counter in a cookie that is incremented by one each time the page is loaded. You could then use that counter to determine which images are supposed to be displayed, and change their src attribute accordingly.

See this article for an easy way to interact with cookies.

I don't know your exact formula for this, but what you described could be done using the modulus operator.
var counter = parseInt(readCookie("counter"));
if (isNaN(counter)) {
    counter = 0;
}
createCookie("counter", ++counter, 31);

if (counter % 2 == 0) {
    img1.src = "img1.jpg";
    img2.src = "img2.jpg";
} else {
    img1.src = "img3.jpg";
    img2.sec = "img4.jpg";
}


Was This Post Helpful? 1
  • +
  • -

#5 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: image change on refresh

Posted 15 September 2012 - 04:56 PM

Kool, thanks for the replies. I am trying to implement this now, and just want to make sure I am on the right lines. So in my javascript file, I just add
var counter = parseInt(readCookie("counter"));
if (isNaN(counter)) {
    counter = 0;
}
createCookie("counter", ++counter, 31);

if (counter % 2 == 0) {
    img1.src = "img1.jpg";
    img2.src = "img2.jpg";
} else {
    img1.src = "img3.jpg";
    img2.sec = "img4.jpg";
}


Although it may be better putting it in a document ready function? And then with the html, I take it img1 and img2 relate to the class name? So in essense, I would do something along the lines of
<div class="test">
<a href="http://www.example.com/">
    <img class="img1" src="" height="114px" width="156px"></img>
</a>
<a href="http://www.example2.com/">
    <img class="img2" src="" height="114px" width="156px"></img>
</a>
</div>



I am not sure if I even need the src in my html, or if I just let javascript add it?

Nick
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1