背景画像とフレームの同時リンク

[新着] Webテンプレートを仮オープンしました

0   名前： *.othello.* ： 2007/06/30（土） 10:34  ID:Xs6aYz5H sub-zH
<HEAD>〜</HEAD>間
<SCRIPT language="JavaScript">
<!--
function bcgChange(bcgName)
{
if (navigator.appName == "Microsoft Internet Explorer" && navigator.
appVersion > "4") {
document.body.background = bcgName;
} 
}
//
-->
</SCRIPT>
選択する画像
<A href="javascript:bcgChange('画像のURL')" target="title"><IMG src="画像のURL" border="0"></A>

このようなスクリプトを使用して、自由に背景画像が選択できるようにしています。
そして画像をクリックすると同時に別のページにリンクするようにしたいんです。
自分が出来る限りの説明をしたいと思います；

まず、[Ａ][Ｂ][Ｃ]というページがあるとします。
ブラウザはアイフレームで２分割されており、初期画面の左にはＡ、右にはＢが面が表示されます。
Ａが表示されている枠の名前はmain、Ｂが表示されている枠の名前はtitleとします。

(1) main　　 title
┌──┬──┐
│　　　│　　　│
│　A　│　B　│
│画像│　　　│
└──┴──┘
Ａ画面にある画像をクリックします。

(2)
┌──┬──┐
│　　　│　　　│
│　A　│　B　│
│画像│背景│
└──┴──┘
Ｂ画面の背景が変更されます。

(3)
┌──┬──┐
│　　　│　　　│
│　C　│　B　│
│画像│背景│
└──┴──┘
(2)と同時にＡ画面がＣ画面に変わります。


と、こういう風な説明をすれば良いのでしょうか；
上手く説明できなくて本当に申し訳ないです。

画像をクリックするとＢの背景が変更され、同時にＡのページがＣに移る。と申しましょうか...；
アドバイスのほど宜しくお願いします。
<A href="#" onclick="parent.フレームの名前１.location.href='URL１';parent.フレームの名前２.location.href='URL２'">文字または画像</A>
上のタグを使って、２フレームの同時リンクを試して見たのですが上手く行きません。
上で紹介したリンクタグと組み合わせれば上手く行くかと思い下記のタグで試して見たのですが、背景もリンクもどちらも上手く行きませんでした。
<A href="javascript:bcgChange('画像のURL')" target="title"><IMG src="画像のURL" border="0"></A>
<A href="#" onclick="parent.フレームの名前１.location.href='URL１';parent.フレームの名前２.location.href='javascript:bcgChange('画像のURL')'">文字または画像</A>
個人的に考えているのは引用符がダブっていることが原因なのかな？とも考えているんですが
HTMLを触っている中で""と''くらいしか引用符を見た事が無いのでそれ以上に小さい引用符が解りません。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/06/30（土） 10:34  ［URL］  ID:O5hEMlpW sub-r2
JavaScriptをオフにしている、あるいは無視する環境ではどのようなことになるのが良いでしょうか。

案a:フレームAにある画像リンクを辿るとフレームAにページCが表示される(だけ)
案b:フレームAにある画像リンクを辿ると(フレームBの背景画像にするつもりだった)画像が表示される(だけ)
案c:フレームAに画像はあるが、リンクではない
案b:そもそもフレームAに画像を置かない
案e:それ以外(思いつかない)

> ブラウザはアイフレームで２分割されており

「iframeで2分割」というのがわかりません。アイフレームは、あるページの中に別のページを埋め込む技術です。
図を拝見する限り、iframeではくframeに見えますが、如何でしょうか。
2   名前： *.othello.* ： 2007/06/30（土） 10:34  ID:Xs6aYz5H sub-zH
そうですね、カヅサツさんの案ですと案cが一番いいと思われます。
個人的には、案aと案bを組み合わせたものが私の中の最良です。
案bは、「画像が表示される」と言う部分が「フレームBに画像が表示される」にしたものを想定しています。


