Can you request/get variables from img src?

Question

This is a two part question, but I want to make sure the first is actually achievable.

Firstly, can you get access variables set by img src? I am attempting jQuery, including MySQL UPDATE etc, but this I needed to make sure would work?

<a href="#" class="chnge"><img src="filename.jpg?id=1&open=1" /></a>

The jQuery would then have something similar to:

      $("img#chnge").click(function() {

        var id      = $('#id').attr('value');
        var open    = $('#open').attr('value');
            $.ajax({
                type: "POST",
                url: "update.php",
                data: "id="+ id +"& open="+ open,
                success: function(){
                    $('img#chnge').fadeTo('slow',0.4);

                }
            });
        return false;
        });

I hope it is obvious, basically, I have an image, if it's "open" is set to 1, when you click it the opacity changes, but it would also send off a query to my update.php.

I know where the errors are in this form, I just dont know how to fix them. #1 = variables in the img src (i dont know if i can put them in the href instead?), and the 2nd is the $('#id') and $('#open') I don't think are correct, but I don't know what to change them to either.

Any assistance would be much appreciated.

Phillip.

UPDATE: After reading Otars reply, I thought I had better add the full code re: how the images are to be where they are...

Thank-you. Because these images are being generated through a for() loop (php), is that going to have an affect on how this code will work?

<?php
$query = mysql_query("SELECT * FROM catalogue");
$num = mysql_num_rows($query);

for ($x=1;$x<=$num;$x++) {

  $row = mysql_fetch_row($query);

  ?>

  <a href="#" id="chngeHref" /><img src="<?php echo $row[2]; ?>?id=<?php echo $row[0]; ?>&open=<?php echo $row[1]; ?>" id="chnge" /></a>

<?php

  /* row[0] = id 
     row[1] = open (1 or 0)
     row[2] = image url
  */

  }

?>

Answer 1

Anyway your image has to be a PHP script...

Pass GET parameters to it, do whatever you want in the script and then output the image like this:

Let's say file is called image.php

<?php

    $par = $_GET['test'];

    // Do some PHP related job here


    // Load the image
    header('Content-Type: image/jpeg');
    header('Location: /path/to/your/image.jpg');

?>

Then use it like this: <img src="image.php?test=value">

It gonna call the PHP script first and then display image.

Answer 2

Sorry I don't exactly understand what your trying to do, but think this might help. You can store the images "open" state as a variable inside $(function(){..}). You will then be able to get and set that variable value from within your click event.

$(function() {

    var open = false; // store the image state in the closure not global
    var id = .. 

    $(".chnge img").click(function() {
        if (!open) {
            // fade-in, post to server or whatever

            $.ajax({
                type: "POST",
                url: "update.php",
                data: "id="+ id +"& open="+ open,
                success: function(){
                    // handle response here.
                    // you can still access the open variable here!
                }
            }

            open = true; // want to update open?
        } 
    });
});