/    Sign up×
Community /Pin to ProfileBookmark

A new image each time page is reloaded???

I am not sure if this is the right forum to post this question in, but I am thinking that javascript might be the thing to use for this…
I would like to have a series of images as part of my home page, where a new image is shown each time the page is visited. So, visitor 1 opens my home page and sees image x one day, and when they revisit a week later they see image z (or, one of the images I would like to include in the series). Is this something that I would use javascript for? If so, can anyone point me in the direction of a good tutorial? I have written, through the help of other online tutorials, some scripts (though, very basic ones)…so, a good source for learning javascript would be helpful, too. Thanks for any advice!

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@TheBearMayDec 16.2004 — Good place to learn JS online is: http://www.w3schools.com/js/default.asp

For a new image each time you'll need to do two things. First create an array of images, and secondly store the image number in a cookie so you know where you left off.
[code=php]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript">
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function getCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function setCookie (name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function newImage(){
var imgArr=["images/img1.gif", "images/img2.gif"];
var arrInx=getCookie("lastImage");
if (arrInx==NaN || arrInx==null) arrInx=-1;
arrInx++;
if (arrInx >= imgArr.length) arrInx = 0;
setCookie("lastImage", arrInx);
document.getElementById("imgRotate").src=imgArr[arrInx];
}


</script>
</head>

<body onload="newImage();">

<img id="imgRotate" />
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@palmertiresauthorDec 16.2004 — Thank you! I will have to try this out later. I have to admit, javascript is a little daunting (but, I am hoping at some point it will click for me).
Copy linkTweet thisAlerts:
@TheBearMayDec 16.2004 — Take it one step at a time and it'll click at some point. Good Luck.
×

Success!

Help @palmertires spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...