戻るマウスが文字に触れると動的に動く |
◆マウスが文字に触れると動的に変化する◆ |
■■１■■
[概要]
文字にマウスが乗ると文字の色が変化する。
[参照]
DHTML講座（フォント）
[ソース]
<HTML>
<HEAD>
<TITLE>リンクの強調表示</TITLE>
</HEAD>
<BODY>
<!--変化させたい文字色に変更-->
<SPAN onmouseover="this.style.color='red';"
onmouseout="this.style.color='';">ヨッシーの”ホームページを作ろう！”</SPAN>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
文字にマウスが乗ると文字の背景色が変化する。
[参照]
DHTML講座（フォント）
[ソース]
<HTML>
<HEAD>
<TITLE>ステータスバーに文字表示</TITLE>
</HEAD>
<BODY>
<!--変化させたい背景色に変更-->
<SPAN onmouseover="this.style.background='yellow';"
onmouseout="this.style.background='';">ヨッシーの”ホームページを作ろう！”</SPAN>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■３■■
[概要]
文字にマウスが乗ると文字の形状が変化する。
[参照]
DHTML講座（フォント）
[ソース]
<HTML>
<HEAD>
<TITLE>ステータスバーに文字表示</TITLE>
</HEAD>
<BODY>
<!--変化させたい形状に変更。他に文字の大きさを変えたりもできる。-->
<SPAN onmouseover="this.style.fontStyle='italic';this.style.fontWeight='bold';"
onmouseout="this.style.fontStyle='normal';this.style.fontWeight='normal';">
ヨッシーの”ホームページを作ろう！”
</SPAN>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■４■■
[概要]
文字にマウスが乗ると文字列の説明が表示される。
[参照]
DHTML講座（表示/非表示）
[備考]
説明のスタイルは自由に設定しよう。説明や項目の数は好きなだけ増やせる。
[ソース]
<HTML>
<HEAD>
<TITLE>文字に触れると説明</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//文字の挿入
function inner(msg){
text.innerText
= msg;
}
//空白に戻す
function notInner(msg){
text.innerText
= "";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<TABLE width=50%>
<TR>
<TD>
<!--１つめのリンク。説明と項目を自由に変更。-->
<SPAN
onmouseover="inner('説明１')"
onmouseout="notInner()">
項目１
</SPAN><BR>
<!--２つめのリンク。説明と項目を自由に変更。-->
<SPAN
onmouseover="inner('説明２')"
onmouseout="notInner()">
項目２
</SPAN><BR>
<!--３つめのリンク。説明と項目を自由に変更。-->
<SPAN
onmouseover="inner('説明３')"
onmouseout="notInner()">
項目３
</SPAN><BR>
<!--４つめのリンク。説明と項目を自由に変更。-->
<SPAN
onmouseover="inner('説明４')"
onmouseout="notInner()">
項目４
</SPAN>
</TD>
</TR>
<TR>
<!--テーブルの色や形は自由に変更-->
<TD bgcolor="#ddddff"
align="center">
<BR>
<!--説明を表示する部分。タグを変えれば説明文のスタイルも変わる。-->
<FONT
color="green" id="text"> </FONT><BR>
<BR>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■５■■
[概要]
文字にマウスが乗ると文字列が震える
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>震える文字</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
posi_left = 5; //左からの位置
posi_top = 20; //上からの位置
width = 3;
//震える幅
flag = 0;
function quake(){
msg.style.left = posi_left;
//左からの位置
msg.style.top = posi_top; //上からの位置
if(flag){
posi_top += width;
flag = 0;
}
else{
posi_top -= width;;
flag = 1;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<!--初期位置は上にあわせて変更-->
<SPAN id="msg" style={position:absolute;left:5;top:20;} onmouseover='timerID=setInterval("quake()",50);'
onmouseout="clearInterval(timerID)"><big><B>ヨッシーの”ホームページを作ろう！”</B></big></SPAN>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。