・
Javascript < サイト構築に便利なTips集 >
→ htmlタグとJavascript
→ Menuとマウスイベント
→ onLoad周り
■htmlタグとJavascript
・
getElementById
ドキュメントにある特定のIDを持つオブジェクトを示します。
IDはHTMLタグのid属性で指定したものになります。
<![CDATA[
<html>
<head>
<title>getElementById</title>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("result").innerHTML = "Sample";
}
// -->
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
]]>
■Menuとマウスイベント
・
まずはCSSでhover
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul.exp1 li:hover{
background:red;
}
</style>
</head>
<body>
<ul class="exp1">
<li>hover</li>
<li>hover</li>
<li>hover</li>
<li>hover</li>
</ul>
</body>
</html>
]]>
・
次はJSで
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(target){
document.getElementById(target).style.background = "red";
}
function test2(target){
document.getElementById(target).style.background = "#ffffff";
}
//-->
</SCRIPT>
</head>
<body id="xxxx">
<ul>
<li id="a" onmouseover="test('a')" onmouseout="test2('a')">aaa</li>
<li id="b" onmouseover="test('b')" onmouseout="test2('b')">bbb</li>
<li id="c" onmouseover="test('c')" onmouseout="test2('c')">ccc</li>
</ul>
</body>
</html>
]]>
☆おまけ
・
PHP版
■onLoad周り
・addEventListener load
・attachEvent onload
↓ここで勉強しましょう。
http://www.gesource.jp/programming/javascript/20050914.html
☆
Javascript&CSSで便利なナビゲーション♪
・h9rollover2.jsを読み込み。
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="h9rollover2.js"></script>
<style type="text/css">
ul#menu li:hover{
background:red;
}
.hhover{
background:red;
}
</style>
</head>
<body id="xxxx">
<ul id="menu">
<li><a href="index.html">hover</a></li>
<li><a href="test02.html">hover</a></li>
<li><a href="js_css_01.html">hover</a></li>
<li><a href="test04.html">hover</a></li>
</ul>
</body>
</html>
]]>
☆
もしも画像だったら・・・
・_on と _offの画像を用意。
・h9rollover.jsを読み込み。
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script type="text/javascript" src="h9rollover.js"></script>
</head>
<body id="xxxx">
<ul id="menu">
<li><a href="index.html"><img src="menu1_off.gif" alt="ホーム" /></a></li>
<li><a href="high0.html"><img src="menu2_off.gif" alt="メニュー1" /></a></li>
<li><a href="menu2.html"><img src="menu3_off.gif" alt="メニュー2" /></a></li>
<li><a href="high1.html"><img src="menu4_off.gif" alt="メニュー3" /></a></li>
</ul>
</body>
</html>
]]>
嗚呼・・・便利♪
・蛇足
一応jquery版のロールオーバーも。
※カスタマイズはお任せします・・・