自作ホームページ内のリンクで「戻る」ボタンで戻ってきた後、リンクの周りに表示される点線の枠を非表示にする方法

解決済

質問者：kato-haru
質問日時：2009/06/03 15:58
回答数：4件

分かりにくくて申し訳ありません.

現在ホームページを作成しております．
背景を透明にした画像を（ページA）でリンクのボタンとして使ったところ、移動先の（ページB）から「戻る」ボタンで（ページA）に戻ってくると、透明部分を取り囲むように点線の枠が表示されてしまい、非常に見た目が悪いです．

「戻」ってきたときに、この点線の枠を表示させない方法はありますでしょうか．

自分としては、（ページA）に飛ぶたびに、新しく読み込み直すようなjavascriptでもあればいいなと思って探しましたが、引っ掛けることができませんでした．

すみませんが、宜しくお願いします．

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： salonpath
回答日時：2009/06/04 13:04

確認に使ったソースです。

■goo1.html　という名前で保存してください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンク1</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
</head>
<body>
<h1>ページ1</h1>
<p class="norborder"><a href="goo2.html"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"></a></p>
<p><a href="goo2.html"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"></a></p>
</body>
</html>

■以下goo2.html という名前で保存してください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンク2</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
</head>
<body>
<h1>ページ2</h1>
<p class="norborder"><a href="goo1.html"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"></a></p>
<p><a href="goo1.html"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"></a></p>
</body>
</html>

上のリンクはラインが消えてて、下のリンクはラインがでてませんか？

この回答への補足

お手数おかけして済みません。
確認はIE7で行っています。

教えて頂いたものをコピーペーストして確かめてみましたが、上と下どちらのリンクも、リンク先に飛んでから「戻る」ボタンで戻ってくると、点線の枠が表示されてしまいます。

何か間違った操作をしているんですかね…。コピペしかしていないつもりなのですが…。

補足日時：2009/06/04 19:55

通報する

- 0
- 件

通報する

この回答へのお礼

申し訳ありません。
そもそも自分で問題点をきちんと理解できていなかったようです。説明もあまりよくありませんでした、すいません。

問題の本質がやっと分かりましたので、質問を変えることにしました。
なので、この質問は締めさせて頂きます。

ありがとうございました。

通報する

お礼日時：2009/06/05 13:56

No.3

回答者： salonpath
回答日時：2009/06/04 12:50

おかしいなぁ

IE7,8,firefoxで確認してますが出来ますよ、記述間違えてませんか？
スクリーンショットがIE7～ぽいですけど、実際は何で確認してますか？

>現在ホームページを作成しております
と書いてあるのでAとBのページは自分で作ったhtmlですよね？

- 0
- 件

通報する

No.2

回答者： salonpath
回答日時：2009/06/03 20:28

cssは使ってないのかな？

とりあえずhtmlの<head>と</head>の間に下のソースをコピペしてみてください

<style type="text/css">

</style>

この回答への補足

ありがとうございます。

コピペをしてみましたが、やはり周囲の点線が表示されてしまいました。

ネットでいろいろなページを見てみましたが、表示されないページは見つかりませんでした…、無理ということでしょうか;_;

補足日時：2009/06/04 12:32

通報する

- 0
- 件

通報する

No.1

回答者： salonpath
回答日時：2009/06/03 16:05

a{

overflow:hidden;
outline:none;
}
確かこんな感じだったような、
アクセサビリティの関係で使わないから自信ないです

この回答への補足

早速の対応ありがとうございます！

すみません、どこに書き込めば良いかも分からず…
実際には次のような記述になっているのですが、実例をお願いしてもよろしいでしょうか？（１つの透明画像に、ハイパーリンクと二つのjavascriptを適応しようとしてこんな記載になっております…、もう少しスマートな書き方があればいいのですが…）

1.pngという透明ボタンに対する<body>内の記載です。
--------------------------------------------
<a href="index.html" onMouseOver="PPinner(0)" onMouseOut="PCouter(0)">
<img border="0" src="images/button/1.png" onmousedown="onmousedown_image()" onmouseup="onmouseup_image()" onmouseover="onmouseover_image()" onmouseout="onmouseout_image()" id="onmouseimage"/>
</a>
--------------------------------------------

補足日時：2009/06/03 18:12

通報する