如何使用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创建交互式图像？

回答

相关问题