オンマウスで商品画像を切り替える

テクノロジーカテゴリーの変更を依頼記事元:

detarame.moo.jp

9 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fdetarame.moo.jp%2F2011%2F02%2F17%2F%25E3%2582%25AA%25E3%2583%25B3%25E3%2583%259E%25E3%2582%25A6%25E3%2582%25B9%25E3%2581%25A7%25E5%2595%2586%25E5%2593%2581%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E5%2588%2587%25E3%2582%258A%25E6%259B%25BF%25E3%2581%2588%25E3%2582%258B%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://detarame.moo.jp/2011/02/17/%E3%82%AA%E3%83%B3%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%A7%E5%95%86%E5%93%81%E7%94%BB%E5%83%8F%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B/">オンマウスで商品画像を切り替える</a><a href="https://b.hatena.ne.jp/entry/detarame.moo.jp/2011/02/17/%E3%82%AA%E3%83%B3%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%A7%E5%95%86%E5%93%81%E7%94%BB%E5%83%8F%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B/">はてなブックマーク - オンマウスで商品画像を切り替える</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

オンマウスで商品画像を切り替える

通常サイズの画像とその下にサムネイル画像をセットで表示していて、サムネイル画像にマウスが触れると... 通常サイズの画像とその下にサムネイル画像をセットで表示していて、サムネイル画像にマウスが触れると通常サイズで画像が表示するようにしてみます。この方法を使うことで、ショッピングサイトなどで、よく見かける一つの商品を色んなアングルから見れるような商品の紹介が出来ると思います。オンマウスで商品画像を切り替えるサンプル下記がサンプルになります。サムネイル画像の上にマウスを置くと画像が切り替わります。下記のhtmlコードとcssコードで作成していますが、必要なところをサイトに合わせて書き直しお使い下さい。 htmlのコード <div class="imgonmouse">  <img src="画像1アドレス" name="imgonmouse" width="300" height="300" /> <ul> <li><img src="画像1アドレス