How to create interactive images with PHP, Javascript/Jquery?

Question

I am trying to make code that lets me add checkmarks to clicked images from my database. I am able to get the images to display, however I am unable to select the image/get the check to appear.

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();
   }
});

Answer 1

Ok so I would suggest getting CSS to do display the tick. It will mean wrapping your echoed img tab in a div (you can't use the pseudo selector :after directly on an img tag alas. I have used a font library (font-awesome) this is a great way of getting icons like ticks and trashcans etc into your pages. They scale and can be coloured.

as has been mentioned in other posts you are using some depreciated calls in both your PHP and jQuery. Have a play with this:

 $('.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>