javascript - javascript/css: ロールオーバー効果で画像を左上に拡大する

Question

ユーザーがサムネイルを展開して、マウスオーバーで大きなプロフィール写真を表示できるようにしたいと考えています。ただし、現在持っているロールオーバー効果は、周囲のテキストの上に画像を表示するのではなく、テーブルの行を拡大した画像のサイズに拡大します。テキストを移動せずにロールオーバーで画像を拡大する方法、つまり、邪魔にならないように他のhtmlの上に大きな画像を表示する方法を誰かが提案できますか? z-index を試しましたが、うまくいかないようです。

問題を示すjsfiddleは次のとおりです。

http://jsfiddle.net/gLr9Q/

これは、js fiddle と同じコードです。

<script language="JavaScript">
  <!-- hide from non JavaScript Browsers
  image = new Array()
  image[0]= new Image(24,24)
  image[0].src = "http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
  image[1] = new Image(48,48)
  image[1].src = "https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
</script>
<tr><td colspan=2>
<p align="center"> 
<a href="contactdetail.php"
  onmouseover="newPic()"
  onmouseout="oldPic()">
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
  name="pic" 
class="rollover"  
    border=0>
</a> 
</p></td></tr>
<tr><td>Here is text</td></tr>

js

function newPic(){
    document.pic.style.left="-24px";
    document.pic.style.top="-24px";
     document.pic.src = image[1].src;
    return true;
  }

  function oldPic(){
    document.pic.src = image[0].src; 
    return true;
  }

CSS:

#rollover {
  display: block;
  z-index:99;
  padding: 4px;
  position:relative;
  text-align:left;
  width:48px;
  background-color:#E8E8E8;
  opacity:1.0;
  filter:alpha(opacity=100); 
}

Answer 1

次のようなものを追加できます。

#Text {
    position:absolute;
    top:48px;
}

テキストが ID のブロック要素にある場所Text。フィドルを更新しました。

Answer 2

これにはjavascriptは必要ありません。jsFiddleの動作デモを参照してください。CSS
でそれを行う：

td.imgCell {
    height: 40px; /* a value greater than image height + paddings */
    text-align: center;
}

img.rollover {
    display: inline-block;
    position: relative;
    padding: 4px;
    width: 24px;
    height: 24px;
    background-color:#E8E8E8;
    border: 0px none;
}

img.rollover:hover {
    position: absolute;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    z-index: 99;
}

変更されたHTMLは次のとおりです。

<table>
    <tr>
        <td class="imgCell">
            <a href="contactdetail.php">
                <img class="rollover" src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" />
            </a> 
        </td>
    </tr>
    <tr>
        <td>Here is text</td>
    </tr>
</table>

コンテナー td のクラスも宣言および設定されていることに注意してください。<td class="imgCell">

キーポイント：

• コンテナ<td>の高さは固定する必要があります。
• ホバーしたときに画像のabsolute位置が必要です。

その他の修正/提案:

• colspanHTML に属性は必要ありません。colspan 属性は、セルがまたがる列の数を定義します。<td>各行に1 つあるため、その必要はありません( <tr>)。
• <p>アンカー タグを囲むラッピング タグは、実際には必要ありません。しかし、それは間違っていません。

その JS コードの使用を主張する場合。

• 最初にあるので、タグ//-->の直前にも含める必要があります。</script><!-- hide from non JavaScript Browsers
• 各 JavaScript ステートメントの最後にセミコロンを追加する必要があります。あなたには何もありません。
• イメージ変数は で宣言する必要がありvarます。そうしないと、グローバル スコープになります。
• jsLint などのツールが提案[]するのではなく、配列を初期化する必要があります。new Array()

Answer 3

CSSplay - magnifyから盗みました。Javascriptなしでこれを行うことができます

HTML:

<tr>
    <td colspan=2>
        <p align="center">  <a class="rollover" href="contactdetail.php">
            <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/>
            <span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span>
</a> 
        </p>
    </td>
</tr>
<tr>
    <td>Here is text</td>
</tr>

CSS:

a.rollover {
    display: block;
    position: relative;
}
a.rollover span {
    position: absolute;
    left: -10000px;
}
a.rollover:hover span {
    position: absolute;
    left: 200px;
}

JSFiddle

更新：

これがあなたの考えかどうかはわかりませんが、大きな画像を好きな場所に配置できます

CSS:

a.rollover:hover span {
    position: absolute;
    left: 120px;
    top: -20px;
}

JSFiddle

ホバー時に下の画像を非表示にしたい場合は、追加してみてくださいopacity: 0

<img class="thumbnail" src="...">

と

a.rollover:hover .thumbnail {
    opacity: 0;
}

JSFiddle

ただし、これがすべてのブラウザで機能するかどうかはわかりません。

Answer 4

<img>これを行う方法は、必要なすべてのノードを複製し、それらを<div>s 内に配置してから、CSS を使用:hoverして残りの作業を行うことです。例フィドル。
私のコードは<img>、ドキュメント内のどこにいても好きなだけ動作し、親ノードのサイズを固定する必要はありません。
JavaScript による HTML 構造の変更により、他のスタイルが期待どおりにならない場合は、CSS または選択したクラス名を変更する必要がある場合があります (以下の「結果の HTML」を参照)。

// JavaScript
window.onload = function () { // when document has loaded, consider `window.addEventListener('load', /* code */, false);` in real world usage
    var elm = document.querySelectorAll('img.rollover'), // get all <img>s with class "rollover"
        i = elm.length, d;
    while (--i >= 0) { // put each one and a clone into a <div> where it was
        d = elm[i].parentNode.insertBefore(document.createElement('div'), elm[i]);
        d.className = 'rollover';
        elm[i].className = (' '+elm[i].className+' ') // set class'
                            .replace(/ rollover /g, ' ')
                            .slice(1, -1);
        d.appendChild(elm[i]);
        d.appendChild(elm[i].cloneNode()).className += ' rollover_big'; // I did clone here to save needing an extra variable
        elm[i].className += ' rollover_small';
    }
};

/* CSS */
div.rollover {position: relative; display: block;} /* relative to allow for abs. positioning of big image */
div.rollover img.rollover_small {width: 24px;}
div.rollover img.rollover_big { /* position over small image*/
    width: 48px;
    display: none;
    position: absolute;
    top: 0px;
}

div.rollover:hover img.rollover_small {visibility: hidden;} /* visibility to hold space*/
div.rollover:hover img.rollover_big {display: block;} /* show bigger node*/

<!-- HTML -->
<table>
    <tr>
        <td colspan=2><a href="contactdetail.php"><img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover"/></a></td>
    </tr>
    <tr>
        <td>Here is text</td>
    </tr>
    <!-- etc. -->
</table>

<!-- Resulting HTML after load event -->
<table>
    <tr>
        <td colspan=2><a href="contactdetail.php">
            <div class="rollover">
                <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_small"/>
                <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_big"/>
            </div>
        </a></td>
    </tr>
    <tr>
        <td>Here is text</td>
    </tr>
    <!-- etc. -->
</table>