[JS]サムネイルにマウスオーバーしたら画像を切り替える
大きい画像１箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。 テーブル版、複数設置版、クロスフェード版の他、jQuery版とMooTools版も書きました。 シンプル版 イベントリスナーを使用したもの thumbsというIDにあるimgタグを自動収集して、srcから_thumbを抜いたものを viewに入ってるimgのsrcへ置換します。 テーブル版 イベントリスナーを使用したもの カスタマイズする場合はforの変数iが1から始まっている事に注意。 これは取得したimgの配列から先頭にあるimg#rollover_viewを飛ばすためです。 逆配置にする場合は、0スタートで(myImg.length-1)とする。 ページ内に複数設置する場合 大きい画像とリストのIDをクラスに変更。親のIDを指定して実行します。 複数設置＋
![[JS]サムネイルにマウスオーバーしたら画像を切り替える](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
【JQuery】自動切り替え＋サムネイルクリックで画像切り替え ｜ Tips Note by TAM
※※※URLが変更となりました。 以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post3351.html） ブックマークをされている方はお手数ですが変更をお願いいたします。※※※ サムネイルつきのギャラリーで、キャプションつき、 画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。 まず、やりたいことをまとめます。 指定した時間で、自動的に画像やテキストが切り替わる サムネイルをクリックしても切り替わる 切り替わるエフェクトはクロスフェード 開始場所を指定できる（コメント欄参照ください） JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div clas
Twitpic 等の画像投稿サービスのサムネイル画像の URL - もしかして: blog.iron's.jp
ページ URL を書き換えるだけでサムネイル画像が表示できるもの Twitpic （ドキュメント） ページ: http://twitpic.com/<image-id> サムネイル画像: http://twitpic.com/show/<size>/<image-id> <size>: “mini” or “thumb” 携帯百景 ページ: http://twitpic.com/<image-id> サムネイル画像: http://image.movapic.com/pic/<size>_<image-id>.jpeg <size>: “s” or “t” はてなフォトライフ ページ: http://f.hatena.ne.jp/<user-id>/YYYYMMDD<image-id> サムネイル画像:http://img.f.hatena.ne.jp/images/fotolife/<u
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」:phpspot開発日誌
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