>図を拝見する限り、iframeではくframeに見えますが、如何でしょうか。

申し訳ありません、表記ミスです；
正しくはフレームです。
3   名前： カヅサツ ◆ThCi95HEzw ： 2007/06/30（土） 10:34  ［URL］  ID:O5hEMlpW sub-r2
> 個人的には、案aと案bを組み合わせたものが私の中の最良です。

や、もちろん承知していますが、それができるのはJavaScriptを利用可能な環境のみです。
JavaScriptを利用できない環境の方は、どちらか、あるいは両方を諦めるしかありません。
案c(とd)は両方を諦めています。

1. img要素で画像を表示する
2. 1の画像に onclick属性で、適当な関数を起動する。その際、「フレームAに表示させたいページのURI」と「フレームBの背景にしたい画像のURI」を引数として与える。
3. 2の関数は以下のように書く
　3.1. location.href を最初の引数にする
　3.2. parent.フレームBの名前.document.getElementsByTagName('body')[0].style.backgroundImage を
　　　 url("2番目の引数") にする
4   名前： 匿名 ： 2007/06/30（土） 10:34  ID:/UQCBCoW sub-y9
<script type="text/javascript">
<!--
function bcgChange(bcgName) {
    parent.title.document.body.style.backgroundImage = "url(" + bcgName + ")";
}
// -->
</script>

<a href="C.html" onclick="javascript:bcgChange('bg.png')">...</a>
5   名前： 匿名 ： 2007/06/30（土） 10:34  ID:emsdcYZO sub-Cz
>>4
onclick 内をラベル文にしたのには何か理由がありますか。

>>1 の案 A に相当。
<script type="text/javascript">

function bcgChange (evt) {
    var t = evt.target || evt.srcElement;
    if (t.nodeName == 'IMG') {
        var d = parent.frames['title'].document;
        d.body.style.backgroundImage = 'url("' + t.src + '")';
    }
}

</script>

<p onclick="changeBCG (event); ">
  <a href="sample1.html" target="title"><img src="sample1.png" alt="*"></a>
  <a href="sample2.html" target="title"><img src="sample2.png" alt="*"></a>
  <a href="sample3.html" target="title"><img src="sample3.png" alt="*"></a>
</p>
6   名前： 匿名 ： 2007/06/30（土） 10:34  ID:emsdcYZO sub-Cz
訂正：onclick="bcgChange (event); "
7   名前： 匿名 ： 2007/06/30（土） 10:34  ID:epW2eUw6 sub-8t
>>5
動作確認しましたか？
target属性があるせいでうまくいかない
8   名前： 匿名 ： 2007/06/30（土） 10:34  ID:emsdcYZO sub-Cz
>>7
あーごめん。ご指摘感謝です。
<p onclick="bcgChange (event); ">
  <a href="sample1.html"><img src="sample1.png" alt="*"></a>
  <a href="sample2.html"><img src="sample2.png" alt="*"></a>
  <a href="sample3.html"><img src="sample3.png" alt="*"></a>
</p>

おまけ。案 c で longdesc 属性の使い道を考えてみたが IE で画像が表示されないでやんの。本当に IE は奥が深い。
<p onclick="bcgChange (event); ">
  <img src="sample1.png" alt="*" longdesc="sample1.html">
  <img src="sample2.png" alt="*" longdesc="sample2.html">
  <img src="sample3.png" alt="*" longdesc="sample3.html">
</p>

function bcgChange (evt) {
    var t = evt.target || evt.srcElement;
    if (t.nodeName == 'IMG') {
        var d = parent.frames['title'].document;
        d.body.style.backgroundImage = 'url("' + t.src + '")';
        location.href = t.longDesc;
    }
}
9   名前： *.othello.* ： 2007/06/30（土） 10:34  ID:PtjsrRQl sub-zH
ご返答ありがとうございました。
色々と試していくうちにそれっぽく出来たので、他のブラウザでも確認取りたいと思います。
一覧へ戻る