How to make a dynamic switch image on mouseover with bootstrap?

Question

I would like to change my image from this source src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" to this one src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg" on a mouseover witch will allow me to change the image from black and withe to color image.

<div class="row">
    <?php foreach ($videos as $video) : ?>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
                <div class="caption">
                    <h3><?php echo $video->getTitre(); ?></h3>
                    <p>
                        <?php echo $video->getAnnee(); ?>
                    </p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

Thank in advance for your help, because I only have some background solutions with css, but my php doesn't work in.

score 0 · Answer 1 · answered Sep 04 '14 at 03:23

Try something like this:

HTML:

<div class="row">
    <?php foreach ($videos as $video) : ?>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img onmouseenter='switch(this);' class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
                <div class="caption">
                    <h3><?php echo $video->getTitre(); ?></h3>
                    <p>
                        <?php echo $video->getAnnee(); ?>
                    </p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

JS

function switch(obj){
    $(obj).attr("src", 'img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg');
}

This doesn't work because you cannot execute a `php` code on a `js` file. Think I should try to use AJAX referring to [client-side and server-side programming](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Cocota, Sep 04 '14 at 07:30
Well all I am trying to do is replace one string with another, I am not familiar with php so not really sure why that will not work. — , Sep 04 '14 at 14:02

score 0 · Answer 2 · answered Sep 04 '14 at 11:39

I found a solution with this code, but it is only doing on the image.

<img  
   class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" 
   alt="<?php echo $video->getTitre(); ?>"
   onmouseover="this.src='img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg'"
   onmouseout="this.src='img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg'"
 />

Now I would like to add this code to the Parent Div <div class="col-sm-4 col-md-4"> but I can't make it work.

score 0 · Answer 3 · answered Sep 04 '14 at 13:23

0

There are multiple ways to do this

One of which is to have two images, one for the thumbnail image, and one for the mouseover image. The thumbnail image and the mouseover image are in the exact same spot, but the mouseover image is +1 in the z-index.

//img2 is the mouseover image in this example.
$('#img2').mouseover(function() {
  $(this).fadeTo(250, 1);
});

$('#img2').mouseout(function() {
  $(this).fadeTo(250, 0);
});

http://jsbin.com/jexonoxutoli/1/edit?html,js,output

answered Sep 04 '14 at 13:23

danielrw7

120
6

It is doing the same thing like the answer a gave above. I also don't want to use `CSS` in this part. What I need is when `mouseover('.thumbnails')` my `img src` changes but keeping the `php`part because the filename is getting by this `php` – Cocota Sep 06 '14 at 07:06
This way, the php part is the same, but you don't have to mess with changing the src of the image, and it has a nice animated effect. – danielrw7 Sep 06 '14 at 15:11

score 0 · Accepted Answer · answered Sep 14 '14 at 07:49

Currently I found a solution witch works fine with my code.

$(".thumbnail")
.mouseenter(function(){
    var $img = $(this).find("img");
    var newSrc = $img.attr("src").replace("/bw/", "/color/");
    $img.attr("src", newSrc);
})
.mouseleave(function(){
    var $img = $(this).find("img");
    var newSrc = $img.attr("src").replace("/color/", "/bw/");
    $img.attr("src", newSrc);
});

How to make a dynamic switch image on mouseover with bootstrap?

4 Answers4