|
★★★★★★★★★★ マウスが上にのった時アクション ★★★★★★★★★★ |
|
|
|
|
.-->をわけがあって、//-->に変更 |
|
|
|
★★★★★★★★★★ 文字 ★★★★★★★★★★ |
|
|
| ●文字色を変更 |
|
|
<!--●● マウスオーバー：文字色を変更 ●●--> |
|
|
<!--▼▼▼▼▼マウスがリンク上にのった時：文字色を変更▼▼▼▼▼--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
<style type="text/css"> |
|
|
<!-- |
|
|
a:hover { color:#ff0000; } |
|
|
//--> |
|
|
</style> |
|
|
<!--▲▲▲▲▲マウスがリンク上にのった時：文字色を変更▲▲▲▲▲--> |
|
|
| ●文字背景色を変更したまま |
|
|
<!--●● マウスオーバー：文字背景色を変更したまま ●●--> |
|
|
<a href="★"
onmouseover="this.style.backgroundColor='#ff8888'"onmouseout="this.style.backgroundcolor='white'">〜</a> |
|
| ●文字背景色を変更（ページ全体の） |
|
|
<!--●● マウスオーバー：ページ全体の文字背景色を変更 ●●--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
<!--▼▼▼▼▼マウスがリンク上にのった時：ページ全体の文字背景色を変更▼▼▼▼▼--> |
|
|
<style type="text/css"> |
|
|
<-- |
|
|
a:hover { background-color:#00ff00; } |
|
|
//--> |
|
|
</style> |
|
|
<!--▲▲▲▲▲マウスがリンク上にのった時：ページ全体の文字背景色を変更▲▲▲▲▲--> |
|
|
| ●文字背景色を変更 |
|
|
<!--●● マウスオーバー：文字背景色を変更 ●●--> |
|
|
<span
onmouseover="this.style.background='#55ff77';"
onmouseout="this.style.background='#ffffff';"> |
|
|
この上を通過すると、背景色が白から緑に変わります。 |
|
|
</span> |
|
|
| ●フォントサイズを変更 |
|
|
<!--●● マウスオーバー：フォントサイズを変更 ●●--> |
|
|
<div
style="font-size:16px" |
|
|
onmouseover="this.style.fontSize='20px'" |
|
|
onmouseout="this.style.fontSize='16px'"> |
|
|
ここを通過すると、文字サイズが変化するよ。 |
|
|
</div > |
|
|
| ●テーブル・セルの背景色を変更 |
|
|
<!--●● マウスオーバー：テーブル・セルの背景色を変更 ●●--> |
|
|
<table border="1"> |
|
|
<td
bgcolor="#ffffff" |
|
|
onmouseover="this.style.backgroundColor='#ff0000'" |
|
|
onmouseout="this.style.backgroundColor='#ffffff'"> |
|
|
マウスを乗せると赤くなるよ！！ |
|
|
</td></table> |
|
|
| ●文字をチョット移動させる |
|
|
<!--●● マウスオーバー：文字をチョット移動させる ●●--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
a:hover {position:relative; top:2;left:2;} |
|
|
| ●文字を移動&色を変更 |
|
|
<!--●● マウスオーバー：文字を移動&色を変更 ●●--> |
|
|
<style type="text/css"> |
|
|
<!-- |
|
|
A:hover{position:relative;top:3px;left:3px;color:#ff0000;} |
|
|
//--> |
|
|
</style> |
|
|
| ●文字を斜体に変更 |
|
|
<!--●● マウスオーバー：文字を斜体に変更 ●●--> |
|
|
<div onmouseover="this.style.fontStyle='italic'"
onmouseout="this.style.fontStyle='normal'"> |
|
|
ここを通過すると、文字が斜体に変化します。 |
|
|
</div> |
|
|
| ●文字フォントの種類を変更 |
|
|
<!--●● マウスオーバー：文字フォントの種類を変更 ●●--> |
|
|
<span
style="font-family:'sans-serif'" |
|
|
onmouseover="this.style.fontFamily='fantasy'" |
|
|
onmouseout="this.style.fontFamily='sans-serif'"> |
|
|
ここを通過すると、フォントが変わります |
|
|
</span> |
|
|
|
★★★★★★★★★★ 画像 ★★★★★★★★★★ |
|
|
| ●画像を変更 |
|
|
<!--●● マウスオーバー：画像を変更 ●●--> |
|
|
<a href="アドレス"><img src="元の画像"
border="0" |
|
|
onmouseover="this .src='ポイント時の画像'" |
|
|
onmouseout="this .src='元の画像'"></a> |
|
|
| ●画像が変化 |
|
|
<!-- カーソルが重なると画像が変化 --> |
|
|
<span
onmouseout="changeimg.src='離れ後画像'"
onmouseover="changeimg.src='重なり時画像'"> |
|
|
<img src="変更前画像" width="100"
height="100" border="0" name="changeimg"> |
|
|
</span> |
|
|
| ●画像のサイズを変更する |
|
|
<a href="***.html" |
|
|
onMouseover="document.img.width=50;document.img.height=15;" |
|
|
onMouseout="document.img.width=30;document.img.height=15;"> |
|
|
<img src=***.jpg width="30"
height="15"></a> |
|
|
|
★★★リンク★★★ マウスがリンク上にのった時アクション ★★★リンク★★★ |
|
|
| ●警告文を表示(リンクは出来ない） |
|
|
<!--●● マウスオーバー：警告文を表示(リンクは出来ない） ●●--> |
|
|
<!--▼▼メイン▼▼マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▼▼メイン▼▼--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
<script language="javascript"> |
|
|
<!--// |
|
|
function popup(n) |
|
|
{ |
|
|
alert("リンクは押させないョ"); |
|
|
} |
|
|
//--> |
|
|
</script> |
|
|
<!--▲▲メイン▲▲マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▲▲メイン▲▲--> |
|
|
|
<!--●● マウスオーバー：警告文を表示(リンクは出来ない） ●●--> |
|
|
<!--▼▼サブ▼▼マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▼▼サブ▼▼--> |
|
|
<!-- 記入する場所は、<body>〜</body>の間 --> |
|
|
<a href="#"
onmouseover="popup(1)">リンク</a> |
|
|
<!--▲▲サブ▲▲マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▲▲サブ▲▲--> |
|
|
| ●リンクを色線で囲む |
|
|
<!--●● マウスオーバー：リンクを色線で囲む ●●--> |
|
|
<!--▼▼▼▼▼▼▼▼ マウスがリンク上にのった時：リンクを色線で囲む ▼▼▼▼▼▼▼▼--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
<style type="text/css"> |
|
|
<!-- |
|
|
a {text-decoration:none} |
|
|
a:hover{border:solid 1px;border-color:#ff0000;} |
|
|
--> |
|
|
</style> |
|
|
<!--▲▲▲▲▲▲▲▲ マウスがリンク上にのった時：リンクを色線で囲む ▲▲▲▲▲▲▲▲--> |
|
|
| ●マウスがリンク上にのった時：背景に画像を表示 |
|
|
<!--●● マウスオーバー：背景に画像を表示 ●●--> |
|
|
<!-- 記入する場所は、<head>〜</head>の間 --> |
|
|
a:hover {
background-image:url(背景URL);} |
|
|
| ●ヘルプ文章を表示 |
|
|
<!--●● マウスオーバー：ヘルプ文章を表示 ●●--> |
|
|
<a href="★"
title="ヘルプ文章">〜〜</a> |
|
|
|
|
<!--
ヘルプ文章に を加えると改行させることができます --> |
|
|
|
| ●文章をポップアップ表示 |
|
|
<!--●● マウスオーバー：文章をポップアップ表示 ●●--> |
|
|
<a href="★"
onmouseover="msg.innerHTML='ポップアップ文章'"onｍouseout="msg.innerHTML=''"> |
|
|
〜</a><span
id="msg"> |
|
|
|
|
|
|