On Wed, 14 Sep 2005 20:30:55 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
document.getElementById("picture").innerHTML = imgStr;
??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on ?
Zoe,
It is difficult for you to see what I am trying to do so here is the
full code - most grateful for any further help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
Previously I had used the array of picture (// out below).
Geoff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>
<script type="text/javascript">
//preload images
var myImages = new Array();
var n_images = 8;
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
myImages[i].src = "pic" + i + ".jpg";
}
function displayImages()
{
var imgStr = "";
for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}
document.getElementById("picture").innerHTML = imgStr;
}
window.onload = displayImages;
var mySlider1 = new Slider( "Slider1" );
var count = 0;
var situation_number = 0;
var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}
mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;
mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";
var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";
// var picture = new Array(7);
// picture[0] = "pic1.jpg";
// picture[1] = "pic2.jpg";
// picture[2] = "pic3.jpg";
// picture[3] = "pic4.jpg";
// picture[4] = "pic5.jpg";
// picture[5] = "pic6.jpg";
// picture[6] = "pic7.jpg";
function next_question(button)
{
slider_value[situation_number][count] = this.mySlider1.getValue(0);
//totalreadings += ' ' + this.mySlider1.getValue(0);
this.count++;
if (this.count < 8)
{
document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];
mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);
} else {
situation_number++;
switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);
}
saveIt();
break;
}
}
}
function fillTable()
{
document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";
document.getElementById('picture').innerHTML = "<img src=" +
window["picture"][situation_number] + ">";
document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];
}
function saveIt()
{
document.getElementById("Slider1ValueText").innerH TML = "";
for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerH TML
+= escape("\n") + "Situation: " + title[situation_number] + " ";
for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerH TML
+= this.slider_value[situation_number][i] + ' ';
}
}
var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nms.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerH TML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerH TML
var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}
</script>
</HEAD>
<body onload="mySlider1.placeSlider()">
<center>
<table border='0' width='100%'>
<tr>
<td> </td>
<td ID='title' valign='top' align='center'></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td ID='picture' valign='top'></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'><IMG
SRC='sliderbg.gif' NAME='Slider1RailImg' ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>
<tr><td colspan='3' align='center' valign='top' height='100'>
<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>
<SPAN class='invisible' ID='Slider1ValueText'></SPAN>
<SPAN ID='Status'></SPAN></td>
</tr>
</table>
</center>
<script>
fillTable();
</script>
<SCRIPT>
mySlider1.writeSlider();
</SCRIPT>
</body>
</html>
