menu
menu

JavaScriptでロールオーバー | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+6
  • Pocket0
  • Twitter0

JavaScriptでロールオーバー

  • Labs

JavaScript

こんにちは(・∀・)

 今回はJavaScriptを使ったロールオーバーボタンをご紹介します。

サンプルデモ

 サンプルデモ表示はこちら!


HTML

<div id="gnav">
<ul>
<li><a href="#"><img src="gnav1.png" alt="HOME" class="on"></a></li>
<li><a href="#"><img src="gnav2.png" alt="STRATEGY" class="on"></a></li>
<li><a href="#"><img src="gnav3.png" alt="ABOUT" class="on"></a></li>
<li><a href="#"><img src="gnav4.png" alt="WORKS" class="on"></a></li>
<li><a href="#"><img src="gnav5.png" alt="MAIL" class="on"></a></li>
</ul>
<!--gnav--></div>
CSS

#gnav {
	width: 500px;
	height: 25px;
	margin: 0 auto;
}
#gnav ul {
	overflow: hidden;
}
#gnav li {
	float: left;
}
JavaScript

function rollover() {
var images = document.getElementsByTagName('img');
for(var i=0; i < images.length; i++) {
if(images[i].className == 'on') {
var iFle = images[i].getAttribute('src');
var iFit = iFle.substring(iFle.lastIndexOf('.'), iFle.length);
var iRep = iFle.replace(iFit, '_on' +iFit);
images[i].setAttribute('iRep', iRep);
images[i].onmouseover = function() {
this.setAttribute('src', this.getAttribute('iRep'));
}
images[i].onmouseout = function() {
this.setAttribute('src', this.getAttribute('src').replace('_on' +iFit, iFit));
}
}
}
}
if(window.addEventListener) {
window.addEventListener('load',rollover,false);
} else if(window.attachEvent) {
window.attachEvent('onload',rollover);
}

関連リンク

 CSSだけでロールオーバーボタン

  • カテゴリー:Labs
  • facebook4
  • はてなブックマーク3
  • Google+6
  • Pocket0
  • Twitter0