PDA

View Full Version : auto image change



docock
Mar 12th, 2007, 03:15 PM
I'm trying to build the following..
I've got 3 links on my form, along with one picture..when someone scrolls over the link the picture changes.. also i've tried to build in a 5000 millisecond image change (picture should change every 5000 milliseconds) However it doesn't work.. I can't seem to figure this one out... :S



<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var start=new Date();
start=Date.parse(start)/1000;
var counts=10;

var dallas = new Image();
var sandiego = new Image();
var tokyo = new Image();

dallas.src = "http://javascript.internet.com/img/change-image/dallas-large.jpg";
sandiego.src = "http://javascript.internet.com/img/change-image/sandiego-large.jpg";
tokyo.src = "http://javascript.internet.com/img/change-image/tokyo-large.jpg";

function doButtons(picimage,xxx) {
document.formpje.koala.value=xxx;
eval("document['picture'].src = " + picimage + ".src");
}


function countdown(){
var now=new Date();
now=Date.parse(now)/1000;
var x=parseInt(counts-(now-start),10);
if(document.form1){document.form1.clock.value = x;}
if(x>0){
timerID=setTimeout("countdown()", 100)
}else{
alert("hoi");
}}

function refres(){
xxx=document.formpje.koala.value;
alert(xxx)
if (xxx='1') {doButtons('sandiego',2)}
if (xxx='2') {doButtons('tokyo',3)}
if (xxx='3') {doButtons('dallas',1)}
setTimeout('refres()',5000)
}


doButtons('sandiego',2)
// End -->
</script>
</HEAD>



<body onLoad="setTimeout('refres()',5000)">
<form name="formpje">


<li><a href = "http://www.dallas.com" onmouseover = "doButtons('dallas',1)">Dallas</a>
<li><a href = "http://www.sannet.gov" onmouseover = "doButtons('sandiego',2)">San Diego</a>
<li><a href = "http://www.japan-guide.com" onmouseover = "doButtons('tokyo',3)">Tokyo</a>
<input type="text" name="koala">
<br><br><br>

<img name=picture src="http://javascript.internet.com/img/change-image/dallas-large.jpg" width=440 height=300 border=0></td>

BarrMan
Mar 12th, 2007, 04:00 PM
Hey, if you want us to be able to check your code, post it completely and don't sencor it.
By the way, use the CODE tags for your code.

docock
Mar 13th, 2007, 08:58 AM
ok, ive adjusted the code so it's readable :)
Can someone take a look at it plz ?

docock
Mar 14th, 2007, 10:26 AM
anyone ??

csjc2662
Mar 14th, 2007, 10:46 AM
I just did something similar with the swaping part in the post above "Rollover" And I'll look at the timer right now and get back to you.

BarrMan
Mar 14th, 2007, 10:57 AM
Use == for comparison:

if (xxx=='1') {doButtons('sandiego',2)}
if (xxx=='2') {doButtons('tokyo',3)}
if (xxx=='3') {doButtons('dallas',1)}

csjc2662
Mar 14th, 2007, 11:21 AM
This is something I wrote a long time ago but still works you can use it for reference, and to add to the above your missing alot of semicolons.


<html>
<head>
<title>Torrent Rpg version 1.0</title>
<script language="JavaScript">
<!--hide me

boardNum=0;

boardSpeed = 6600;


billboards = new Array();

billboards[0] = new Image();

billboards[0].src = "dragonandsword.gif";

billboards[1] = new Image();

billboards[1].src = "sword.gif";

billboards[2] = new Image();

billboards[2].src = "fireball.gif";
billboards[3] = new Image();
billboards[3].src = "lightningwizard.gif";



function doTravel(){
window.location.replace("battle2.html");
}
function changeImage1(){
if(1>0){
document.scene.src = "executioner.gif";
}
}
var enemySpeed = 1500;
alert("Get Ready To Battle");
function getNum(){
var hit = Math.random()*20;
var hit2 = Math.round(hit);
return hit2;
}
mg1 =40;
chhitpts = 200;
enemy = 300;
function doPlacement(){
document.battle.charhitpts.value = chhitpts ;
document.battle.greandeal.value = enemy;
document.battle.mppoints.value = mg1;
}
function checkWin(){
if(enemy<1){
alert("You Have Won!!!!!!");
var conn1 = window.confirm('Do you wish to continue?');
if (conn1 == true){
doTravel();
}else{
var conn = window.confirm('Do you want to play again?');
if(conn==true){
window.location.replace('battle.html');
}
else{
window.location.replace('win.html');
}
}
}
}
function checkLose(){
if(chhitpts<1){
alert("You Have lost!!!!!!");
var conn = window.confirm('Do you want to play again?');
if(conn==true){
window.location.replace('battle.html');
}
else{
window.location.replace('lose.html');
}
}
}

