我想从这个来源更改我的图像 src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg"
到这个src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg"
鼠标悬停 女巫将允许我将图像从黑色和白色更改为彩色图像。
<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>
在此先感谢您的帮助,因为我只有一些带有 css 的后台解决方案,但我的 php 无法正常工作。
最佳答案
尝试这样的事情:
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');
}
关于javascript - 如何使用 Bootstrap 在鼠标悬停时制作动态切换图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25655723/