BDT
04-22-2003, 09:06 PM
I'm using javascript to build a page that uses a loop to build several images, each within a different set of <div> tags. Then superimposed on each image is one or more <a> links to functions. These images and the links will change dynamically.
OK I've laid out the page, but I've come up against a problem. When I click on a link, the function needs to know which link and which image or <div> it is. How do I do this?
I'll post the incomplete code, but I'm trying to learn how to do this, so if someone could provide some general help rather than code revisions, I will try to build the fuctions that I need.
thanks, BDT
<script language="javascript" type="text/javascript">
var hexleft = new Array(122,239,5,122,239,5,122); //Load from top to bottom to expose top right/left numbers
var hextop = new Array(4,70,70,138,205,205,272);
var hexcolor = new Array("gray","green","yellow","orange","pink","blue","violet");
for (i=0;i<=6;i++) {
document.write('<div id="LayerA" style="position:absolute; left:' +
hexleft[i] + 'px; top:' + hextop[i] +
'px; width:150px; height:130px"><img src=' + hexcolor[i] + '.gif>');
document.write('<p class="nums" style="position:absolute; left:67px; top:2px">' + posn[i][0] + '</p>');
document.write('<p class="nums" style="position:absolute; left:117px; top:30px"><a ID= "' + right[i] +
'" href="#" onClick="goright(i)">' +
posn[i][1] + '</a></p>');
document.write('<p class="nums" style="position:absolute; left:117px; top:78px">' + posn[i][2] + '</p>');
document.write('<p class="nums" style="position:absolute; left:67px; top:106px">' + posn[i][3] + '</p>');
document.write('<p class="nums" style="position:absolute; left:21px; top:78px">' + posn[i][4] + '</p>');
document.write('<p class="nums" style="position:absolute; left:22px; top:30px"><a href="#" onClick="goleft()">' +
posn[i][5] + '</a></p></div>');
}
</script>
OK I've laid out the page, but I've come up against a problem. When I click on a link, the function needs to know which link and which image or <div> it is. How do I do this?
I'll post the incomplete code, but I'm trying to learn how to do this, so if someone could provide some general help rather than code revisions, I will try to build the fuctions that I need.
thanks, BDT
<script language="javascript" type="text/javascript">
var hexleft = new Array(122,239,5,122,239,5,122); //Load from top to bottom to expose top right/left numbers
var hextop = new Array(4,70,70,138,205,205,272);
var hexcolor = new Array("gray","green","yellow","orange","pink","blue","violet");
for (i=0;i<=6;i++) {
document.write('<div id="LayerA" style="position:absolute; left:' +
hexleft[i] + 'px; top:' + hextop[i] +
'px; width:150px; height:130px"><img src=' + hexcolor[i] + '.gif>');
document.write('<p class="nums" style="position:absolute; left:67px; top:2px">' + posn[i][0] + '</p>');
document.write('<p class="nums" style="position:absolute; left:117px; top:30px"><a ID= "' + right[i] +
'" href="#" onClick="goright(i)">' +
posn[i][1] + '</a></p>');
document.write('<p class="nums" style="position:absolute; left:117px; top:78px">' + posn[i][2] + '</p>');
document.write('<p class="nums" style="position:absolute; left:67px; top:106px">' + posn[i][3] + '</p>');
document.write('<p class="nums" style="position:absolute; left:21px; top:78px">' + posn[i][4] + '</p>');
document.write('<p class="nums" style="position:absolute; left:22px; top:30px"><a href="#" onClick="goleft()">' +
posn[i][5] + '</a></p></div>');
}
</script>