function doDamage(){
var damage = Math.random()*20;
var real_damage = Math.round(damage);
return real_damage;
}
function doHit(){
document.scene.src = "sword.gif";
setTimeout("changeImage1()",enemySpeed);
var hit = getNum();
if(hit >= 10){
var damage = doDamage();
enemy = enemy - damage;
doPlacement();
} else {
alert("You Missed");
}
setTimeout("doEnemyhit()",enemySpeed);
checkWin();
}
function doEnemyhit(){
document.scene.src = "dragonandsword.gif";
setTimeout("changeImage1()",1000);
var hit3 = getNum();
if(hit3 >= 13){
var damage = doDamage();
chhitpts = chhitpts - damage;
doPlacement();
}else{
alert("Lucky Grendeal Missed!!!!!");
}
checkLose();
}
function qUit(){
var con = window.confirm("Are you Sure?");
if (con==true){
window.location.replace('lose.html');
}
}

function doFireball(){
mg1=mg1-3;
if(mg1>=0){
var damage = doDamage() + 20;
enemy = enemy - damage;
doPlacement();
}else{
alert("You don't have enough Magic Points!!!");
mg1 = mg1+3;
doPlacement();
}
checkWin();
document.scene.src = "fireball.gif";
setTimeout("changeImage1()",1000);
setTimeout("doEnemyhit()",2500);

}
function doLightning(){
mg1=mg1-5;
if(mg1>=0){
var damage = doDamage() + 20;
enemy = enemy - damage;
doPlacement();
}else{
alert("You don't have enough Magic Points!!!");
mg1 = mg1+5;
doPlacement();
}
checkWin();
document.scene.src = "lightningwizard.gif";
setTimeout("changeImage1()",1000);
setTimeout("doEnemyhit()",2000);

}


//-->
</script>
</head>
<body bgcolor="black" text="white" Link="red" onLoad="doPlacement(); setTimeout('doEnemyhit()',enemySpeed);">


<form name="battle" onSubmit="return false;">
Hit Points <input type="text" name="charhitpts" size="4">

Magic Points <input type="text" name="mppoints" size="4">
<img src="executioner.gif" name="scene" border="0" align="center">

<br>
Greandeal <input type="text" name="greandeal" size="4">
<br>

</form>
<form>
Attack <input type="radio" onClick="doHit(); return false;"><br>
Use a Fire Ball 3 magic points <input type="radio" onClick="doFireball(); return false;"><br>
Use a Lightning Bolt 5 magic points <input type="radio" onClick="doLightning(); return false;"><br>
Quit <input type="radio" onClick="qUit(); return false;"><br>
</form>
&copy James Campbell 1999
</body>
</html>


Just use a link instead of radio button.

docock
Mar 14th, 2007, 04:55 PM
Okay, it works perfect now..thanks.. however, I want a little adjustment. When someone hovers over a text link the image changes as well, though the image swaps when the timer is near the end. How can I 'reset' the timer when someone hovers over the link so that the picture is visible for 5 seconds before it swaps ?




<HEAD>

<SCRIPT LANGUAGE="JavaScript">


var dallas = new Image();
var sandiego = new Image();
var tokyo = new Image();
var t;

dallas.src = "http://javascript.internet.com/img/change-image/dallas-large.jpg";
sandiego.src = "http://javascript.internet.com/img/change-image/sandiego-large.jpg";
tokyo.src = "http://javascript.internet.com/img/change-image/tokyo-large.jpg";

function doButtons(picimage,xxx) {
document.formpje.koala.value=xxx;
eval("document['picture'].src = " + picimage + ".src");
}




function refres(){
xxx=document.formpje.koala.value;
if (xxx=='1') {doButtons('sandiego',2)}
if (xxx=='2') {doButtons('tokyo',3)}
if (xxx=='3') {doButtons('dallas',1)}
t=setTimeout('refres()',5000);
}


doButtons('sandiego',2)
// End -->
</script>
</HEAD>



<body onLoad="setTimeout('refres()',5000)">
<form name="formpje">


<li><a href = "http://www.dallas.com" onmouseover = "clearTimeout(t);doButtons('dallas',1);">Dallas</a>
<li><a href = "http://www.sannet.gov" onmouseover = "clearTimeout(t);doButtons('sandiego',2);">San Diego</a>
<li><a href = "http://www.japan-guide.com" onmouseover = "clearTimeout(t);doButtons('tokyo',3);">Tokyo</a>
<input type="text" name="koala" value="1">
<br><br><br>

<img name=picture src="http://javascript.internet.com/img/change-image/dallas-large.jpg" width=440 height=300 border=0></td>