画像にリンクをはって枠をつけたいのですが

解決済

質問者：samush
質問日時：2007/05/17 16:17
回答数：4件

css初心者です。
よろしくお願いします。

imageに枠をつけてリンクをはり、その枠が訪問前だったら赤、訪問済みだったら白というふうにcssで設定したいのですが、やり方がよくわかりませんでした。

すみませんが、ご存知の方、教えて頂けたら幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： include_ab
回答日時：2007/05/17 19:14

試してませんが、以下でどうでしょうか。

HTMLで

<div class="abc">
<a href="#"><img src="1.jpg" width="80" height="100" /></a>
<H2>…（以下略）
</div>

外部スタイルシートで

.abc a:link img {
border: 1px #f00 solid;
}

.abc a:visited img {
border: 1px #fff solid;
}

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
きちんと表示されましたっ。
それで、最初ご指摘の通りしたのですが、MACで見ると指定の色になるのですが、WINでは青のリンク枠で。
で、include_abさんの表記にプラスして
img {
border: 0px;
}
を最初の方に貼ったらちゃんと変わりました。
そういえば最初に
* {
margin: 0;
padding: 0;
}

img {
border: 0px;
}
をペチっと貼っとくことって、どなたかのサイトに書いてあったような。
教えて頂いてありがとうございました。また図々しいですが色々と教えてください。よろしくお願いします。

通報する

お礼日時：2007/05/18 18:20

No.4

回答者： MAN_MA_RUI
回答日時：2007/05/26 04:00

> この場合、なぜIE用のスタイルシートが必要なのでしょうか？IEのborderに関するバグがあるからなのでしょうか？

いや、アンカーにborderを指定しても内包するimgタグの大きさに合わせて高さの変化しないケースがあるのでそれを考慮しています。
borderにCSSの適用できる環境は無理にアンカーへborder指定するより素直にimgへのborder指定を使ったほうが無難かな、と言うことです。

- 0
- 件

通報する

この回答へのお礼

ご回答有難うございました。
高さが変化するケースがあるのですね。
もっと経験を積んで勉強していきたいと思います。
奥が深いです。。
アドバイス、有難うございました。

通報する

お礼日時：2007/05/29 15:58

No.3

回答者： MAN_MA_RUI
回答日時：2007/05/18 09:52

こ～んな感じでどうでしょ？自分で実験用に使ったソースをほとんどそのまま引っ張ったため質問者様の色指定とかは無視してますが^^;

＃HTMLの中身
<link rel="stylesheet" type="text/css" href="border_defo.css">

</style>
</head>
<body>
<p>
<a href="#" class="img_border"><img src="test.png" class="link_img" alt="てすと" title=""></a>
</p>

＃border_defo.cssの中身
a:link { color:blue; }
a:visited { color:blue; }
a:hover { color:red; }
a:active { color:red; }

.link_img {
border:2px solid;
}

＃border_ie.cssの中身
a.img_border:link { border:2px solid blue; }
a.img_border:visited { border:2px solid blue; }
a.img_border:hover { border:2px solid red; }
a.img_border:active { border:2px solid red; }

.link_img {
border:0px;
}

ちなみにWinのIEとFirefoxと見比べたときリンクのフォーカスを示す点線の表示位置が異なりますが、文句言わないでくださいね。
ほとんどごまかしとしか言いようのない手法なのでどうしようもないのです><

この回答への補足

ご回答ありがとうございました。
何度も何度も読み返させて頂きました。
imageにクラスを指定する方法とaにクラスを指定する方法があるのですね。とても高度だと思いました。
で、この
.link_img {
border:0px;
}
が大切だったみたいです。とても勉強になりました。
ありがとうございましたっ。
それでもし宜しければお聞きしたいのですが、この場合、なぜIE用のスタイルシートが必要なのでしょうか？IEのborderに関するバグがあるからなのでしょうか？
宜しくお願いします。

補足日時：2007/05/18 18:28

通報する

- 0
- 件

通報する

No.1

回答者： noname#31951
回答日時：2007/05/17 16:28

<STYLE TYPE="text/css">

</STYLE>

スタイルシート辞典を用意しておくと、何かと便利ですよ。

ご参考まで。

この回答への補足

素早いご回答ありがとうございます。
説明が足らずすみません。

HTMLで

<div class="abc">
<a href="#"><img src="1.jpg" width="80" height="100" border="1"></a>
<H2>…（以下略）
</div>

外部スタイルシートで

.abc a:link {
　color: red;
}

.abc a:visited {
　color: white;
}

のように設定しました。
それでmacのIEやsafari等で見ると大丈夫なのですが、WIN IE等で見ると適用されませんでした。
もしアドバイス頂けましたら、よろしくお願いします。