Получить изображение, чтобы казаться больше с движущимися мои другие элементы на моей странице

Question

Вот точная вещь, я должен сделать:

Соответствующий JavaScript и HTML, так что, когда пользователь перемещает мышь больше миниатюрное изображение одного конкретного типа комнаты, которое находится на Специальное предложение, изображение полного размера (большего), относящееся к нему, отображается (обратите внимание, что отображение большего изображения не должно вызывать другие страницы элементов для перемещения). Когда пользователь перемещает мышь от миниатюрного изображения , большее изображение должно исчезнуть.

Here is my website.

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

Это мой раздел javascript на данный момент;

div = { 
    show: function(elem) { 
     document.getElementById(elem).style.visibility = 'visible'; 
    }, 
    hide: function(elem) { 
     document.getElementById(elem).style.visibility = 'hidden'; 
    } 
} 

Но я не уверен, если это право или в настоящее время для того, что я хочу,

Тогда это HTML;

<a href="images/garden2.jpg" class="preview"><img src="images/garden2.jpg" width="201"  height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/></a> 
     <div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div> 

но это создает div под изображением и изменяет мои элементы, которые не то, что я хочу.

Answer 1

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

Я сделал простой jsfiddle для вас, чтобы понять

HTML:

<div class="container"> 
    <a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" /></a> 
    <div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div> 
<div> 

<div class="container"> 
    <a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" /></a> 
    <div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div> 
<div>  

CSS:

.container{ 
    position: relative; 
} 

.container .hid-img{ 
    position: absolute; 
    display:none; 
    z-index:1; 
} 

ЯШ:

var div = { 
    show: function(elem) { 
     document.getElementById(elem).style.display = 'block'; 
    }, 
    hide: function(elem) { 
     document.getElementById(elem).style.display = 'none'; 
    } 
} 

EDIT: просто добавить ширину, высоту в IMG тег http://jsfiddle.net/MKPgv/2/

Answer 2

Я хотел бы использовать более простой код, как это:

HTML:

<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg"> 
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /> 
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /> 
</a> 

<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg"> 
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /> 
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /> 
</a> 

CSS:

a { 
    position: relative; 
    display: inline-block; 
} 

a .fullsize { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    display: none; 
    z-index: 1; 
} 

a:hover .fullsize { 
    display: inline; 
} 

JS: -отсутствует-

Fiddle: http://jsfiddle.net/84anu/ Просмотр http://jsfiddle.net/84anu/show/