Простая шахматная доска с Javascript

К сожалению, я не могу получить изображения шахматных фигур, чтобы заполнить шахматную доску, которую я сделал. Шахматная доска выглядит красиво, но я создал код, который я вставил, чтобы создать епископа. Я попытался добавить епископа в квадрат на втором столбце каждый другой. К сожалению, я получаю очень маленький епископ в центре каждой плитки! Вот мой стиль, .td1 = белый квадрат, .td2 = черный квадрат на обычной шахматной доске.Простая шахматная доска с Javascript

image 
{ 
    position : relative; 
    max-width : 100%; 
    max-height : 100%; 
    height : 100%; 
} 

table 
{ 
    border-collapse : collapse; 
} 

.td1 { 
    padding: 10px; 
    margin : 0px; 
    background-color : gray; 
    border-style: solid; 
    border-width: 1px; 
    border-color : black; 
    position : relative; 
    width : 12px; 
    height : 12px; 
} 


.td2 
{ 
    padding: 10px; 
    margin : 0px; 
    background-color : yellow; 
    border-style: solid; 
    border-width: 1px; 
    border-color : black; 
    position : relative; 
    width : 12px; 
    height : 12px; 
}

Вот Javascript код, я добавил дополнительный, если заявление, которое будет изменено позже, чтобы вставить изображение Бишоп каждый другой на 2-й колонке.

for (x=0; x<rows; x++) 
    { 
     board +="<tr>"; 
     for (y=0; y<cols;y++) 
     { 
     switch1 = x%2; 
     if (y==1 && y%2 == switch1) //just for test purposes 
      board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>" /<---add image here. 
     else if (y%2 == switch1) 
      board +="<td class=\"" + "td1\">" ; 
     else 
      board +="<td class=\"" + "td2\">"; 
     } 
     board +="</tr>"; 
    } 

<link rel="stylesheet" href="styles.css"> 
<script src="sample.js" src="model.js"></script> 
<script src="model.js"></script> 
</head> 


<body onload ="start()"> 
<table> 
<div id ="gridDiv"> </div> 
</table> 
</body>

источник

2014-10-06 zissler

Можете ли вы привести живой пример? – enguerranws

@Shomz Не стесняйтесь делать это, но обратите внимание, что есть некоторые внешние ресурсы, поэтому я уверен, что мы не сможем воспроизвести его. – enguerranws

Было бы полезно, если бы вы поместили свой код в кодировщик. Точно так же, как взгляд, в css у вас есть изображение {} (самая первая строка), где это, вероятно, должно быть img. – coopersita

HTML-атрибуты width или height для <img> элемента принимает значение в пикселях, например width=100. Других допустимых значений, таких как % или em, нет, поэтому вам не нужно и на самом деле не следует добавлять px к вашим значениям.

Сменить board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>" на board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12 height=12>" и дать ему попробовать.

источник

2014-10-06 20:32:06 lexith

Простая шахматная доска с Javascript

ответ

Смежные вопросы