Coding Architecture

Web creators ( ウェブクリエイターズ ) 2010年 03月号 [雑誌]に執筆しました。

『positionプロパティのabsoluteを使いこなす』というタイトルの内容について書いています。

興味がある方は、読んでいただければ幸いです。

画像編

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

JavaScriptをきった場合は、下記を表示

2009年の場合、下記を表示

2010年の場合、下記を表示

旧バージョン

■html
<p id="copyrightyear"><img src="common/img/copyright.gif" alt="Copyright &copy; 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 &copy; '+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 &copy; 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 &copy; #### 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 );