2010年2月 2日
コピーライトを年度ごとにJSで自動更新する(画像編)
画像編
- JavaScriptをきった場合は、年数がはいっていない画像を表示する。
- Development Referenceのマシモンに、相対パスでも使えるようにしたりもろもろ修正してもらいました。
- コピーライトの画像はデフォルト画像と同じディレクトリに配置
- altも、年度ごとに自動できりかわる。
- JavaScriptをきった場合は、下記を表示

- 2009年の場合、下記を表示

- 2010年の場合、下記を表示

旧バージョン
■html
<p id="copyrightyear"><img src="common/img/copyright.gif" alt="Copyright © Magic Happens" width="201" height="13" /></p>
■JS
function thisYear(){
var day=new Date();
var year=day.getFullYear();
if(document.getElementById("copyrightyear")){
document.getElementById("copyrightyear").innerHTML='<img src="'+'common/img/copyright'+year+'.gif" alt="Copyright © '+year+' Magic Happens" width="201" height="13" />';
}
}
function addEvent(){
try {
window.addEventListener('load', this.thisYear, false);
} catch (e) {
window.attachEvent('onload', this.thisYear);
}
}
addEvent();
新バージョン
■html
<p id="copyright"><img src="images/copyright.gif" alt="copyright © Magic Happens" width="201" height="13" /></p>
■JS
// --------------------------------------------------------------------
// Author : mashimonator
// Create : 2010/01/25
// Update : 2010/01/25
// Description : コピーライト画像を該当年によって自動で切り替えて表示する
// --------------------------------------------------------------------
/*@cc_on
var doc = document;
eval('var document = doc');
@*/
var copyright = {
//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
targetId : 'copyright', // コピーライトのID
prefix : {
img : 'copyright_####.gif', // ####部分に年数が挿し込まれる
alt : 'copyright © #### Magic Happens' // ####部分に年数が挿し込まれる
}
},
storage : {
origin : ''
},
//-----------------------------------------
// 初期処理
//-----------------------------------------
initialize : function() {
var element = document.getElementById(copyright.config.targetId);
if ( element ) {
var img = element.getElementsByTagName('IMG');
if ( img && img.length > 0 ) {
// 初期設定値を保持
copyright.storage.origin = img[0].src;
// 画像パスの書き換え
img[0].src = copyright.getFilePath();
// altの書き換え
img[0].alt = copyright.getAlt();
// 画像が存在しない場合
img[0].onerror = function() {
this.src = copyright.storage.origin;
};
}
}
},
//-----------------------------------------
// 該当年のコピーライト画像ファイルのパスを返す
//-----------------------------------------
getFilePath : function() {
// 該当年取得
var day = new Date();
var year = day.getFullYear();
// パス書き換え
var path = copyright.storage.origin.split('/');
path[path.length-1] = copyright.config.prefix.img.replace('####', year);
return path.join('/');
},
//-----------------------------------------
// 該当年のコピーライト画像ファイルのaltを返す
//-----------------------------------------
getAlt : function() {
// 該当年取得
var day = new Date();
var year = day.getFullYear();
// alt書き換え
return copyright.config.prefix.alt.replace('####', year);
},
//-----------------------------------------
// イベントに関数を付加する
//-----------------------------------------
addEvent : function( target, event, func ) {
try {
target.addEventListener(event, func, false);
} catch (e) {
target.attachEvent('on' + event, (function(el){return function(){func.call(el);};})(target));
}
}
}
// 実行
copyright.addEvent( window, 'load', copyright.initialize );
トラックバック(0)
このブログ記事を参照しているブログ一覧: コピーライトを年度ごとにJSで自動更新する(画像編)
このブログ記事に対するトラックバックURL: http://magic-happens.net/mt/mt-tb.cgi/109
コメントする