2013/2/11

画像のロールオーバーについて

その昔はDreamweaverでロールオーバーイメージの挿入とかやってたんですけど、もう静的なサイト以外ではほとんどDreamweaver開かずに、NetBeansでの作業ばかりなので、ロールオーバーはこういうのが一番楽だなあと思った。

ソースがシンプルなJSによるロールオーバー – CSS HappyLife

<script language="javascript" type="text/javascript"><!--
function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for(var i=0; i < images.length; i++) {
			if(images&#91;i&#93;.getAttribute("src").match("_off."))
			{
				images&#91;i&#93;.onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images&#91;i&#93;.onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}
--></script>

こういうサイト全体で一つの処理で、運用というか、画像ファイルのネーミングポリシーでカバーするやり方のほうがラクチンですよね。

まあCSSでやることの方が多いけど、たまに画像のロールオーバーが必要になるものもあるので。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram