勉強したことのメモ

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="https://aaa/images/noimage.jpg"></div>

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

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

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

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

 - jQuery, 画像

  関連記事

PHPで画像のサイズや拡張子等、詳細情報を取得

PHPで画像のサイズや拡張子等、詳細情報を取得する際 いつもググってしまっていた ...

独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

FLASHから受信した画像をPHPで保存し、サムネイルも作る

■参考サイト ・FLASH http://www.ilovex.co.jp/bl ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

画像登録用のfunction

<?php /****** 画像アップロード用function 画像送付側 ...

FullCalendarでラベル毎に表示切替したい

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

PHPで縦横どちらかが指定の長さを超えた場合、比率を保ったままリサイズ

PHPで縦横どちらかが指定の長さを超えた場合、 比率を保ったままリサイズしたかっ ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...