2

これが私がしなければならない正確なことです：

適切な JavaScript と html を使用して、ユーザーが特別提供中の特定のタイプの部屋のサムネイル画像の上にマウスを移動すると、その部屋に関連するフル サイズの (より大きな) 画像が表示されるようにします (より大きな画像の表示は、他のページ要素を動かさないでください)。ユーザーがマウスをサムネイル画像から離すと、大きな画像が消えます。

ここに私のウェブサイトがあります。

ページの外観を変更せずに、それらの画像にカーソルを合わせてページの上に表示できるようにしたいだけです。

これは現時点での私の 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を作成し、私の要素を変更しますが、これは私が望んでいることではありません。

4

2 に答える 2

0

いくつかの要素を他の要素の上に表示する場合は、この要素を配置する必要があります-あなたの場合の最善の方法は、すべてのコンテナ要素を設定することです-元の表示画像と非表示画像を含む要素を意味します-スタイル位置相対-および隠し画像は絶対位置を設定し、元の画像にカーソルを合わせると、コード化された隠し画像が表示されます。

あなたが理解できるように、簡単な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;
}

js:

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

編集: 幅、高さを img タグhttp://jsfiddle.net/MKPgv/2/に追加するだけです

于 2013-04-21T22:53:58.847 に答える