子宝どっとこむ

 

 リンクタグ

  • Jun202005
  • Author: Vulcan
  • Categories: 心構え

ブログを使うことでタグを知らなくてもホームページを作ることができるようになりましたが、リンクタグだけは理解しましょう。

<a href="http://px.a8.net/svt/ejp?a8mat=U4U95+D4Q73M+348+65MEA" title="おすすめのレンタルサーバーです。" target="_blank" onMouseOut="MyMsgBox.innerHTML='';disp(''); return true" onMouseOver="MyMsgBox.innerHTML='おすすめのレンタルサーバーです。';disp('http://lolipop.jpへ'); return true"><img border="0" width="100" height="60" alt="ロリポップ!" src="http://www25.a8.net/svt/bgt?aid=050614313794&wid=001&eno=01&mid=s00000000404001010000&mc=1">←Click!</a>

わざと長くしてみました。説明の前にこれを実行すると下記のようになります。

ロリポップ!←Click!

それでは説明します。

リンクタグは最小限

<a href="URL">表記したい文</a>

だけでいいです。先の例ですとURLは『http://px.a8.net/svt/ejp?a8mat=U4U95+D4Q73M+348+65MEA』、表記したい文は『←Click!』です。つまり、その他に記載しているものはあってもなくてもどちらでもいいものです。

しかしこのままだと、現在見ているページに置き換えてリンク先に飛んでしまいます(訪問者がShiftを押しながらリンクをクリックしてくれれば別ですが)。ここに戻ってきて欲しいのであれば、リンク先の表示は新たなウィンドウで行ないたいものです。これを指定しているのが『target="_blank"』の部分です。

また、クリック先の情報を予め提供してあげた方が親切です。予備知識があればクリックしてみる価値があるかどうかが分かりやすいです。そのため、ツールチップで説明をしてあげるために『title="おすすめのレンタルサーバーです。"』を入れています。

次に、ちょっとマニアックなのが『onMouseOut』と『onMouseOver』の属性を指定していることです。これは何をやっているのかというと、ひとつは『MyMsgBox』として指定した場所に文字を表示させています。

ロリポップ!←Click!

↑<div ID="MyMsgBox"></div>
このように『MyMsgBox』として指定した場所があれば、リンクにカーソルがあえば' 'でくくった文字を表示し、カーソルが外れれば表示した文字を消します(' 'でくくった範囲に何も入れていないので)。また、同時に『disp('http://lolipop.jpへ'); return true』という指定を行なっていますが、これはJavaScriptの
<script type="text/javascript"> <!-- function disp(msg){ window.status = msg; } // --> </script>
がソースに埋め込まれていることが前提となっています。disp関数に文字列を引数として送り、disp関数側は受け取った引数をステータスバーに表示させます(この場合は『http://lolipop.jpへ』が表示)。

最後に、イメージタグですが、画像を表示する場合に使います。srcで画像へのパスを指定します(ここではmc=1までがソースです)。altは画像の説明です。borderは枠の太さ(ここでは0なので無し)、widthとheightは幅と高さの指定です。

なお、titleやtarget等の属性の順番は任意でいいはずです。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

コメント用フィード