|
★★★★★リンク★★★★★リンク★★★★★リンク★★★★★リンク★★★★★リンク★★★★★ |
|
|
|
| ●リンク文字色の指定 |
|
|
<body link="★" alink="☆" vlink="●"> |
|
|
★=未リンク状態の文字色（カラーコードまたはカラーネーム） |
|
|
☆=リンク中状態の文字色（カラーコードまたはカラーネーム） |
|
|
●=リンク済みの文字色（カラーコードまたはカラーネーム） |
|
|
■リンク文字色の指定■ |
|
|
| ●リンク文字色の指定 |
|
|
<style Type="text/css"> |
|
|
<!-- |
|
|
a:link { text-decoration:none; color:#000080; } |
|
|
a:visited { text-decoration:none; color:#000080; } |
|
|
a:active { text-decoration:underline; color:#000080; } |
|
|
a:hover { text-decoration:underline; color:#1e78ff; } |
|
|
//--> |
|
|
</style> |
|
|
|
a:link … リンク前 |
|
|
a:visited … リンク後 |
|
|
a:active … 押した時 |
|
|
a:hover … ポイント時 |
|
|
background-color:#00ff00; を追加すると背景色も変えられる |
|
|
| ●リンクを張る |
|
|
<a href="リンクするファイル名またはＵＲＬ">リンクの説明文</a> |
|
| ●オンマウスで説明文表示 |
|
|
<a href="リンクするファイル名またはＵＲＬ"
title="説明文">リンクの説明文</a> |
|
| ●新しいウィンドウを開く |
|
|
<a href="リンクするファイル名またはＵＲＬ"
target="_blank">リンクの説明文</a> |
|
| ●新しいウィンドウを開いてサイズの指定 |
|
|
<a
href="javascript:w=window.open('アドレス','','scrollbars=yes,Width=250,Height=100');w.focus();">リンク名</A> |
|
| ●新しいウィンドウを開いてサイズの指定
スクロールバー無し |
|
|
<a
href="javascript:w=window.open('アドレス','','scrollbars=no,Width=250,Height=100');w.focus();">リンク名</A> |
|
| ●新しいウィンドウを開いてサイズの指定 ボタンタイプ |
|
|
<form><input
name="openWin" type="button" value="ボタン"
onclick="window.open('アドレス','','scrollbars=yes,width=250,height=100,');"></Form> |
|
|
|
|
|
| ●新しいウィンドウを開いてサイズの指定 ボタンタイプ
スクロールバー無し |
|
|
<form><input
name="openWin" type="button" value="ボタン"
onclick="window.open('アドレス','','scrollbars=no,width=250,height=100,');"></Form> |
|
| ●前のページに戻れなくする |
|
|
<a
href="javascript:location.replace('リンクするファイル名またはＵＲＬ');">リンクの説明文</A> |
|
|
| ●背景付文章にリンクを張る |
|
|
<a href="リンクするファイル名またはＵＲＬ"> |
|
|
<span
style="background:#0000ff">リンクの説明文</span></a> |
|
|
| ●画像にリンクを張る |
|
|
<a href="リンクする場所 例 http//yahoo.co.jp"
target="_blank"> |
|
|
<img src="画像ファイル名" border="0"width="800"
height="600"> |
|
|
</a> |
|
|
| ●外枠の線を非表示 |
|
|
<a
href="★"><img src="☆"
border="0"></a> |
|
|
| ●画像内の任意の場所にリンクを設ける |
|
|
<img
src="画像ファイル名" usemap="#任意名"> |
|
|
<map
name="任意名"> |
|
|
<area
shape="①" coords="②" href="リンク先ＵＲＬ"
alt="リンク先説明文"> |
|
|
|
①=リンク形状の指定 rect(四角形) circle(正円) |
|
|
②=座標値 |
|
|
①の形状がrect(四角形)の場合、X1,Y1,(左上の座標)X2,Y2(右下の座標) |
|
|
のようにカンマで区切って４つの座標を指定 |
|
|
circle(正円)の場合、中心X,中心Y,半径のようにカンマで区切って３つの座標を指定 |
|
|
| ●リンクにマウスが乗ると音楽が流れる |
|
|
|
<!--●●記入する場所は、<body>～</body>の間●●--> |
|
|
<!--▼▼▼▼▼▼▼▼▼▼リンクにマウスが乗ると音楽が流れる▼▼▼▼▼▼▼▼▼▼--> |
|
|
<bgsound id="onmausesound1"> |
|
|
<a href="http://www15.plala.or.jp/gundog/"
onmouseover="onmausesound1. |
|
|
src='http://www15.plala.or.jp/gundog/homepage/top/bgm/0.mid'"> |
|
|
リリーちゃんの部屋 |
|
|
</a> |
|
|
<!--▲▲▲▲▲▲▲▲▲▲リンクにマウスが乗ると音楽が流れる▲▲▲▲▲▲▲▲▲▲--> |
|
|
| ●文字背景色を変更したまま |
|
|
<!--●● マウスオーバー：文字背景色を変更したまま ●●--> |
|
|
<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> |
|
|
<!--▲▲▲▲▲マウスがリンク上にのった時：ページ全体の文字背景色を変更▲▲▲▲▲--> |
|
|
| ●リンクの下線を表示させない |
|
|
<!--●●記入する場所は、<body>～</body>の間●●--> |
|
|
<a href="xxx.html" style="text-decoration:
none;">リンクの説明文</A> |
|
|
| ●ページ全体のリンクの下線を表示させない1 |
|
|
<!--●●記入する場所は、<head>～</head>の間●●--> |
|
|
<!--▼▼▼▼▼▼▼▼▼▼ページ全体のリンクの下線を表示させない▼▼▼▼▼▼▼▼▼▼--> |
|
|
<style type="text/css"> |
|
|
<!-- |
|
|
a{text-decoration:none} |
|
|
--> |
|
|
</style> |
|
|
<!--▲▲▲▲▲▲▲▲▲▲ページ全体のリンクの下線を表示させない▲▲▲▲▲▲▲▲▲▲--> |
|
|
| ●ページ全体のリンクの下線を表示させない2 |
|
|
<!--●●記入する場所は、<head>～</head>の間●●--> |
|
|
<!--▼▼▼▼▼▼▼▼▼▼ページ全体のリンクの下線を表示させない▼▼▼▼▼▼▼▼▼▼--> |
|
|
<style type="text/css"> |
|
|
<!-- |
|
|
a:link{text-decoration:none;} |
|
|
a:active{text-decoration:none;} |
|
|
a:visited{text-decoration:none;} |
|
|
a:hover{text-decoration:none;} |
|
|
--> |
|
|
</style> |
|
|
<!--▲▲▲▲▲▲▲▲▲▲ページ全体のリンクの下線を表示させない▲▲▲▲▲▲▲▲▲▲--> |
|
|
| ●1つ前のページに戻る |
|
|
<a href="javascript:history.go(-1)">1つ前に戻る</a> |
|
| ●1つ前のページに進む |
|
|
<a href="javascript:history.go(1)">1つ前に進む</a> |
|
| ●閉じる |
|
|
<a href="javascript:window.close();">閉じる</a> |
|
| ●お気に入りに登録 |
|
|
<a
href="javascript:window.external.AddFavorite('http://www15.plala.or.jp/gundog/','リリーちゃんの部屋')">お気に入りに追加</a> |
|
| ●スタートページに登録 |
|
|
<a href="#"
onclick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage('http://www15.plala.or.jp/gundog/');">リリーちゃんの部屋をスタートページに変更</A> |
|
| ●更新（リロード） |
|
|
<a href="javascript:history.go(0)">更新する</A> |
|
|
| ●ボタンでリンク |
|
|
<form action="xxx.html"> |
|
|
<input type=submit value="リンクの説明文"> |
|
|
</form> |
|
| ●ボタンで1つ前のページに戻る |
|
|
<form><Input type=button value="１つ前へ戻る"
onclick="javascript:history.go(-1)"></form> |
|
| ●ボタンで1つ前のページに進む |
|
|
<form><Input type=button value="１つ前へ進む"
onclick="javascript:history.go(1)"></form> |
|
| ●ボタンで閉じる |
|
|
<form><Input type="button" value="閉じる"
onclick="javascript:window.close();"></form> |
|
| ●ボタンでお気に入りに登録 |
|
|
<form><Input
type="button" value="お気に入りに追加"
onclick="javascript:window.external.AddFavorite('http://www15.plala.or.jp/gundog/','リリーちゃんの部屋')"></form> |
|
| ●ボタンでスタートページに登録 |
|
|
<form><Input
type="button" value="リリーちゃんの部屋をスタートページに変更"
onclick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage('http://www15.plala.or.jp/gundog/');"></form> |
| ●ボタンで更新 |
|
|
<form><Input type="button" value="更新する"
onClick="javascript:history.go(0)"></form> |
|
|
| ●リンク先をフルサイズ画面で表示 |
|
|
<!--▼▼▼▼メイン▼▼▼▼リンク先をフルサイズ画面で表示▼▼▼▼メイン▼▼▼▼--> |
|
|
<!-- 記入する場所は、<head>～</head>の間 --> |
|
|
<script language="javascript"> |
|
|
<!-- // ライブ映像をフルサイズで表示 |
|
|
function full() |
|
|
{ |
|
|
Windowopen = window.
open('http://www15.plala.or.jp/gundog/homepage/live/live.html','_blank','fullscreen=1'
) ; |
|
|
} |
|
|
// --> |
|
|
</SCRIPT> |
|
|
<!--▲▲▲▲メイン▲▲▲▲リンク先をフルサイズ画面で表示▲▲▲▲メイン▲▲▲▲--> |
|
|
|
<!--▼▼▼▼サブ▼▼▼▼リンク先をフルサイズ画面で表示▼▼▼▼サブ▼▼▼▼--> |
|
|
<a href="javascript:full();">リンク先名</a> |
|
|
<!-- |
|
|
<a href="live/live.html" target="blank">ライブ映像 |
|
|
</a> |
|
|
// --> |
|
|
<!--▲▲▲▲サブ▲▲▲▲リンク先をフルサイズ画面で表示▲▲▲▲サブ▲▲▲▲--> |
|
|
| ●ページ切り替え時にアラートウインドウを出す |
|
|
<!-- 記入する場所は、<body>～</body>の間 --> |
|
|
<!--▼▼▼▼▼▼▼▼▼▼ページ切り替え時にアラートウインドウを出す▼▼▼▼▼▼▼▼▼▼--> |
|
|
<body bgcolor="#008b8b"
onUnload="alert('さようなら、また来てね')"> |
|
|
<!--▲▲▲▲▲▲▲▲▲▲ページ切り替え時にアラートウインドウを出す▲▲▲▲▲▲▲▲▲▲--> |
|
|
|
<!-- 記入する場所は、<body>～</body>の間 --> |
|
|
<!--▼▼▼▼▼▼▼▼▼▼ページ読み込み時にアラートウインドウを出す▼▼▼▼▼▼▼▼▼▼--> |
|
|
<body bgcolor="#008b8b"
onUnload="alert('さようなら、また来てね')"> |
|
|
<!--▲▲▲▲▲▲▲▲▲▲ページ読み込み時にアラートウインドウを出す▲▲▲▲▲▲▲▲▲▲--> |
|
|
| ●メールのリンクを張る |
|
|
メールは<a
href="mailto:ribbon@cocoa.plala.or.jp">こちら</a>まで |
|
| ●メールのリンクを張り件名も記入する |
|
|
メールは<a
href="mailto:ribbon@cocoa.plala.or.jp?subject=件名">こちら</a>まで |
|
| ●メールのリンクを張り件名・本文も記入する |
|
|
メールは<a href="mailto:ribbon@cocoa.plala.or.jp?subject=件名&body=本文">こちら</a>まで |
|
| ●メールのリンクを画像に張る |
|
|
メールは<a href="mailto:ribbon@cocoa.plala.or.jp"></a> |
|
|
<img src="***.jpg"width="47"
height="16"></a> まで |
|
|
| ●一定時間後に自動的にページ移動 |
|
|
<!-- 記入する場所は、<head>～</head>の間 --> |
|
|
<meta http-equiv="refresh"
content="5;url=移動したいページのアドレス"> |
|
|
| ●戻るボタンやリンクボタン風を表示させる |
|
|
<center><tr height="74"><td
width="252" height="74"></td> |
|
|
<td width="348" height="74" valign="top"
align="left" xpos="252"> |
|
|
<table width="95" border="1"
cellspacing="2" cellpadding="0"
bgcolor="#ffff99"> |
|
|
<tr><td><div align="center"><b> |
|
|
<a href="http://www15.plala.or.jp/gundog/">進む</a> |
|
|
</b></div></td></tr></table></td> |
|
|
<td width="1" height="74"><spacer
type="block" width="1"
height="74"></td> |
|
|
</tr><tr height="1" cntrlrow> |
|
|
<td width="252" height="1"><spacer
type="block" width="252"
height="1"></td> |
|
|
<td width="348" height="1"><spacer
type="block" width="348"
height="1"></td> |
|
|
<td width="1"
height="1"></td></tr></table><p></p></center> |
|
|
| ●リンクにボタンを使う |
|
|
<input type="button"
style=background-color:#ボタン色;font-weight:☆;color:#文章色;
value="ボタン文章" onclick="location.href='リンクアドレス'"> |
|
| ●ボタン背景色をonMouseoverで変化させる |
|
|
<input type="button"
style="background-color: #00CCCC;"
onmouseover="this.style.backgroundColor='#FF3300'"
onmouseout="this.style.backgroundColor='#00CCCC'"
value="背景色が変化します"> |
|
|
| ●同じページ内でリンクする |
|
|
<a
href="#★">☆</a> |
|
|
<a
name="★">■</a> |
|
|
|
★=任意のキーワード（アンカー名） |
|
|
☆=リンクを設定する要素（文字やイメージ） |
|
|
■=アンカーを設定する要素（文字やイメージ） |
|
|
| ●ちがうページ内でリンクする |
|
|
<a
href="★#☆">～～</a> |
|
|
★=ジャンプ先のＵＲＬまたはファイル名 |
|
|
☆=アンカー名 |
|
|
|
<a
href="tag.html#tag">タグを使おう</a> |
|
|
<a
href="java.html#java">ジャバスクリプトを使おう</a> |
|
|
<a
href="tukurou.html#home">ホームページを作ろう</a> |
|
|
ジャンプしたいページの指定箇所に |
|
|
<a
name="tag">タグ使用例</a> |
|
|
<a
name="java">ＪＡＶＡ使用例</a> |
|
|
<a
name="home">ホームページ作成</a> |
|
|
| ●ページ移動時トランジション効果をつける |
|
|
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=★,Transition=☆)"> |
|
|
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=★,Transition=☆)"> |
|
|
★=切り替え時間(秒) |
|
|
☆=トランジション効果の指定（番号で指定） |
|
|
0
Box In 1 Box Out 2 Circle In 3 Circle Out 4 Wipe Up 5 Wipe Down 6 Wipe Right
7 Wipe Left |
|
|
8
Vertical Blinds 9 Horizotal Blinds 10 Checkerboard Across 11 Checkerboard
Down |
|
|
12
Random Dissolve 13 Split Vertical In 14 Split Vertical Out 15 Split Horizotal
In |
|
|
16
Split Horizotal Out 17 Strips Left Down 18 Strips Left Up 19 Strips Right
Down |
|
|
20
Strips Right Up 21 Random Bars Horizotal 22 Random Bars Vertical 23
Random |
|
|
|
|
|
|