如何使用PHP，Javascript/Jquery創建交互式圖像？

我試圖讓我添加選中標記來點擊我的數據庫中的圖像的代碼。我能夠顯示圖像，但是我無法選擇圖像/取得支票出現。如何使用PHP，Javascript/Jquery創建交互式圖像？

的index.php

<?php 
    $result = mysql_query("select * from db"); 
    $count = 0; 
    while ($row = mysql_fetch_array($result)) { 
    $count++; 
    echo '<img src="data:image/jpeg;base64,' . base64_encode($row['img']) . '" width="290" height="290" class = box>'; 
    } 
?>

click.js

$(document.ready(function(){ 
    $('.box').live("click", function() { 
    if($(this).find('.check_image').length == 0){ 
     $(this).append("<div class='check_image'><img src='check.png' /></div>"); 
    }else{ 
     $(this).find('.check_image').remove(); 
    } 
});

來源

2017-03-08 johnnnieyy

一個建議是在您的圖像表名稱中創建一個列'check set（2）values 0,1 and default 0 （取消選中）'。現在當一個圖像點擊/取消點擊發送一個帶圖像id的ajax請求並相應地改變列值。現在，在獲取圖像的時候也可以獲取已選中的列，並根據它的值使您的選框處於未選中狀態。 –

停止使用這些不安全的，無保留的，長期棄用的數據庫API。 http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php – miken32

你的代碼使用'mysql_xxx（）'函數。 **停在那裏**在做任何事之前，請按照上面@ miken32給出的鏈接，瞭解爲什麼你不應該再使用這些函數。您應該緊急考慮重寫代碼以使用PHP中提供的更新的數據庫API。 – Simba

好了，所以我會建議得到CSS做顯示刻度。這將意味着將你的回顯img標籤包裹在一個div中（你不能使用僞選擇器：直接在img標籤之後alas。我已經使用了一個字體庫（font-awesome），這是一個獲得像蜱的圖標的好方法。和垃圾桶等爲您的網頁，他們擴展和可着色

正如在其他職位，你使用的是一些貶值在你的PHP和jQuery兩個呼叫提到有這個劇本：。。

$('.clickable').on('click',function(e){ 
 
$(this).toggleClass('clicked'); 
 
})

.clickable.clicked:after{ 
 
    font-family: FontAwesome; 
 
    content: "\f00c"; 
 
    color:lime; 
 
    position:absolute; 
 
    top:2px; 
 
    right:2px; 
 
    font-size:40px; 
 
    text-shadow: -2px 3px 2px rgba(150, 150, 150, 0.8); 
 
} 
 

 
.clickable{ 
 
    cursor:pointer; 
 
    position:relative; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="clickable" style="width:320px;height:240px;"> 
 
<img src="http://www.richardhulbert.com/wp-content/uploads/2011/04/New-Forest-11.jpg" alt="nice van bros!" /> 
 
</div>

來源

2017-03-08 11:29:28 Richard

如何使用PHP，Javascript/Jquery創建交互式圖像？

回答

相關問題