リンクの表示について
-
0 名前： 常磐 ： 2006/02/03 02:02
- サイト名の上にマウスを乗せると、
バナーに変わるようにしたいのですが、可能でしょうか？
自分で調べられる範囲で調べたのですが、未だ分からずにおります。
どうか、よろしくお願い致します。
-
1 名前： カヅサツ ： 2006/02/03 02:02 ［URL］
- > サイト名の上にマウスを乗せると、バナーに変わるようにしたいのですが、可能でしょうか？
あるテキストをポイントすると、画像に変わる（たぶん、加えて元テキストがalt属性値になる、が適切でしょうか）、ということでしたら、DOM と JavaScript で可能です（もちろん、JavaScriptをオフにしていたり、非(未)対応ブラウザを使っていれば何も起きませんが）。
-
2 名前： のぶ ： 2006/02/03 02:02
- スタイルシートを使っても、できるのではないでしょうか。
カーソルが該当するテキストに重なったとき（a:hover)、background-imgに
表示させたい、バナーの画像ファイルを指定すれば、良いのではないかと思うのですが。
スタイルシート ロールオーバーって、検索すると情報がでてくるのではないでしょうか。
JavaScriptでも、できるのでしょうが、僕にはわかりません。
-
3 名前： S ： 2006/02/03 02:02
- >>JavaScriptでも、できるのでしょうが
いわゆる「ロールオーバー」ってやつなら、このサイトにある。
http://www.tagindex.com/javascript/link/index.html
ただし、スクリプトが使えない（使わない）環境にも配慮が必要。
http://nekoshiki.poke1.jp/guidline/link.html
http://nekoshiki.poke1.jp/guidline/script.html
http://bakera.jp/html/opinion/zannen1.html
http://bakera.jp/html/opinion/zannen2.html
-
4 名前： カヅサツ ： 2006/02/03 02:02
- > カーソルが該当するテキストに重なったとき（a:hover)、background-imgに
> 表示させたい、バナーの画像ファイルを指定すれば、良いのではないかと思うのですが。
テキストはどうやって消しましょう？
-
5 名前： 常磐 ： 2006/02/03 02:02
- 皆様、回答ありがとうございます。
ロールオーバーの場合、
<A href="URL" onmouseover="this.src='画像アドレス'" onmouseout="">サイト名</A>
のような感じでよろしいのでしょうか？
間違っていたら、ご指摘下さると幸いです。
-
6 名前： Pid ： 2006/02/03 02:02
- スクリプトを使う場合，バナーの URI をどこに格納しておくかが悩み所でしょうか。たとえば，独自の名前空間の属性を作って
<a href="sample.html" ro:banner="banner.png" onmouseover="ro (this);">サイト名</a>
function ro (anc) {
var node = document.createElement ('img');
node.src = anc.getAttribute ('ro:banner');
node.alt = anc.firstChild.data;
node.title = anc.title;
node.onmouseout = function () { this.parentNode.replaceChild (anc, this); }
return anc.parentNode.replaceChild (node, anc);
}
とか（なお，上記はあくまで考え方を示すもので，実際の使用には画像の先読み・要素の再利用・イベント切り離しなど，もう三工夫くらいは必要でしょう）。
スタイルシートを使う場合，a 要素の中にもう一つ要素をかませる必要があるでしょうか。
<a href="sample.html"><span>サイト名</span></a>
a:hover {
display: block;
width: 32px;
height: 32px;
background: url("banner.png");
text-decoration: none;
}
a:hover span {
visibility: hidden;
}
ロールオーバーのためだけに要素を増やすのは避けたいところですが，もっと良い方法はあるでしょうか。
