Question

我正在尝试将一张桌子中的图像链接到另一张桌子中的另一张（更大）图像

基本上我有两张桌子，左右。在左表中我有两个小图像。在右边的表格中，我什么都没有。我希望能够将鼠标悬停在左表中的小图像上，并在右表中查看更大的相应图像。

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

任何CSS或HTML建议都会很棒，

非常感谢，

安东

P.S。我是CSS的初学者

Answer 1

嗯..在javascript中有一种简单的方法。所以javascript很简单。

你的HTML（这显然不是你的，但它是一个场景）

<div class='right'>
    <div class='img'>
        <img id='1' src='img1-small.png'>
    </div>
    <div class='img'>
        <img id='2' src='img2-small.png'>
    </div>
    <div class='img'>
        <img id='3' src='img3-small.png'>
    </div>
</div>
<div class='left'>
    <div class='img ui-helper-hidden'>
        <img id='1' src='img1-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='2' src='img2-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='3' src='img3-large.png'>
    </div>
</div>

现在我假设你有jQuery（对不起，如果你没有，但想法是相似的）。

$(function() {
        $('.right .img').hover(
        //over
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeIn(200);
        },
        //out
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeOut(200);
        }
    )
});

Answer 2

基于Michael's帖子

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

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

Answer 3

试试这个，我左边有一个大图像，右边有3个图像。

鼠标悬停时，它们将替换大图像。鼠标移出旧图像会回来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />

</head>

<body>
<p>
  <script type="text/javascript" language="javascript">
function changeImage(img){
   document.getElementById('bigImage').src=img;

}
</script>


<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
  <tr>
    <th height="380" scope="col"><img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /></th>
  </tr>
</table>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
  <tr>
    <th scope="col"><div>
      <p> <img src="../Pictures/lightcircle1.png" height="79" width="78" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> </p>
      <p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
      <p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
      <p>&nbsp;</p>
      </br>
    </div></th>
  </tr>
</table>
<p>&nbsp; </p>
</body>
</html>

在不同的表格中悬停时更改多个图像

3 个答案: