jquery change image on hover (and then come back to initial image)

i have a photo gallery, and i really want to change each image on hover, with another image. i fetch the images dynamically, from a database, (it is practically a vector of images)

right now, i use a jquery plugin, but it doesn't work. the only way it works, is if i put the id statically (always the same), but then it only changes me any image with a single specific image . what can i do? i have the code:

  <? foreach ($paginated_products as $product):?>
  <? $image =  $product->images->limit(2)->find_all();  ?>

     <script>

    $('img#nav<?php echo $image[1]; ?>').hover(function()开发者_如何学C {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });</script>
    //this way doesn;t work at all. if i put simply img#nav , it only changes me with a single image.

    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>"></img>

Shouldn't you separe your script in 2 parts.

You're $(...).hover() functions could not work because jquery is not yet initialized.

PS: could you display a part of the generated html.

The first one should like:

<script>

$(document).ready(function() {
    <? foreach ($paginated_products as $product):?>
        <? $image =  $product->images->limit(2)->find_all();  ?>
        $('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });
    <?php endforeach; ?>

});
</script>

Then you'll have second part in your body (where pictures should go)

<?php foreach ($paginated_products as $product):?>
    <?php $image =  $product->images->limit(2)->find_all();  ?>
    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>" />
<?php endforeach; ?>

You would be better off providing a key/value object for alternatives.

 <script>
    var altImages = {
<?php
    $images = array();
    foreach ($paginated_products as $product) {
        $cImage =  $product->images->limit(2)->find_all();
?>
                      "<?php echo $image[1]->url; ?>": "<?php echo $image[0]->url; ?>",
<?php
        $images[] = $cImage;
    }
?>
    };

    $(document).ready(function() {
        $('.switch-img').hover(function() {
            $(this).data('old-src', $(this).attr('src'));
            $(this).attr('src', altImages[$(this).attr('src')]);
        }, function() {
            $(this).attr('src', $(this).data('old-src'));
        });
    });
</script>

<?php
    foreach ($images as $cImage) {
?>
    <img src="<?php echo $cImage[1]->url; ?>" class="switch-img" />
<?php
    }
?>

There seems to be a mismatch somewhere, according to your comment $image[1] is an integer but according to your code, it is an object.

If it is an object, nav<?php echo $image[1]; ?> will leave you with a lot of identical id's which explains the problem you're having.

Most likely (I haven´t seen your classes...) the id is stored somewhere in the object, so you would have to use something like $image[1]->id instead of $image[1].

If you had a link for each image, you could specify a class for each image and iterate through them when you hover. Here's an example of how to do this with 3 images:

http://jsfiddle.net/briguy37/QSQ62/

UPDATE

Also, here's an example where you can change the background image directly with JQuery so you don't have to write a bunch of CSS class definitions. You'll have to modify this to call the appropriate image URLs to load them from the database:

http://jsfiddle.net/briguy37/QSQ62/3/

The image changes will be faster if you use sprites instead of separate images, since the browser loads all of them at the same time as one image, then you can just change the background-position using jquery.

jQuery(document).ready(function($) {
    $('<img src="//replace with php src call" id="//replace with php id call" onMouseOver="hoverImg()" onMouseOut="resetImg()"/>').insertAfter('//the element that the image will be place after in the HTML');
});

function hoverImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with hover image source";
}

function resetImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with original image source";
}

That is one way of doing it (unless you don't want to add in the <img> element in through jQuery)