在不同表格中悬停时更改多个图像 [英] change multiple image on hover in different tables

问题描述

我正在尝试将一张表中的图像链接到另一张表中的另一张(更大的)图像

基本上我有两张桌子，左边和右边.在左表中，我有两个小图像.在右边的桌子上我什么都没有.我希望能够将鼠标悬停在左表中的小图像上，并在右表中看到较大的对应图像.

我想出了如何用 html/css 交换同一个表中的两个图像，但无法弄清楚如何实现我上面描述的功能.

任何 CSS 或 HTML 建议都很棒，

非常感谢，

安东

附言我是 CSS 初学者

解决方案

基于 Michael 的帖子

<img src='img1-small.png' class='swapme'><img src='img3-small.png' class='swapme'>
<div id='image_here'>

<!--如果您已经包含jquery，请删除下一行--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type="text/javascript"></script><脚本>//当文档准备好时运行，如果你是jquery的新手，只需忽略它并认为它是理所当然的$(document).ready(function(){$(".swapme").hover(function(){//鼠标悬停var newSrc = $(this).attr("src");newSrc= newSrc.replace('/small/','large');//这假设文件是​​这样命名的//小文件:img3-small.png//大文件:img3-large.png$("#image_here").html("<img src='" + newSrc + "' id='deleteMe'/>")},//结束鼠标悬停function(){//在鼠标移开时$("#deleteMe").remove();//仅在鼠标悬停时显示图像}//结束鼠标移出)//结束悬停})//结束document.ready

是的，这也取决于 jQuery，但我认为这是最容易理解和编写代码的方式

I am trying to link images in one table to another(bigger) images in the other table

Basically I have 2 tables, left and right. in the left table I have two small images. in the right table I have nothing. I want to be able to hover over small image in the left table and see the bigger corresponding image in the right table.

I figured how to swap two image in the same table with html/css, but can't figure out how to achieve the functionality that I've described above.

Any CSS or HTML advice would be great,

Thanks a lot,

anton

P.S. I am the beginner with CSS

解决方案

Based on Michael's post

<div class='imgcontainer'>

        <img src='img1-small.png' class='swapme'>

        <img src='img2-small.png' class='swapme'>

        <img src='img3-small.png' class='swapme'>

</div>
<div id='image_here'>

</div>

<!--delete the next line if you've already included jquery  -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
           type="text/javascript"></script>
<script> 
   //this runs when the document is ready, if you're new to jquery, just ignore this and take it for granted 
$(document).ready(function(){ 
   $(".swapme").hover(
     function(){ //on mouse over
        var newSrc = $(this).attr("src");
        newSrc= newSrc.replace('/small/','large'); 
        // this assumes that files are named like so
        // small file : img3-small.png 
        // large file : img3-large.png
        $("#image_here").html("<img src='" + newSrc + "' id='deleteMe'/>")
     },//end mouse over
     function(){//on mouse out
        $("#deleteMe").remove(); // show image only on mouse over
     }//end mouse out
)//end hover
})//end document.ready

</script>

And yes, this depends on jQuery too, but i think it's the easiest to understand and code way to do it

这篇关于在不同表格中悬停时更改多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！