我正在嘗試使用Javascript來顯示圖像

我正在嘗試製作一個tic tac toe遊戲。我使用的是圖像而不是X和O，所以我需要在點擊圖像時填入圖像。我嘗試這樣做：我正在嘗試使用Javascript來顯示圖像

function makeDuck(place){ 
    //this is just so I know the other methods work 
    alert("duck");    
    //This is the line I need help with 
    window.location.write('<img src="smallDuck.jpg" width="70" height="70"/>'); 
    squares[place] = 1; 
} 

function makeBeaver(place){ 
    //this is just so I know the other methods work 
    alert("beaver"); 
    //This is the line I need help with   
    document.zero.write('<img src="smallBeaver.jpg" width="80" height="80"/>'); 
    squares[place] = 2; 
}

來源

2012-06-29 William Stidhem

您可能想了解一些屬性和DOM操作以及更多JavaScript。 '.write'完全不能用於這種方式。 – Ryan

我同意，雖然首先跳進頭部的@minitech榮譽。我從這樣的嘗試中學到了最好的東西，而不是某個人出現，並告訴我如何做到這一點10倍更容易 – ZnArK

你可能想看看JSFiddle（http://jsfiddle.net/），它是一個偉大的，輕量級的方式快速原型化/測試JavaScript和CSS的各個部分。 – 5arx

function makeDuck(place){ 
    // first, we must create a new element in the DOM 
    var img = document.createElement("IMG"); 
    // second, we must assign the right attributes 
    img.src = "smallDuck.jpg"; 
    img.width = "70"; 
    img.height = "70"; 

    // finally, we append it to the document 
    document.body.appendChild(img); 

    squares[place] = 1; 
} 

function makeBeaver(place){ 
    // first, we must create a new element in the DOM 
    var img = document.createElement("IMG"); 
    // second, we must assign the right attributes 
    img.src = "smallBeaver.jpg"; 
    img.width = "80"; 
    img.height = "80"; 

    // finally, we append it to the document 
    document.body.appendChild(img); 

    squares[place] = 2; 
}

來源

2012-06-29 00:23:36 Lance

一個這樣做是使用JavaScript來替換IMG源的方式。所以假設你有一個3×3的網格，每個單元包含一個<img />標籤。他們都需要獨特的id s。

而且你將有3張圖片：blank.jpg，X.jpg和Y.jpg。所有的細胞都開始了與
<img src='blank.jpg' ... />

使用JavaScript來定位元素（getDocumentById（ID）），並設置其屬性src的URI設置爲X或Y圖像的src。

來源

2012-06-29 00:49:18 5arx

我爲你製作了一個小小的演示。它使用JQuery（它反過來調用本地Javascript函數，比如'getElementById'和'getElementsByTagName'等等。它可以幫助你理解概念。http://jsfiddle.net/5arx/5sXRd/ – 5arx

下面應該讓你去，第一樣式：

<style type="text/css"> 
table.game { 
    border: none; 
    border-collapse: collapse; 
} 
table.game td { 
    height: 50px; 
    width: 50px; 
    margin: 0; 
    padding: 0; 
} 
td.topLeft, td.topCenter, td.midLeft, td.midCenter { 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
} 

td.topRight, td.midRight { 
    border-bottom: 1px solid black; 
} 

td.botLeft, td.botCenter { 
    border-right: 1px solid black; 
} 

td.botRight { } 

.naught { 
    background-image: url('naught.jpg'); 
} 
.cross { 
    background-image: url('cross.png'); 
} 

</style>

然後HTML的遊戲

<table class="game" onclick="handleClick(event);"> 
    <tr> 
    <td class="topLeft"> 
    <td class="topCenter"> 
    <td class="topRight"> 
    <tr> 
    <td class="midLeft"> 
    <td class="midCenter"> 
    <td class="midRight"> 
    <tr> 
    <td class="botLeft"> 
    <td class="botCenter"> 
    <td class="botRight"> 
</table>

然後一個簡單的腳本來交換圖片：

<script> 
var handleClick = (function() { 
    var count = 0; 

    return function(evt) { 
     var el = evt.target || evt.srcElement; 
     el.className += ' ' + (count++%2? 'naught' : 'cross'); 
    } 
}()); 
</script>

請注意，您應該處理同一單元格上的多次點擊（查看該類是否已具有值'naught'或'cross'，如果是，告訴用戶點擊其他地方），並給出輪到它的提示。

來源

2012-06-29 02:16:27 RobG

我正在嘗試使用Javascript來顯示圖像

回答

相關問題