изменить несколько изображений на парении в разных таблицах

Я пытаюсь связать изображения в одной таблице на другие (больше) изображения в другой таблицеизменить несколько изображений на парении в разных таблицах

В принципе у меня есть 2 таблицы, слева и справа. В левой таблице у меня два небольших изображения. в правом столе у меня ничего нет. Я хочу, чтобы наведите курсор на небольшое изображение в левом столе и посмотрите на большее соответствующее изображение в правой таблице.

Я понял, как поменять два изображения в одной таблице с помощью html/css, но не могу понять, как достичь описанной выше функциональности.

Любой CSS или HTML совет будет большим,

Спасибо большое,

Антон

P.S. Я начинаю с CSS

источник

2012-01-25 anton

Хочешь разрешение по javascript? Я думаю, это было бы просто. – Michael

Невозможно с CSS, легко с javascript. – mowwwalker

Хорошо .. В 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); 
     } 
    ) 
});

источник

2012-01-25 01:49:55 Michael

Мне нужно создать пользовательский файл для «у вас есть jQuery» в dremaviewer? У меня есть последняя версия, но я не вижу возможности для этого, но я вижу javascript. Спасибо, – anton

Вы можете импортировать jQuery в свой проект с помощью этой строки. '' – Michael

на основе 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 тоже, но я думаю, что это самый простой для понимания и код способ сделать это

источник

2012-01-25 02:21:17 Bogdan

Попробуйте, здесь я имеют большое изображение слева и 3 изображения справа.

На мышином наведении sll 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>

источник

2012-03-05 13:02:27

Теперь изменяется только 1 изображение, вы можете изменить несколько изображений. Вам просто нужно добавить свои коды в javascript –

изменить несколько изображений на парении в разных таблицах

ответ

Смежные вопросы