検索サーチエンジンと動画リンク集byねっとねこ

画像<IMG>をボタンに変えてリンクするタグの紹介

IE用のタグ<button>を使って、IMG画像をボタン表示にしてリンクするといい感じ♪

ここで使用するタグは、WINDOWSの IE でサポートされている
タグ<button>を使います。IE 以外のブラウザでは、サポート
されていないと思うので、ボタン表示にならないと思います。
WINDOWS の IE専用と認識してお使いくださいませ♪

img画像をボタンに変えるタグの使い方

ホームページ用の素材屋さんには、アイコンやボタンと呼ばれる
素材を提供し、配布しているところが多くあります。

ここでは、 おしらせ  ← こちらの画像を使ってみます。

ボタンにすると    こんな感じです。クリックして見てね。

このタグは、簡単です。下を参考にしてください♪
エリア内で 右クリック→ コピー

説明の必要は、ありませんね。 img を<button>〜</button>で
囲めばいいだけです。 これは、IE でサポートされているタグです。
ボタンにしたのだから、リンクをつけるとこうなります。

  クリックしてみて♪ このページにリンクしてます。


リンクをした時のタグは、この下です。
エリア内で 右クリック→ コピー

<button タグ内に
onClick="window.location.href='gazoubutt.html'" を加えます。
これは、相対リンクで同一ページで開きます。
gazoubutt.html ←は、このページなので、変更して下さい。

新しいページで、リンク先を開く場合は、
onClick="window.open('http://netneko.jp/homepage/gazoubutt.html')"
とします。 下に違う画像をボタンにしてリンクしてます。

 クリックすると、新しいページで開きます。

他サイトへのリンクなどには、こちらを使うといいでしょう。

また、サイトのメニューリンクとしても使えるかもね。
縦に並べて、表示させると、ちょっとしたボタンリンクになります。




いろいろと画像を変えたりして、いろんなボタンを作ってみよう♪

<button タグ内の  style="cursor:pointer;" は、
ボタンにマウスポイント乗せたときに、手のポインターを表示させる
スタイルシートです。 ボタンリンクには、つけておくといいかも。

冒頭でも書いてますが、<button> は、IE 専用なので、
他のブラウザでは、ボタン表示されず、画像のみの表示です。
リンクも対応していないので、それらを考えると使いづらいです。

IE以外のブラウザ用として、通常のリンクタグで囲むのもいいです。

<a href="gazoubutt.html">
<button onClick="window.location.href='gazoubutt.html'" style="cursor:pointer;">
<img src="osirase.gif" border="0" alt="おしらせ"> </button>
</a>

このように、通常のリンクタグで囲むと、IE以外のブラウザでも
大丈夫です。 他のブラウザでは、通常の画像リンクになります。

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング