PDA

Click to See Complete Forum and Search --> : need a javascript to have a different picture load on every refresh

nolawi
06-13-2006, 11:26 AM
lets say my pcitures are named header-01.jpg to header-05.jpg

can you help me out?
thanks
CrazyMerlin
06-13-2006, 11:45 AM
create a simple random number script that has high-low settings to match your picture names, then run the script to get a number when the page loads and viola
TheBearMay
06-13-2006, 11:49 AM
Or if you want to simply step through every image:


<?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>
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=["header-01.jpg", "header-02.jpg", "header-03.jpg", "header-04.jpg", "header-05.jpg"];
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];
}

window.onload=newImage;
</script>
</head>

<body>

<img id="imgRotate" />
</body>
</html>
nolawi
06-13-2006, 12:21 PM
create a simple random number script that has high-low settings to match your picture names, then run the script to get a number when the page loads and viola
keraaaaazy... if i could write the code i wouldnt ask in the forum ;)
nolawi
06-13-2006, 12:56 PM
the bear may that look exsesive dont you think... and what would happen if the client who i'm presenting the website to has cookies blocked...
TheBearMay
06-13-2006, 01:51 PM
Only way client side to keep track of which image was last viewed as all the variables are reset when you refresh the page. If you don't need to guarentee that every image is viewed you could go with a random function as CrazyMerlin suggested:


<?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>
function newImage(){
var imgArr=["header-01.jpg", "header-02.jpg", "header-03.jpg", "header-04.jpg", "header-05.jpg"];
document.getElementById("imgRotate").src=imgArr[Math.ceil(Math.random()*imgArr.length];
}

window.onload=newImage;
</script>
</head>

<body>

<img id="imgRotate" />
</body>
</html>
nolawi
06-13-2006, 02:45 PM
great exactly what i needed... but what if the images is located in another folder.. called images

i tried different things its not working here is my file...

<script type="text/javascript">
function newImage(){
var imgArr=["header-01.jpg", "header-02.jpg", "header-03.jpg", "header-04.jpg", "header-05.jpg"];
document.getElementById("imgRotate").src=imgArr[Math.ceil(Math.random()*imgArr.length];
}

window.onload=newImage;
</script>

<img id="imgRotate" src="images/header-01.jpg" alt="header images"/>

</div>
nolawi
06-14-2006, 07:15 AM
^ could someone help with this?
how come its not working?
tisptn
06-14-2006, 06:31 PM
var imgArr=["header-01.jpg", "header-02.jpg", "header-03.jpg", "header-04.jpg", "header-05.jpg"]

I believe all you need to do is change those to read as...

var imgArr=["images/header-01.jpg", "images/header-02.jpg", "images/header-03.jpg", "images/header-04.jpg", "images/header-05.jpg"]
phpnovice
06-14-2006, 06:52 PM
keraaaaazy... if i could write the code i wouldnt ask in the forum ;)
Then why don't you learn how? ;)

JavaScript Tutorial (http://www.webreference.com/programming/javascript/diaries/)

Cheers.