勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

      2014/07/02

やりたかった事は以下の通り。

・画像のURLはcode.jpgみたいになってる
・テキストボックスにcode部分を入れて画像が存在すれば表示、
なければノーイメージ画像を表示させる

javascript部分
function image_change(num){
var code = $("#code"+num).val(); //テキストボックスの内容を取得
var image_url = 'http://aaa/images/' + code + '.jpg'; //画像のURLを生成
$("#image"+num).attr('src' , image_url).error(function(){ //画像が見つかれば表示
$("#image"+num).attr('src' , 'http://aaa/images/noimage.jpg'); //無ければノーイメージ画像を表示
});
}

■HTML部分
<input type="text" id="code1" name="code1" onblur="image_change(1);">
<div><img src="http://aaa/images/noimage.jpg"></div>

<input type="text" id="code2" name="code2" onblur="image_change(2);">
<div><img src="http://aaa/images/noimage.jpg"></div>

■その他
error()
http://www.jquerystudy.info/reference/events/error.html
エラーが発生した際に実行する処理を設定できる。
javascriptのtry文みたいな感じなのかな。

キーイベントをトリガーにした方がリアルタイムに反映
できるけどサーバーとかブラウザに負荷かがかかりそうなので
テキストボックスからフォーカスが外れた時に関数実行。

onblur
http://w3g.jp/xhtml/dic/onblur

 - jQuery, 画像

  関連記事

other
ローディングアイコンの自動生成

オートページャーを作成中にローディングしている アイコンが必要になったのでメモ。 ...

jquery_logo
jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

jquery_logo
jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

javascript_logo_unofficial-300x300
javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

images
ImageMagickについて

画像をSSH経由でリサイズする必要があった。 その際に「コンバートがいいよ」とい ...

images
他サーバーにある画像をPHPで取得して保存する方法

他サーバーにある画像をURLで指定して、PHPで取得して保存する方法のメモ。 フ ...

jquery_logo
jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jquery_logo
jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

javascript_logo_unofficial-300x300
Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...