PDA

Click to See Complete Forum and Search --> : Non-Flash Dynamic image help needed please!

Surreallemming
10-20-2009, 05:03 PM
Hello fellow web developers,

First time here, hope I can spread my knowledge about but first I need a helping hand from your good selves to solve a problem that I'm not even sure where to begin. I have been asked by a local charity to create a website for their upcoming fundraiser, What they would like is a rainbow on it that 'coloured in' as they got closer to the goal.

Now my problem is that They want each bar of the rainbow to go up at different rates, otherwise I would've just made 100 images and do it the simple way. Question is, where to start and how to do this, as far as I can work out I can't do it in PHP or the little ASP that I know.

So, any ideas? ><
TheBearMay
10-22-2009, 12:06 PM
Adapting some code I've had lying around:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
if(window.attachEvent)
window.attachEvent("onload", ShowGoal);
else
window.addEventListener("load", ShowGoal, false);

gval=45;
function ShowGoal() {
drawLine(302,202-gval,322,202-gval,1,gval,"#ff0000");
}

function drawLine(LeftX, LeftY, RightX, RightY, PenWidth, PenHeight, PenColor) {
if (LeftX > RightX) return;
var slope = (LeftY-RightY)/(LeftX-RightX);
var canvas=document.createElement("div");
var Top=LeftY;
//Handle vertical lines
if (slope == Number.NEGATIVE_INFINITY || slope == Number.POSITIVE_INFINITY){
for (i=LeftY;i<RightY;i++) {
var tPix=document.createElement("img");
tPix.src="Images/transparent.gif";
var dot=document.createElement("div");
dot.style.backgroundColor=PenColor;
dot.style.position="absolute";
dot.style.top=Top+"px";
dot.style.left=LeftX+"px"
dot.style.width=PenWidth+"px";
dot.style.height=PenHeight+"px";
dot.appendChild(tPix);
canvas.appendChild(dot);
Top++;
}
} else {
for (i=LeftX;i<RightX;i++) {
var tPix=document.createElement("img");
tPix.src="Images/transparent.gif";
var dot=document.createElement("div");
dot.style.backgroundColor=PenColor;
dot.style.position="absolute";
dot.style.top=Top+"px";
dot.style.left=i+"px"
dot.style.width=PenWidth+"px";
dot.style.height=PenHeight+"px";
dot.appendChild(tPix);
canvas.appendChild(dot);
Top+=slope;
}
}
document.getElementsByTagName("body")[0].appendChild(canvas);
}

</script>
<style type="text/css">

</style>

</head>

<body >
<div style="width:20px;height:100px;position:absolute;left:300px;top:100px;border:2px solid #000000;"></div>
</body>
</html>
Note: transparent.gif is a 1px by 1px transparent image.
TheBearMay
10-22-2009, 02:31 PM
Another, perhaps simpler, way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
if(window.attachEvent)
window.attachEvent("onload", ShowGoal);
else
window.addEventListener("load", ShowGoal, false);

gval=45;
sval=1;
function ShowGoal() {
loc=document.getElementById("goal");
imgNode=loc.getElementsByTagName("img");
if (imgNode.length > 0) {
imgNode[0].parentNode.removeChild(imgNode[0]);
}
var tPix=document.createElement("img");
tPix.src="Images/transparent.gif";
tPix.style.backgroundColor="#ff0000";
tPix.style.marginTop=(100-sval)+"px";
tPix.style.width="20px";
tPix.style.height=sval+"px";
loc.appendChild(tPix);
if (sval < gval+1) {
setTimeout("ShowGoal()",50);
sval++;
} else {
pNode=document.createElement("p");
tNode=document.createTextNode(gval+"%");
pNode.style.marginTop="0";
pNode.appendChild(tNode);
loc.appendChild(pNode);
}

}



</script>
<style type="text/css">

</style>

</head>

<body >
<div id="perMade" style="position:absolute;left:300px;top:100px;">
<div id="goal" style="width:20px;height:100px;border:2px solid #000000;"></div>
</div>
</body>
</html>