Me gustaría cambiar mi imagen de esta fuente src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" a esta src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg" en un mouseover bruja me permitirá cambiar la imagen de negro y con color a imagen.

<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>

Gracias de antemano por su ayuda, porque solo tengo algunas soluciones de fondo con css, pero mi php no funciona.

1
Cocota 4 sep. 2014 a las 04:46

4 respuestas

La mejor respuesta

Actualmente encontré una solución que funciona bien con mi código.

$(".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);
});
0
Cocota 14 sep. 2014 a las 07:49

Hay varias formas de hacer esto.

Una de ellas es tener dos imágenes, una para la imagen en miniatura y otra para la imagen del mouseover. La imagen en miniatura y la imagen del mouseover están exactamente en el mismo lugar, pero la imagen del mouseover es +1 en el índice z.

//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

0
danielrw7 4 sep. 2014 a las 13:23

Encontré una solución con este código, pero solo funciona en la imagen.

<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'"
 />

Ahora me gustaría agregar este código al Parent Div <div class="col-sm-4 col-md-4"> pero no puedo hacerlo funcionar.

0
Cocota 4 sep. 2014 a las 11:39

Prueba algo como esto:

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');
}
0
user3991493user3991493 4 sep. 2014 a las 03:23