
previous

page 18
next
shapes.js
function shapes() {
for (var i=1;i<8;i++) {
var s1="<img src='images/right/";
var s2=".png' class='shape' v='";
var s3="' onClick='shape_clicked(this);'>";
document.write(s1+i+s2+i+s3);
}
s1="<img src='images/";
i=8;
document.write(s1+i+s2+i+s3);
}
for (var i=1;i<8;i++) {
var s1="<img src='images/right/";
var s2=".png' class='shape' v='";
var s3="' onClick='shape_clicked(this);'>";
document.write(s1+i+s2+i+s3);
}
s1="<img src='images/";
i=8;
document.write(s1+i+s2+i+s3);
}
So what is to happen when a shape is clicked?
All we want is for the shape to be selected and for that selection to be made available globally.
To indicate that it's selected, we change the border colour to orange.
So create a globals.js which contains the global g_shape and a clicks.js which contains the shape_clicked function.
globals.js
var g_shape='';
clicks.js
function shape_clicked(image) {
var v=image.getAttribute('v');
if (g_shape!='') {
g_shape.style.borderColor='ivory';
}
g_shape=image;
g_shape.style.borderColor='orange';
}
var v=image.getAttribute('v');
if (g_shape!='') {
g_shape.style.borderColor='ivory';
}
g_shape=image;
g_shape.style.borderColor='orange';
}
previous
next