サポート » 使い方全般 » サムネイル画像にマウスオーバーした際に、メイン画像を別の画像へ変更

  • kkondo830と申します。
    【テーマ】Bizvektor(最新版)
    【対象ページ】http://zakka-finna.sakura.ne.jp/wp/shopping/go_out/tellatale_bookcover

    ECサイトを作成していますが、商品ページで下記仕様を実装しようとしていて
    うまく動かずに、詰まっております。

    ・サムネイル画像に、マウスのポインタを載せる
    ・サムネイルにマウスを載せている間、別のメインの画像が違う画像になる。

    グーグルで調べ、
    サムネイルのimgタグの中に
    onmouseover=”this.src=’http://○○.png'”を入れるところまでは
    動作させることができました。具体的には下記コードを追加しております。

    <img class=”alignright wp-image-120″ src=”http://○○.png&#8221; alt=”××” width=”99″ height=”99″ onmouseover=”this.src=’http://△△.png'”/&gt;

    しかしthis.srcでなく、マウスをサムネイルに載せたときに
    メインの画像を別のものに変えることがWordpressでうまくできず困っております。

    下記ソースをimgタグに追加してみましたが、画像は変わらず更新後に
    ソースコードを見ると削除されております(メインの画像にはid記述済。Wordpressがはじいた?)
    onmouseover=”document.getElementById(‘□□’).src=’http://△△.png'&#8221;

    どなたか実装のやり方をご存知の方がいらっしゃいましたら
    教えていただけますでしょうか。

    何とぞ、よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは、

    私的なメモですが、

    返信先: サムネイル画像にマウスオーバーした際に、メイン画像を別の画像へ変更

    お役に立ちますか?

    nobitaさん
    ご回答いただき、誠にありがとうございます。

    srcset属性を初めて、使わさせていただきました。画像のサイズも指定して切り替えられるのですね。
    教えて頂いたような、マウスを画像に載せると載せた画像「自体」が
    別の画像になることはwordpressで実装できました。ありがとうございます!

    しかし今、Aという画像にマウスを重ねたときに、
    別の場所にあるBという画像をCに変えたい
    ということもやりたいと考えていまして。

    nobitaさんが組まれている3行目の
    onmouseover=”this.setAttribute(‘srcset’,

    onmouseover=”document.getElementById(“a”).setAttribute(‘srcset’,と
    して

    変えたい対象の画像にid = “a”のタグを入れてみたのですが
    この場合はうまく機能しません。なにかこのようなやり方で
    wordpressで機能させるコードをご存知でしょうか。

    お手すきの際に
    何とぞよろしくお願いいたします。

    しかし今、Aという画像にマウスを重ねたときに、
    別の場所にあるBという画像をCに変えたい
    ということもやりたいと考えていまして。

    それは、実際にどのようなhtmlでの事なのかによってやり方も変わるでしょうし、方法も一つではないので、なんとも、、、

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「サムネイル画像にマウスオーバーした際に、メイン画像を別の画像へ変更」には新たに返信することはできません。