使用jquery php css在圖像的角落放置刪除圖標

在這裏我將圖像從數據庫扔到PHP的div，而在這裏我想刪除圖像，通過點擊刪除圖標必須在頂部從數據庫中提取的每個圖像的右上角。我怎樣才能得到圖像右上角的刪除圖標？這是我在對話框中顯示圖像的方式。使用jquery php css在圖像的角落放置刪除圖標

<?php   
$query = "SELECT * FROM files_images";  
$res = mysql_query($query);  
while ($row = mysql_fetch_array($res)) { 
    echo "<div id='popimages'>"; 
    echo "<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://localhost/PhpProject2/user_data/" . $row['filename'] . "'/>"; 
    echo "</div>"; 
} 
?>

來源

2013-03-15 acushla

任何撥弄鏈接或任何圖像。 – 2013-03-15 13:47:07

請提出問題。 – Boaz 2013-03-15 13:47:17

然後你想要做的是在圖像中有一個div中的刪除圖像圖標，然後將刪除圖標放在需要的位置。 – kabuto178 2013-03-15 13:51:49

你需要用<div>來包裝你的形象，把你的形象和刪除<div>內部鏈接。我爲您創建了this fiddle，這可能就是您要找的。

來源

2013-03-15 13:56:56 Adrenaxus

Adrenaxus .....其工作......非常感謝:) :) – acushla 2013-03-16 09:38:45

不客氣:) – Adrenaxus 2013-03-17 15:15:11

如果我理解正確的話，嘗試輸出是這樣的：

HTML

<div id='popimages'> 
     <div class="image"> 
      <img class="btn-delete" onclick="alert('Do something!');" src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/101.png"/> 
      <img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg'/> 
     </div> 
    </div>

CSS：

.image { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
.btn-delete { 
    position: absolute; 
    cursor: pointer; 
    right: 2px; 
    top: 2px; 

    /* This was edited out because it was stupid. See fernholz's answer. 
    left: 100%; 
    margin-left: -10px; 
    margin-top: 2px; */ 
}

的jsfiddle：http://jsfiddle.net/TK7zB/

來源

2013-03-15 14:37:43 Drewman

謝謝對於解決方案，它工作正常.... :) – acushla 2013-03-16 09:37:45

Drewman在技術上是正確的，我會將.btn-delete的樣式更改爲

.btn-delete { 
    cursor: pointer; 
    position: absolute; 
    right: 2px; 
    top: 2px; 
}

頂部和右側可以更改爲距離想要刪除圖標的角。

Adrenaxus，非常接近，但需要在圖像div和位置相對的高度和寬度，而不是絕對的。

來源

2013-03-15 16:42:00 fernholz

當然！我爲什麼要用左？我會編輯我的答案，謝謝 – Drewman 2013-03-16 09:57:36

HTML：

<div class="img-pos"> 
    <span class="close">&times;</span> 
    <img src=""> 
</div>

CSS：

.img-pos{ 
    position: relative; 
} 
.img-pos.close { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    z-index: 100; 
}

來源

2017-01-13 11:07:11

考慮解釋你的答案。不鼓勵代碼的答案。 – ADyson 2017-01-13 11:28:17

使用jquery php css在圖像的角落放置刪除圖標

回答

相關問題