サブウィンドウからのスタイルシートの切り替え

このQ&Aのポイント
  • javascript初学者がホームページビルダー14を使用して、メインウィンドウの操作を可能にするサブウィンドウを作成したい。背景模様や文字色をセレクトメニューで切り替える方法を探している。
  • トップページを開いた時にサブウィンドウが開くようにしたい。背景模様の切り替えはchBgImgを使用し、文字色やリンク色はdocument.fgColorで切り替えたい。その他の変更点はスタイルシートで切り替えたい。
  • サブウィンドウからメインウィンドウの操作を可能にするためのソースコードが分からない。また、背景模様のセレクトメニューには画像を表示させたいが、マウスポイントした時に拡大表示させる方法がわからない。アドバイスをお願いします。
回答を見る
  • ベストアンサー

サブウィンドウからのスタイルシートの切り替え

お世話になります。カテゴリー違いであるかもしれませんがご容赦下さい。 javascriptについて勉強をし始めた所の初学者です。 ホームページビルダー14を使用してホームページを製作しています。 ページを開いたときに表示するサブウィンドウの切り替えボタン等で、閲覧して下さる方々にページの背景模様や文字色等を変更してもらえるようにメインウィンドウを操作できるようにしたいと考えています。背景や文字の要素ごとに切り替えられるセレクトメニューを設置したいのです。 具体的には、トップページを開いた時に http://www.sky.sannet.ne.jp/masapine/java_newwindow7.htmlのページのような形状のサブウィンドウが開くようにしたいと考えています。 背景模様(画像)の変更は、http://javascript.eweb-design.com/1302_bic.htmlのサイトに書かれているようなchBgImgで切り替える方法を取りたいと思っています。 文字色やリンク色はhttp://www.tagindex.com/javascript/page/color1.htmlのようなdocument.fgColorで切り替え、 その他の変更点等は、http://allabout.co.jp/gm/gc/23930/4/のようにスタイルシートで切り替える形を取りたく、これら3つのソースで設置したセレクトメニューをサブウィンドウに設置してメインウィンドウを切り替えるソースを教えて頂きたいと思うのです。つまり、個々の設置したいソースの内容には辿りついたのですが、それらをサブウィンドウから操作するソースが分からないという事なんです…。 背景模様の切り替えのセレクトメニューの表示には文字の代わりに画像を表示させたく、その際、セレクトメニューの各項目をマウスポイントした時に、画像表示が拡大表示される…というようなそのような事が可能であれば、そのソースも合わせてお教えいただきたく思います…。説明が下手でお恥ずかしい限りです…。 アドバイスを下さる方がいらっしゃいましたらよろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

お勉強のため、いろいろ試してみるのも止めませんが、 3つ目に挙げられている色の変更  document.bgColor  document.fgColor  document.linkColor  document.vlinkColor  document.alinkColor は、現在非推奨で廃止予定(いつブラウザーが見捨てるかは解らないけど) です。2つ目のサイトの例のようにstyle属性で色変更やった方がベターです。 https://developer.mozilla.org/en/DOM/CSS  document.linkColor  document.vlinkColor  document.alinkColor はCSS擬似クラスだから、CSSのプロパティ変更で対応 (style属性だけでも工夫すればよいが) となると、全部の変更機能を、4つ目のサイトのやり方に統一したほうが、 ごちゃごちゃしなくなると思います。 それと、一つ目のサイトの例にある別windowの中身を毎回 function OpenWindow(){ document.write("<HTML> ~ で書き出すのも、毎回同じものを書き出すだけなら意味無いような... そもそも、変更メニューを別のHTMLにして、別窓オープンで開かなくても 自ページ内でポップアップ表示も出来ますよ。

yukimari09
質問者

補足

お返事が遅れてしまい申し訳ありませんでした。 非推奨の事は全く知りませんでしたのでとても勉強になりました。 お返事が遅れた上に補足して頂くなど虫がいいとは思うのですが…。 ポップアップ表示については自分なりに調べてみたのですが、別窓オープンとの違いが良くつかめなくて…お時間が許すのであればその点について御教授願えればと思います。

その他の回答 (1)

回答No.1

こんばんは。 各サンプルに出てくる、 document.xxxx を window.opener.document.xxxx にすればいいかと・・・。

yukimari09
質問者

お礼

素早い回答を下さりお礼申し上げます。そのように書き換えるだけでサブウィンドウで操作できるようになるのですか…。試してみます。ありがとうございました。

