2ヶ所のリンクで、更にロールオーバーできますか？

解決済

質問者：mobo2012
質問日時：2012/10/09 00:11
回答数：3件

ホームページ作成で、フレーム2ヶ所に同時リンクできたのですが、更にリンク用アイコンをロールオーバーさせる場合どうすれば良いのでしょうか？勉強中なので申し訳ありません。

imageフレームに、image.html
main フレームに、main.html
の2ヶ所に同時リンクさせています。
リンク用アイコンが 01_off.gif です。
このアイコンを、 01_on.gif を作り、ロールオーバーさせたいのです。
色々やりましたが、どうしても上手くいきません。
どなたか、教えて頂けないでしょうか？

下記が、リンク元のソースです
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>

<script language="javascript">

</script>
</head>
<body>
<form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01_off.gif"></form>
</body>
</html>

-------------------------------------------------------------------------------

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： tamackochi
回答日時：2012/10/12 13:09

あ、ごめんなさい、触れて変更するのと、クリックで変更するのが混ざっちゃったみたいですよね。

触れると画像が変わるようにするだけでしたら、scriptの変更はいらなかったんですよね。
わかりにくくなってしまってごめんなさい。

↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript">

</script>
</head>
<body>
<p><img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">
</p>
</body>
</html>

↑

これでいけるんじゃないでしょうか。

フォームでもいけたかもしれません。

↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript">

</script>
</head>
<body>
<form>
<input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01_off.gif" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">
</form>
</body>
</html>

↑

ところで、
＞<form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form>

＞を消してみたのですが、リンクその物が無くなります。
この部分の画像のファイル名にアンダーバーが入っていないようですが、これはコピペしたものですか？
表示されないのは、どっちかのファイル名が間違っているのかもしれないと思ったのですが。

- 0
- 件

通報する

この回答へのお礼

できました！
画像位置の問題が出たのですが、フォームに入れたら指定の位置に表示されました。
本当に助かりました。
どうにもならず、初めてOKWaveに質問しました。
tamackochiさんに出会えて良かった。
重ね重ね有難うございました。

通報する

お礼日時：2012/10/12 18:12

No.2

回答者： tamackochi
回答日時：2012/10/12 08:00

＞<img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">

＞この記述は、具体的にどの部分に記入すれば宜しいでしょうか？

これは、body内にpなりなんなり、ブロック要素を作って、その中に入れればいいと思います。
こんな感じ。

<body>
<p>
<img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">
</p>
</body>

＞あと-----------------------以下の記述はjavascript内に記入すれば宜しいのですね？

はい。
質問本文に書いていただいていた関数に少し書き足したのと、
変数の宣言を足しただけです。
画像を変更する命令は、もう少しスマートな書き方があるかもしれませんが、多分これでも動くと思います。

この回答への補足

何度もお答えいただき、申し訳ありません。
なぜか、上手くいきません。
お答えの様に書いてみたのですが、ロールオーバーする画像と２箇所リンクする画像と、２個できてしまいました。

body内の以前の記述

<form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form>

を消してみたのですが、リンクその物が無くなります。
勉強不足でチンプンカンプンです。助けて下さい。
下記が、教えて頂いた記述をいれたものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript">

</script>
</head>
<body>
<p><img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">
</p>
<form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form>
</body>
</html>

ほんと申し訳ありません。

補足日時：2012/10/12 11:55

通報する

- 0
- 件

通報する

No.1

回答者： tamackochi
回答日時：2012/10/11 16:49

リンクはフォームで記述する必要がどうしてもあるんでしょうか？

なければ、

<img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">

で、いいんじゃないでしょうか。

もしかして、触れたときに変わるんじゃなくて、クリックするたびに変わる、とかですか？

でしたら、イメージにidをつけて、
スクリプトの記述に、画像変更用の命令を書き足したらいいと思います。

<img src ="01_off.gif" onClick="Frchange()" id="button01">

=========================

var myFlg = 0;
function Frchange(){
parent.image.location.href="image.html";
parent.main.location.href="main.html";

if(myFlg == 0) {
button01.src = "01_on.gif";
myFlg++;
}
else {
button01.src = "01_off.gif";
myFlg--;
}
}

この回答への補足

早速のお答え有難うございます。

画像は、触れると変わるようにしたいです。

<img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'">

この記述は、具体的にどの部分に記入すれば宜しいでしょうか？
あと-----------------------以下の記述はjavascript内に記入すれば宜しいのですね？
ごめんなさい
素人にもう暫くお付き合い願えますか？

補足日時：2012/10/11 18:12

通報する