changing images - Dev Shed

Dev Shed Forums Sponsor:

October 4th, 2000, 05:59 AM

timbo

Contributing User

Join Date: Apr 1999

Location: London

Posts: 110

Time spent in forums: 22 m 26 sec
Reputation Power: 0

Hi all

does anyone know how to flip an image once it hits the left hand side. see code below

<script language="JavaScript">

//Configure the below three variables (BallSpeed from 1 to 50, larger is faster)
var ballWidth = 40;
var ballHeight = 40;
var BallSpeed = 11;

var maxBallSpeed = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;
var player;

function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("blueplayer").style.visibility = "visible";
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
document.layers["blueplayer"].visibility = "show";
}
setTimeout('moveBall()',400);
}

function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("blueplayer").style.left = xPos + document.body.scrollLeft;
document.all("blueplayer").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["blueplayer"].left = xPos + pageXOffset;
document.layers["blueplayer"].top = yPos + pageYOffset;
}
setTimeout('moveBall()',30);
}
}

function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - ballWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - ballHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}

if (document.all| |document.layers)
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");

// end hiding from old browsers -->
</script>

<style type="text/css">
#blueplayer {position:absolute;left:0;top:0;visibility:hide;visibility:hidden;width:40;height:40;}
#redplayer {position:absolute;left:0;top:0;visibility:hide;visibility:hidden;width:40;height:40;}
</style>
<body>

<span id="blueplayer"><a href="#"><img name="superballImage" src="blueplayer.gif" height="40" width="40" border="0"></a></span>

all I want is for the image to be the opposite when it is running the other way (I have two images to use)

I understand inprinciple what I am supposed to do but jjust cant get it to happen

any pointers

tia

October 5th, 2000, 07:20 AM

tvanbart

Contributing User

Join Date: Sep 2000

Posts: 35

Time spent in forums: < 1 sec
Reputation Power: 8

Make an Image array with the two images in it, and write code to change the superballImage source to the desired image (just have 1 layer with the ball image in it).
I think you can cut/paste code from one of the many image rollovers available on the net, try looking in javascript.internet.com .

Success, Ton

October 5th, 2000, 07:24 AM

timbo

Contributing User

Join Date: Apr 1999

Location: London

Posts: 110

Time spent in forums: 22 m 26 sec
Reputation Power: 0

i was just being lazy really and not thinking about it.
i worked it out in the end, just added in a switch that would tell which ways the gif was moving and selected the appropriate gif accordingly

thanks anyway

tim

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: