Hello.
I would like to insert images into specific cell created in javascript. I did create chessboard. Now i need to put figures in specific place. This I would like to do on two or three different ways.
1. Simple way: When I pres button "Generate table" the program will create table and already put figures into cells (King on A1, Queen on C3, ...)
2. When I pres button "Generate table" the program will create empty chessboard. Then I will click on buttons and add figures.
Prompt window, where I will put the cell I'd like to insert image (figure). (there will be buttons for each type of figure: button for white and black king, white and black queen, ...)
3. The most advance: the prompt window will ask for: Which figure (king, queen, ...), what color (blak, white) and on what location (A1, B3, ...) I'd like to put figure image.
4. Someday in the fucture perhaps even move figures...
This is code I create so far (it create table, the insert image does not work):
I would like to insert images into specific cell created in javascript. I did create chessboard. Now i need to put figures in specific place. This I would like to do on two or three different ways.
1. Simple way: When I pres button "Generate table" the program will create table and already put figures into cells (King on A1, Queen on C3, ...)
2. When I pres button "Generate table" the program will create empty chessboard. Then I will click on buttons and add figures.
Prompt window, where I will put the cell I'd like to insert image (figure). (there will be buttons for each type of figure: button for white and black king, white and black queen, ...)
3. The most advance: the prompt window will ask for: Which figure (king, queen, ...), what color (blak, white) and on what location (A1, B3, ...) I'd like to put figure image.
4. Someday in the fucture perhaps even move figures...
This is code I create so far (it create table, the insert image does not work):
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ChessBoard</title>
<script type="text/javascript">
function CreateTable(){
var poz = document.getElementById('space');
// createing table adn inserting into document
tab = document.createElement('table');
poz.appendChild(tab);
tab.border = '5';
for (var i = 0; i < 8; i++){
// creating row and inserting into document
var row = tab.insertRow(i);
for(var j = 0; j < 8; j++){
// creating cells and fill with data (numbers)
var cell = row.insertCell(j);
var idStr = String.fromCharCode(97 + i).toUpperCase() + (j+1);
if((i+j)%2){cell.style.backgroundColor = 'silver';}
else{cell.style.backgroundColor = '#00f';}
cell.innerHTML = idStr;
cell.id = idStr;
cell.style.color = 'white';
cell.style.height = '50px';
cell.style.width = '50px';
};
};
}
function addKing(idStr){
cell = document.getElementById(idStr);
if(cell != null){
// works for color, doesn't work for images!!
// cell.style.backgroundColor = 'red';
cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png'
}
}
function addQueen(idStr){
cell = document.getElementById(idStr);
if(cell != null){
// works for color, doesn't work for images!!
cell.style.backgroundColor = 'yellow';
cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/queen_m.png'
}
}
function addBishop(idStr){
cell = document.getElementById(idStr);
if(cell != null){
// works for color, doesn't work for images!!
cell.style.backgroundColor = 'green';
cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/bishop_m.png'
}
}
</script>
</head>
<body>
<input type="button" value="Generate a table" onclick="CreateTable()">
<br />
<button id="king" onclick="addKing(prompt('Insert field'))">Add King</button>
<button id="queen" onclick="addQueen(prompt('Vnesi field'))">Add Queen</button>
<button id="bishop" onclick="addBishop(prompt('Vnesi field'))">Add Bishop</button>
<br />
<button id="king" onclick="addImage(prompt('Insert type', 'insert color', 'insert field'))">insert</button>
<br />
<div id="space">
<!-- place where I will inert chessboard!
-->
<script type="text/javascript">
// CreateTable()
</script>
</div>
</body>
</html>
Comment