наложения фотографий

Question

Im пытается настроить способ просмотра фотографий, когда вы наведите курсор на них, и у меня возникли проблемы с плавающей и позиционирующей. У меня есть такая работа ...

**HTML** 

<div id="container-collection"> 

    <div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div> 
    <div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div> <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div> 

</div> 


**CSS** 

#container-collection { width: 900px; margin:0 auto; padding-top: 90px; } 

#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; } 

#clothes2 { float:left; left:5px; top:5px; width:209px; height:316px; z-index:1; } 

#closeup1 { float:left; left:400px; top:-316px; width:427px; height:648px; z-index:2; visibility: hidden; } 

#closeup2 { position:relative; left:423px; top:-648px; width:427px; height:648px; z-index:3; visibility: hidden; } 

но theres должен быть лучшим способом. Cheers.

Answer 1

Существует много плагинов для JavaScript, которые вы можете использовать для быстрого достижения этого.

Например, попробуйте загрузочный модуль:

http://twitter.github.com/bootstrap/javascript.html#popovers

NB: атрибут data-content в <a> тег может держать содержимое HTML. Просто обратите внимание на использование котировок.

<a href="#" rel="popover" data-content="<img src='image2.jpg' />" data-original-title="A Title"> 
<img src="image1.jpg" border="0" /> 
</a> 

Необязательно, гораздо проще вариант, чтобы показать предварительный просмотр может быть сделано с помощью CSS только, используя парение.

<style> 
    a.info 
    { 
     position: relative; /*this is the key*/ 
     z-index: 204; 
     color: #000; 
     text-decoration: none; 
    } 

    a.info:hover 
    { 
     z-index: 205; 
     background-color: gainsboro; 
    } 

    a.info span{display: none} 

    a.info:hover span 
    { 
     /*the span will display just on :hover state*/ 
     display: block; 
     position: absolute; 
     top: 3em; 
     left: 1em; 
    } 
</style> 

<a class="info" href="javascript:focus();"> 
<img src="image1.jpg" /><span><img src="image2.jpg" /></span> 
</a>