すべて私のＨＰのトップページのリンクを貼ってみます。
ボタンを作ってリンクを貼る方法もあります。
ボタンのページで紹介しています
表示されているタグをコピー＆ペーストして使用してくださいね♪
文字にリンクを貼る
リンクはこちらをクリック♪
<A HREF="http://．．．貼りたいページのＵＲＬ">リンクはこちらをクリック♪</A>
リンクのアンダーラインを消す
リンクはこちらをクリック♪
<A HREF="http://．．貼りたいページのＵＲＬ"STYLE-DECORATION:NONE;">りんくはこちらをクリック♪</A>
画像にリンクを貼る
アイコンをクリックしてね♪→
アイコンをクリックしてね♪→
<A HREF="http://．．．貼りたいページのＵＲＬ">
<img SRC="http://．．．画像のＵＲＬ"></A>
一部の画像のリンクの枠線を消す
アイコンをクリックしてね♪→
アイコンをクリックしてね♪→
<A HREF="http://．．．貼りたいページのＵＲＬ"><img src="http://．．．画像のＵＲＬ"BORDER="0"></A>
ページ全体の画像のリンクの枠線を消す
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE TYPE="text/css">
<!--
IMG{border-width:0;}
-->
</STYLE>
リンクを使ってメールを送信
メールはアイコンをクリックしてね♪→
メールはアイコンをクリックしてね♪→
<A HREF="mailto:メールアドレス">
<img src="http://．．．画像のＵＲＬ"></A>
メールの題名部分を入れる
メールはアイコンをクリックしてね♪→
メールはアイコンをクリックしてね♪→
<A HREF="mailto:メールアドレス?Subject=題名に入れたい言葉">
<img src="http://．．．画像のＵＲＬ"></A>
画像にふれるだけでリンクに飛ぶタグ
<A HREF="http://．．．リンク先のＵＲＬ"onmouseover="location.href'http://．．．’リンク先のＵＲＬ’"><img src="http://．．．画像のＵＲＬ"border=0></A>
別ウインドウでリンクを開く
アイコンをクリックしてね♪→
アイコンをクリックしてね♪→
<A HREF="http://．．．貼りたいページのＵＲＬ"target="blank"><img SRC="http://．．．画像のＵＲＬ"></A>
現ページをリンク先のページで置き換える
アイコンをクリックしてね♪→
アイコンをクリックしてね♪→
<A HREF="http://．．．貼りたいページのＵＲＬ"target="_top"><img SRC="http://．．．画像のＵＲＬ"></A>
同じページ内でリンク先へジャンプ
ここのページのトップでやっている方法です。
リンク元．．．<a href="#キーワード">リンク元となる文字・画像</a>
リンク先．．．<a name="#キーワード">リンク先となる文字・画像</a>
リンク先とリンク元のキーワードは同じ物にしてね♪
別のページの指定の場所へのジャンプ
「その他のタグ」のメール送信のタグへ♪
リンク元．．．<a href="http://．．．貼りたいページのＵＲＬ#キーワード">リンク元となる文字・画像</a>
リンク先．．．<a name="#キーワード">リンク先となる文字・画像</a>
リンク先とリンク元のキーワードは同じ物にしてね♪
リンクする文字にカーソルを当てると説明がでる
リンク先
↑カーソルを当ててみてね♪
<a href="http://．．．貼りたいページのＵＲＬ" title="説明文">リンクさせる文字や画像</a>
リンクの部分のバックの色を変える
♪トップページへジャンプ♪
<a href="http://．．．貼りたいページのＵＲＬ" style="background-color:色の名前">
<B>♪トップページへジャンプ♪</B></a>
カーソルが重なるとリンク部分の背景色が変わる
トップページへジャンプ〜〜〜♪
<a href="http://．．．貼りたいページのＵＲＬ" onMouseOver="this.style.backgroundColor='色の名前'"
onMouseOut="this.style.backgroundColor='色の名前'">リンクの文字</a>
カーソルが重なるとリンク部分の背景画像が変わる
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
a:hover {
background-color:#ffffff;
background-image:url(sss.gif);
}
-->
</style>
ページ内の文字のリンク部分の背景画像全てが変わります。
カーソルが重なるとリンクの部分の説明をポップアップ表示する
サンプルページ
<a href="http://．．．貼りたいページのＵＲＬ" onMouseOver="msg.innerHTML='ポップアップさせたい文字'"
onMouseOut="msg.innerHTML='カーソルをはずした後出る文字'">リンクの文字</a><span ID="msg" style="background-color:色の名前; font-size:文字の大きさ**pt"></span>
カーソルを重ねると画像が飛び出す
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
.a{
position:absolute;
visibility:hidden;
}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function OnM(Msg,eX,eY){
var sX = 0,sY = 0;
MyMsg = document.all(Msg).style;
MyMsg.visibility = "visible";
pX = document.body.scrollLeft;
pY = document.body.scrollTop;
MyMsg.left = eX + pX + sX;
MyMsg.top = eY + pY + sY;
}
function OffM(Msg){
document.all(Msg).style.visibility = "hidden";
}
//-->
</SCRIPT>
<BODY>〜</BODY>の間の表示させたい位置に以下のタグを入れてください
<SPAN id="A1" class="a">
<img border="0" src="C:\Documents and Settingsoops.HP\heko2.gif">
</SPAN>
<a href="http://．．．貼りたいページのＵＲＬ" onMouseOver="OnM('A1',event.x,event.y)"
onMouseOut="OffM('A1')">リンクされる文字</a>
ページすべてのリンクの下のアンダーラインを消す
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
A {text-decoration:none}
-->
</STYLE>
<BODY>〜</BODY>の間にリンクさせたい所に以下のタグを入れてください
<A href="http://．．．貼りたいページのＵＲＬ">リンクさせたい文字や画像</A>
リンクの文字にカーソルを当てると上下にラインが入り文字の色が変わる
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
A:HOVER{
color : 色の番号;
text-decoration : underline overline;
}
A{
text-decoration : none;
}
-->
</STYLE>
リンクの文字にカーソルを当てると取消線が入り文字の色が変わる
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
A{text-decoration:none;}
A:hover {
text-decoration:line-through;
color=#ff0000
}
-->
</style>
戻れなくなるリンク
このリンクをクリックすると戻れないよ♪トップページへ行きます♪
<a href="JavaScript:location.replace('http://．．．貼りたいページのＵＲＬ')">リンクさせたい文字や画像</a>
リンクをわかりにくくする
ここにカーソルをあわせてもリンクのように変わらないよ♪
<a onClick=window.open('http://．．．貼りたいページのＵＲＬ')>リンクさせたい文字や画像</a>
リンク先をステータスに表示する
トップページへ
<a href="http://．．．貼りたいページのＵＲＬ" onMouseOver="status='ステータスに表示させたい文字';return true" onMouseOut="status=' '">リンクさせたい文字や画像</a>
リンク先にマウスでふれると警告小窓が出る
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<script language="JavaScript">
<!--//
function popup(n)
{
alert("小窓に入れる文字");
}
//-->
</script>
<BODY>〜</BODY>の間の表示させたい位置に以下のタグを入れてください
<a href="#" onMouseOver="popup(1)">リンクさせる文字列</a>
リンクの文字にカーソルを当てるといろんな線でかこまれる
普通の線「solid」→サンプルページ
点線「dotted」→サンプルページ
破線「dashed」→サンプルページ
二重線「double」→サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
A{
text-decoration : none;
cursor : default;
}
A:HOVER{
text-decoration : none;
border-width : 線の太さpx 線の太さpx 線の太さpx 線の太さpx;
border-style : 線の種類 線の種類 線の種類 線の種類;
border-color :枠の色番号;
}
-->
</STYLE>
「線の太さ」はピクセルで入れてください。サンプルはだいたい「2px」です。
ピクセル・線の種類の指定は４辺しますのでそれぞれの間半角のスペースを入れてください。
ページを戻るリンク
戻るよ〜〜ん♪
<A HREF="JavaScript:history.go(−戻るページ数)">戻るよ〜〜ん♪</A>
ページを進むリンク
進むよ〜〜ん♪
<A HREF="JavaScript:history.go(進むページ数)">進むよ〜〜ん♪</A>
ページを更新するリンク
更新するよ〜〜ん♪
<A HREF="JavaScript:history.go(0)">更新するよ〜〜ん♪</A>
リンクで移動する前に確認する
トップページ
<A HREF="JavaScript:if(confirm('移動してもいい？')){location.href='http://．．．貼りたいページのＵＲＬ';}">トップページ</A>
マウスを乗せると文字や画像がずれる
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE type="text/css">
<!--
A:hover{position:relative;top:5px;left:5px;color:#FF0000;}
-->
</STYLE>
ページ内のリンクの部分が全てずれるようになります。
ｔｏｐ：＊ｐｘが上からずれる距離・ｌｅｆｔ：＊ｐｘが左へずれる距離
ｃｏｌｏｒ：で文字のリンクの時のオンマウスで変わるいろの指定
テーブルでボタン風のリンク
サンプルページ
<TABLE border="1">
<TR><TD>
<a href="http://www.eonet.ne.jp/~tomochan/" onMouseOver="this.style.backgroundColor='#ffc0cb'" onMouseOut="this.style.backgroundColor='#0cb0e0'">リンクの文字</a>
</TD></TR>
</TABLE>
プルダウンから選ぶと自動的に移動するタイプ
サンプルページ
<FORM NAME=" a">
<SELECT NAME="a2" onChange="if(document.a.a2.value){location.href=document.a.a2.value;}">
<OPTION SELECTED>- - - メニューの一番上の文字 - - -
<OPTION VALUE="http://．．．貼りたいページのＵＲＬ">リンク先の名前など
<OPTION VALUE="http://．．．貼りたいページのＵＲＬ">リンク先の名前など
<OPTION VALUE="http://．．．貼りたいページのＵＲＬ">リンク先の名前など
</SELECT>
</FORM>