リンクの色

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： ノノコ ： 2005/09/24 01:15
こんばんは、初めまして。ノノコといいます。
早速ですが質問させて頂きます。

現在、リンクでつまずいています。

例えば【ABC】という文字にリンクを張るとしますが
両脇のA・Cはオンマウスで文字が消え、中央のBはオンマウスしても
そのままの色で・・という感じにするためバックと同じ色にしたりと
オンマウス時の色をそれぞれ各文字、設定します。
しかし、コレだとAに触れるとCは残ってしまい（逆もですが）
Bに触れても両脇の文字が消えません。

つまり、A・B・Cの何処に触れても上の事が対応するようにしたいのです。

下手な説明で分かりにくいかもしれませんが
方法をご存知の方は教えて下さい。
1   名前： RippleGreen ： 2005/09/24 01:15
こんにちは、RippleGreenです。
下記のような方法はいかがでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>リンクのオンマウスで両端の文字の色を変える</title>
<script type="text/javascript"><!--
var defText = "";
var cutLen = 1;
var chColor = "#ffffff";
function chgColor(obj,sw) {
var Text = document.getElementById(obj).innerHTML;
var Len = Text.length;
var Output = "";
if (sw==1) {
defText = document.getElementById(obj).innerHTML;
Output = "<font color=\"" + chColor + "\">" + Text.substr(0,cutLen) + "</font>"
Output = Output + Text.substr(cutLen,Len-cutLen*2);
Output = Output + "<font color=\"" + chColor + "\">" + Text.substr(Len-cutLen,cutLen) + "</font>";
document.getElementById(obj).innerHTML = Output;
} else {
document.getElementById(obj).innerHTML = defText;
}
}
//--></script>
</head>
<body bgcolor="#ffffff">
<p>【<a href="#" id="Link1" onmouseover="chgColor('Link1',1)" onmouseout="chgColor('Link1',0)">ABC</a>】</p>
</body>
</html>

----------------------------------------------------------------------
・<a href="…"></a>の中には他のタグの記述をしないで下さい。（<a href="…">ABC</a>などのみ、<a href="…"><font color="…">ABC</font></a>等は考慮していません）
・var cutLen = 1; の「1」を消したい（隠したい）文字数にして下さい。（文字の両端からこの字数分色が変わります）
・var chColor = "#ffffff"; には変えたい色を指定して下さい。（背景が白（#ffffff）なら、「#ffffff」または「white」等）
・リンクのタグ（<a href="…"）の中に「id="名前"」と「onmouseover="chgColor('名前',1)"」、「onmouseout="chgColor('名前',0)"」を指定して下さい。
----------------------------------------------------------------------
動作確認
OS：WindowsXP professional sp2
Browser：IE 6.0 SP2、Netscape7.2、Firefox 1.0.4
サンプル：http://ripple.mints.ne.jp/LinkTextInvisible_20050922.html
2   名前： ノノコ ： 2005/09/24 01:15
返信遅れました。RippleGreenさん、こんにちは。
丁寧な解答、誠に有難うございました。

欲を申して悪いのですが、初心者ゆえ余り理解できなくて
また質問させていただきます。

教えて頂いた方法の場合
左右色が変化する文字数が一緒になりますよね？

それから

>><a href="…"></a>の中には他のタグの記述をしないで下さい

・・・とあったのですが、コレはつまり指定されたリンク文字が全部同じ色ではないと
できないということなのでしょうか？

上の２つが正しいのならば、左右の文字数を別々にする方法や
リンクの元々の色が消える部分と残る部分を別色にする方法もないのでしょうか？

方法を知っていたら是非教えていただきたいです。
3   名前： RippleGreen ： 2005/09/24 01:15
こんばんは、RippleGreenです。
ご質問の点については、仰る通りです。ですので、ノノコさんが仰る効果を実現させるならば、色別にリンクを分けて、それぞれに onmouseover と onmouseout で制御した方が簡単でしょうか。
以下のサンプルで如何でしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>sample</title>
<script type="text/javascript"><!--
var defColor1 = "";
var defColor2 = "";
var hideColor = "#ffffff";
function chColor(obj,sw) {
if (sw==1) {
defColor1 = document.getElementById(obj+"a").style.color;
defColor2 = document.getElementById(obj+"b").style.color;
document.getElementById(obj+"a").style.color = hideColor;
document.getElementById(obj+"b").style.color = hideColor;
} else {
document.getElementById(obj+"a").style.color = defColor1;
document.getElementById(obj+"b").style.color = defColor2;
}
}
//--></script>
<style type="text/css" media="screen"><!--
.css1 { color: #dc143c }
.css2 { color: #9370db }
--></style>
</head>
<body bgcolor="#ffffff">
【<a href="#" onmouseover="chColor('Link1',1)" onmouseout="chColor('Link1',0)" id="Link1a" class="css1">A</a><a href="#" onmouseover="chColor('Link1',1)" onmouseout="chColor('Link1',0)" id="Link1">BBB</a><a href="#" onmouseover="chColor('Link1',1)" onmouseout="chColor('Link1',0)" id="Link1b" class="css2">CC</a>】
</body>
</html>

----------------------------------------------------------------------
動作確認
OS：WindowsXP professional sp2
Browser：IE 6.0 SP2、Netscape7.2、Firefox 1.0.4
サンプル：http://ripple.mints.ne.jp/LinkTextInvisible_20050923.html
4   名前： ノノコ ： 2005/09/24 01:15
こんばんは、ノノコです。

何とか自分でやってみたところ
納得のいくリンクに仕上がりました！

RippleGreenさんには色々とお世話になりました。
本当に感謝の気持ちでいっぱいです。(解決したとき涙が出そうになりましたから<笑>)

兎に角、色々お手数をかけまして誠に有難うございます。
またお世話になるかもしれませんので<笑>その時はよろしくお願いします。

ノノコ
一覧へ戻る