No Image画像を表示する
リンク画像が存在しない場合にNo Image画像を表示する方法について記載します。
自サイトにおいてリンク切れの画像を表示していると、ブラウザによって×マーク等のリンク切れ表示になってしまいます。
放置しておくと見た目が不恰好ですし、なにか自分で用意した代替画像に置き換えられたらいいと思いませんか?
JSサンプル
JavaScriptでのリンク画像が存在しない場合にNo Image画像を表示するのサンプルソースを記述します。
置き換えたい画像は、サンプルでは「noimage.jpg」と表しますが、画像自体はご自分で用意してください。(google検索で「No Image 素材」と検索すればいくつか出てきます)
headタグに記述するJavascriptになります。
<script type="text/javascript">
$(document).ready(function() {
//画像にclassを付加
$('img').addClass('miss');
//画像が見つからないときにエラー
$('img.miss').error(function() {
//置換処理
$(this).attr({
src: 'http://adult-affi.info/img/noimage.jpg', //代替画像URL
alt: 'none image', //代替画像名称
style:'width:220px;height:165px;' //代替画像サイズ
});
});
});
</script>
上記のjavascriptをhead部に記述することで、自動的にリンク切れ画像を自身で用意した代替画像に置き換えて表示してくれるようになります。