Drawing Graphics with onmousedown

[lawrenceh]

Hi

I am trying to add graphics without refreshing the page. This works ok when I load the graphics by some other means, but if I load the graphics using onmousedown(), the graphic is loaded, but the rest of the page disappears.

<div STYLE="solid red 1px; " id="playarea1" style=" margin: 75px 35px 35px 155px; width: 1600px; height: 600px; background-color: #FFFFCC" onmousedown="drawShape()">

This works okay:

document.write('<img id="cross" src="cross.jpg" style="position:absolute; width:5px; left:10px; top:10px;"/>’)
document.write('<img id="cross" src="cross.jpg" style="position:absolute; width:5px; left:20px; top:20px;"/>’)
document.write('<img id="cross" src="cross.jpg" style="position:absolute; width:5px; left:30px; top:30px;"/>’)

The three graphics are draw one after another and the rest of the page remains.

This does not work:

function drawShape(){

document.write('<img id="cross" src="cross.jpg" style="position:absolute; width:5px; left:100px; top:100px;"/>');

}

The remainder of the page disappears and only the graphic is shown. Can anyone please say why?

Regards

Lawrence

[Kor]

document.write() is not a dynamic method. use DOM methods
http://www.w3schools.com/HTMLDOM/default.asp

[lawrenceh]

H Kor,

thanks for your advice. I have spent the last two hours looking at the link ad have learnt something about DOM. The link is good if you would like to do lots with textboxes. Could you give me a pointer of how I would use DOM to place a graphic on a <DIV>.

Many thanks

Lawrence

[Kor]

H Kor,

Could you give me a pointer of how I would use DOM to place a graphic on a <DIV>.

Many thanks

Lawrence

Ok. First, make us clear what do you mean by "place" a grpahic. Where the data is coming from? can you detail your aim a little bit, please?

[lawrenceh]

Hi again,

I am trying to write the start of a game where I need to design a racetrack. The design part will be done within a grid. If you go to http://www.seeking-answers.com/test_race/playarea.html, this will load the grid.

Place the cursor in the grid and press the left mouse button. A black horizontal line should be drawn from the nearest cross, but of course, the existing window is unloaded. During the design, the data will come from the user. The next step will be to save the data in a database and load it as the playarea window is loaded.

This is only a test script and needs to be tided up.

Many thanks in advance.