関連するQ&A

  • スタイルシート(CSSスタイル)が読み込めない。

    Webデザイナー修行中の者です。 社内の人が作ったホームページ。背景や線の画像を各 ページで統一するため、ソースをコピー&ペーストして 新たなページを作ったのですが、作成の時点では線画像も 背景も表示されるのですが、ブラウザで見てみると背景も 線も出ません。 おそらくスタイルシートというもの(CSSスタイル)が 読み込めていないのだと思いますが、考えられる原因は どんなものでしょう? 作成者に聞けばいいのでしょうが、いないので聞くことが できません。 かといって、大幅にページを変更する時間もなく、私が 作るページだけを全く別の背景等にするのも、不自然な ものになってしまいます。 業務にかかわるものですので、Webページやタグを公開 できないのですが、アドバイス、よろしくお願いいたし ます。 作成はメモ帳、またはDreamweaver4を使用しています。

  • フレーム内から開いたサブウィンドウから親ウィンドウの別フレームの操作を行いたい

    メニュー、メインの2つのフレーム分けしてあるページで、メインページからサブウィンドウを開きます。 その後、以下の2アクションを同時に行いたいのです。 (1)サブウィンドウから親ウィンドウ(メイン)をジャンプさせる (main.html→main2.cgi) (2)親ウィンドウ(メニュー)の画像をAからBに変更させる 現在window.openerでメインページの変更はできているのですが、 メニューページの画像のを変更がうまくできません。 方法としては (1)サブから親ウィンドウ(画像=A)を閉じさせて、再び親ウィンドウ(画像=B)を フレームセットごとムリヤリ開き直す。 (2)何らかの形でメニューページの情報を保存しておき、Onloadでサブからのジャンプ時に変更させる (3)サブから親ウィンドウのフレーム越し操作を行なって、メニューページの画像を変更する。 どの方法が可能でしょうか、もっといい方法がありますか。 お知恵拝借させてください。よろしくお願いします。 以下、かなり省略したソース説明です。 【フレームセット→cgi。記述は省略】 <frameset>  <frame src="menu.html" name="menu">  <frame src="main.html" name="main"> </frameset> 【メニュー→html】 <img src="A"> 【メイン→html】 function open_sub(url) { /**/ w = window.open(url, 'sub') } <!--本文--> <a href="javascript:open_sub('sub.html')">サブウィンドウ</a> 【サブ→html】 function change_main() { window.opener.location.href="main2.cgi?sub"; window.opener.focus(); } <!--本文--> <A HREF="JavaScript:change_main()">メインを変更</A>

  • セレクトメニューが表示されません。

    検索してみましたが、該当する回答が発見できなかったので、お願いします。 (もし、過去の質問と重複していたらすみません) フォームにセレクトメニューを設置してみたところ、 セレクトメニューが表示される部分に同ページ内の<div>で背景に設定してあるバナーが表示されてしまいます。 マウスオンでバナーの背景画像は消え、セレクトメニューが表示されるのですがリロードすると、またセレクトメニューの上にバナーの背景画像が表示されてしまいます。 ちなみに同じフォームに設置してあるラジオボタンは正常に表示されました。 お忙しいところお手数をおかけして申し訳ありませんが、ご回答のほどよろしくお願いします。

    • ベストアンサー
    • HTML
  • サブウィンドウの大きさを複数設定するには?

    こんにちは。 私の知っているスクリプトだと、一つの固定の大きさでのみサブウィンドウが表示されるので、それぞれのサブウィンドウの大きさを別々に指定したいのですが、どのように記述すれば表示可能でしょうか?大きい方に合わせてしまうと、小さい方が余白が大きすぎてデザイン的にあまり綺麗ではありません。 IE4.0/NN4.0以上対応のスクリプトをお願いします。 やりたい事。 画像をロールオーバーさせ、クリックした時になおかつポップアップでサブウィンドウを表示させる。(その時表示させるページの大きさに合わせ、ウィンドウサイズも変えたい) 既にやっている事。 画像をロールオーバーさせ、固定の大きさではポップアップでサブウィンドウも表示できている。 使用しているソース。 (head部分) <SCRIPT language="JavaScript"> <!-- function openwindow(url,target) { window.open(url,target, "scrollbars=yes,toolbar=no,location=no,status=yes,menubar=no,width=650,height=700") } // --> </SCRIPT> (body部分) <a href="javascript:openwindow('mariko/profile.html','pop_up')" onMouseOver="changeImage('botanb_2.gif', 'botan2','mojij_2.gif', 'moji2')" onMouseOut="changeImage('botanp_2.gif', 'botan2','mojie_2.gif', 'moji2')"><img src="images/botanp_2.gif" width="66" height="80" name="botan2" border="0"></a> よろしくお願いします。

  • サブウィンドウを表示させたいのですが・・・

    こんにちわ。 ちょっとした(といっても、ワード文書1ページ分)説明をサブウィンドウで表示させたいのですが、 できません。 以下がソースです。 <メインウィンドウ> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function winOpen(winName,url,W,H){ //サブウインドウオープン var WinD11=window.open(url,winName,'scrollbars=1,width='+W+',height='+H+''); WinD11.document.close() } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:function voi(){};voi()" onClick="winOpen('','link1.html',400,200)"> この文字をクリックすると説明ウインドウ1が開きます </A> </BODY> 何が間違ってるのかご指導いただけないでしょうか? よろしくお願いいたします。m(__)m

  • サブウィンドウから、親ページのリンクを操作し、自身は閉じるやり方

    すいません。javascriptに詳しい方、教えて下さい。 今、親ページからポップアップで、サブウインドウを開いています。 やりたいことは、サブウィンドウにあるcloseボタンを押したら、 親ウィンドウを指定のページに移動して表示させ、サブウィンドウ自身は閉じる動作がしたいです。 調べてみたら、opener.location.hrefというのを使えばできるみたいなのですが、こういう記述で大丈夫なのでしょうか? プレビューしてみたら、一応動いてくれているみたいですが、文法的にはどうなのでしょうか? 教えていただければ、ありがたいです。 以下にソースを記述します。 <a href="index.htm#F" onClick="opener.location.href='index.htm#F; return false;" javascript:window.close();">

  • JavaScriptでの画像切替について。

    以下のようなことをしたいのですが、方法が分からず困っています。 http://www.astellas.com/jp/ メニューの上にマウスがくると、下の画像が切り替わる。 http://www.mos.co.jp/index.html メニューの上にマウスがくると、プルダウンのメニューが表示される。 上の2つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。 JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。 上の2つを実現するのは、今は諦めたほうが良いでしょうか? JavaScript以外でも実現可能だったら教えていただけないでしょうか? (※FLASHは除く。例えばCSSなど) よろしくお願いします。

  • 作成側:サブウィンドウの表示を1回きりにしたい。

    サイトの管理・運営をしています。 今度新商品を出すので、サイトのTOPページを開いた時にアピールするために Javascript で商品の載った小さいサイズのサブウィンドウを出しています。 しかし、そのサブウィンドウを閉じてから、 サイト内を廻ってTOPに戻ってくると又開く。 もちろんそんなふうに作ったのですが、 サイトに来た時に1回だけ表示して、 サイト内にいる時は何度TOPページへ行っても開かないようにしたいのです。 そんな方法をご存知ではないでしょうか? 教えてください。

  • 画像を保存させないようにするには??こんな感じでOK?

    Windows2000 IE5.5 Vbscript を使っています。 今あるページに画像を表示するとします。 それを保存させたくないです。 そこで、まず右クリックを禁止します。 次に、メニューバーから名前を付けて保存 されたくないので、あるボタンを押して、 サブウィンドウを出して、そのサブウィンドウ を出す時に、メニューバーとかを 削除して、オープンします。 そして、そのサブウィンドウに 画像を表示して、そのサブウィンドウ内で 右クリックを保存してやれば、 保存できないような気がするのですが、 これではダメでしょうか? サブウィンドウのアドレスを ボタンを押すページのソースを見ても 分からなくするものとします。 また、最初にセッション変数を使った、 IDとパスワードの画面を通った人しか ボタンのあるページには入れないものとします。 直接、画像のあるページのアドレスを指定しても、 ログインしてないので、セッション変数で はじかれるようにしてあります。 また、すべてのページの最初に、 履歴を残さないようにする記述をしています。 ただ、不安なのは一度画像のあるページを表示 すると、PCの中に保存されてしまうのではないかと いうことです。画像が保存されてしまうなら、 何をどうやっても、実現不可能な気がします・・・。 画像のキャッシュって残るのでしょうか?

  • プルダウンの切り替えについて

    ページのある部分のみjavascriptで別ファイルを読み込ませ(includeのような形)、 プルダウンでその部分が切り替わるように設定したいと考えております。 プルダウンをリンクとして使用したり、画像の切り替えなどは検索で探すとよく見掛けるのですが、 上記のような形は検索で探しても見つからず、困っております。 下記のURLは画像の切り替えですが、この画像の切り替え部分をそのままHTMLファイルを読み込ませて表示させるようになれば、と思っております。 http://www.geocities.co.jp/HeartLand-Kaede/3853/jyouhoufile/im6.html やりたい事 ・プルダウンの切り替えでページの一部分に別ファイルを読み込ませ表示させる ・プルダウンの項目を変えると同時に表示も変わる ・プルダウンの項目はそのまま差し替わった時の項目を指している javascript初心者の為、自分で組もうにも全くと言っていいほど分からなかったので、こちらで質問させて頂きました。 分かりにくい文章で申し訳ありませんが、どうぞお力をお貸しくださいますようお願い致します。

専門家に質問してみよう