onmouseoverを使用してwp_get_attachment_imageを使用して画像サイズを変更する

Question

以下は、各製品の横に小さなサムネイル（35x35ピクセル）を含む複数行の商品を表示するために使用するコードの一部です。私が作成した管理ページは、製品管理用のスプレッドシートとよく似ています。

すべてがうまくいきますが、私は大きな画像を表示するためにクライアントに「マウスオーバー」したいと考えています。画像の拡大を実現するために「onmouseover」やCSSを使用する方法を理解していますが、通常は従来の<img src... >要素を使用しています。

同じ効果を出すためにwp_get_attachment_imageを変更またはタップすることは可能ですか？私は単純にコードを<img>要素に貼り付けることはできません。なぜなら、その "not there"という言葉は、（私の用語が不足して申し訳ありませんが、これは私が扱える静的なコードではなく関数であると仮定して）入力するためです。

または、アレイを設定しないでください（35,35）、特定のサイズのコンテナをイメージにしてイメージの変更を行うには、そのコンテナを塗りつぶしてください（<li>）。

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li style="display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;">' . $thumbimg . '</li>'; 
    } 
} 

Answer 1

私は2種類の方法で前にこれをやった： （注意私はあなたのインラインCSSを移動しました：背景画像

PHPなど

1.表示画像をそれは簡単に）コードの変更を確認するために作る

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image_src($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer" style="background-image:url('.$thumbimg[0] .')"></li>'; 
    } 
} 

CSS：

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer:hover{ 
    background-size: 105%; 
} 

2.オーバーフロー： "作物" にコンテナ要素に隠された画像

PHPの可視部分：

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer">' . $thumbimg . '</li>'; 
    } 
} 

CSS：

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    overflow: hidden; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer img{ 
    width: 35px; 
} 
.prodimgcontainer img:hover{ 
    width: 39px; 
    height: 39px; 
    /* move the position of the image slightly so it remains centered */ 
    margin-top: -2px; 
    margin-left: -2px; 
} 

このパーセンテージでも動作しますが、固定幅の画像として、私はそれらの寸法を使用して、何が起こっているのかがはっきりしています。

注：

これらの例は、私が行っている作業に基づいており、その概念はどちらの場合にも有効であり、動作するはずです、しかし、私は私の頭の上から上記の彼のコードの変更を加えましたそれはテストされていません。

オプション1を使用すると、特に画像のサイズが違う場合や応答が必要な場合に、画像を扱いやすくなりました。