在點擊的單元格（網格）內放置圖像或css樣式圖標

這是我通過循環創建帶有php的表格的代碼。我在每個中添加一個onclick函數。所以在點擊特定的單元格時，背景顏色會發生變化。現在我想放置一個特定的圖像..在每個被單擊的單元格內，但我無法弄清楚這個功能。在點擊的單元格（網格）內放置圖像或css樣式圖標

我想編寫一個函數，使得點擊時放置圖像。在PHP創建

/* 
* javascript function that changes color of the cell. 
* 
*/ 

<script> 
    function changeColor(elem) 
    {  
    elem.style.background = "red";  
    } 
</script>

表

<?php 
    $rows = 10; // define number of rows 
    $cols = 4;// define number of columns 

    echo "<table border='1'>"; 

    for($tr=1;$tr<=$rows;$tr++){ 

     echo "<tr>"; 
      for($td=1;$td<=$cols;$td++){ 
        echo "<td onclick=\"changeColor(this)\" > ".$tr." ".$td."</td>"; 
      } 
     echo "</tr>"; 
    } 

     echo "</table>"; 
?>

來源

2014-01-21 jasmin

使用此：

elem.innerHTML = '<img src="path/to/image.png" />';

來源

2014-01-21 06:41:55 q0re

[IMG]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img）是一個無效元素。 – Givi

我解決了這個問題... – q0re

更換

elem.style.background = "red";

與此對javascript

elem.style.backgroundImage ="url('path/myimage.jpg')";

時使用此jQuery

$(elem).css('background-image', "url('path/myimage.jpg')");

用於繪製圓試試這個（ADD這一點原來的問題以及）

你可能想看看HTML5 CANVAS

你將不得不在td添加canvas標籤併發送其參考作用

var offsets = elem.getBoundingClientRect(); 
    var top_C = offsets.top; 
    var left_C = offsets.left; 
    var bottom_C= offsets.bottom; 
    var right_C= offsets.right; 
    var y_C= ((bottom_C-top_C)/2); // Y- Co=ordinates 
    var x_C=((right_C-left_C)/2); // X- Co=ordinates 
    var ctx=elem.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(x_C,y_C,40,0,2*Math.PI); 
    ctx.stroke();

你可能要做嘗試幾次得到適合你的完美半徑。在ctx.arc()

來源

2014-01-21 06:46:41

而不是添加圖像我可以動態地用css繪製圓圈嗎？ – jasmin

@jasmin檢查答案中的更新，並在問題中指定並明確此要求。 –

我們的代碼動態地繪製了一個圓......但是當我們指定了d弧的x和y協調時，它被繪製在那個特定的點上......而不是在鼠標被點擊的地方。 – jasmin

JS第三個參數

elem.style.backgroundImage ="url('"+imageUrl +"')";

Jquery的

$('elem').css('background-image', 'url(' + imageUrl + ')');

來源

2014-01-21 06:51:27

在點擊的單元格（網格）內放置圖像或css樣式圖標

回答

相關問題