JavascriptでのCSS切り替えがうまく動作しない
- サイト制作初心者の方が、Javascriptを使用してCSSの切り替えを実装しているが、ページを更新したり別のページに移動すると元のCSSに戻ってしまうエラーが発生しています。
- ネットで同じ様なエラーを調べても解決策が見つからず、ここで質問をさせていただきました。
- コードに問題があるのか、他の要素が影響しているのかを教えていただきたいです。
- ベストアンサー
Javascriptがうまく動作しません。
こんにちわ。 サイト制作初心者の者です。 サイトにCSSの切り替えが出来る"styleswitcher.js"を使用しているのですが、 切り替えの動作はするものの、ページを更新（リフレッシュ）したり、別のページに移動すると、元のCSSに戻されます。 ネットで同じ様なエラーが出てないか確かめてみましたが、役に立ちそうな答えが見つからなかったので、ここに質問させていただきます。 Styleswitcher.js http://www.alistapart.com/articles/alternate/ サイトでのソース： == <head></head>内：== <script type="text/javascript" src="js/styleswitcher.js"></script> <link rel="stylesheet" href="css/style.css" type="text/css" title="Default" /> <link rel="alternate stylesheet" href="css/style2.css" type="text/css" title="Custom2" /> <link rel="alternate stylesheet" href="css/style3.css" type="text/css" title="Custom3" /> == <body></body>内：== <div class="csspalette"> <a href="#" onclick="setActiveStyleSheet('Default'); return false;"><img src="images/ccss1.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom2'); return false;"><img src="images/ccss2.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom3'); return false;"><img src="images/ccss3.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> </div> ==== コードには問題は無いと思うのですが、 この他にJquery等を使ったエフェクトを入れているので、それが問題なのでしょうか？ ご教授願います。
- RADD
- お礼率50% (9/18)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご提示のサイトの少し下の方に、ご質問に対する説明と対処法が示されていますので、ご覧になってください。（Cookies以降の説明） http://www.alistapart.com/articles/alternate/ かいつまんで説明すると、適用するスタイルシートを変えてもその状態はどこにも記録されていないので、ページ遷移したりすると元に戻ります。 対処法として、設定した状態をクッキーに記憶しておく方法が説明されているようです。 （超斜め読みなので、ちゃんと理解していません。）
関連するQ&A
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- 引数を2個使いたい場合 Javascript
こんにちは。 Javascriptについてアドバイスお願いします。 ■やりたいこと 「普通」「大きい」と言うテキスト画像をクリック することでCSSを入れ替える。 ・外部JSにしたい ・<input>のボタンではなく画像を使う ・一つのページで使うCSSは2種類（共通.cssと各頁ごとの設定用） 作ってみたスクリプトは下記の通りです。 function chooseCSS(csstype,cssname){ if(csstype == "normal"){ document.getElementById("baseCSS").href = "base.css"; document.getElementById("eachCSS").href = cssname + ".css";} else{ document.getElementById("baseCSS").href = "base2.css"; document.getElementById("eachCSS").href = cssname+"2.css";} } --------------------------------------------- HTMLの記述 ☆head内 <link href="base.css" rel="stylesheet" type="text/css"> <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> ☆body内 <a href="javascript:void(0)" onClick="chooseCSS('normal','top')"><img src="img/btn01.gif" border="0" class="normal"></a> <a href="javascript:void(0)" onClick="chooseCSS('big','top')"><img src="img/btne02.gif" border="0" class="big"></a> --------------------------------------------- ローカルでは動いていたのでサーバーにUPしたらネスケとsafariは動作するのにIE（JSの設定は有効になっていました）だけ動かなくなりました。 あまりJavascriptは得意ではないので どなたかアドバイスお願いいたします！
- ベストアンサー
- JavaScript
- javascriptにてcss切り替え
現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- 文字サイズの大中小について
お世話になります。 今、ホームページを作成しているのですが… ホームページ上で、文字のサイズを簡単に切り替えられる様にしようと思い、探してみたところ、styleswitcher.jsというJavascriptがあったので貰ってきました。 http://alistapart.com/stories/alternate/ ここからstyleswitcher.jsをいただいてきました。 文字の大きさが大、中、小になるように.cssファイルを３つ作り、拡張子.cssはcssフォルダに、拡張子.jsはjsフォルダに分けていれています。 <head> <script type="text/javascript" src="js/styleswitcher.js"></script> <link href="css/main_small.css" rel="stylesheet" type="text/css" title="small" /> <link href="css/main_normal.css" rel="stylesheet" type="text/css" title="normal" /> <link href="css/main_large.css" rel="stylesheet" type="text/css" title="large" /> </head> という風に、ヘッダーのところにリンクを貼りました。 IE、Firefox、Opera、safari(windows用）では、動作確認が出来たのですが、ＮＮ７だけが動きませんでした。 設定を確認したところ、Javascriptを有効にするにはチェックがついていました。 設定のところでＯＫを押してから、切り替えボタンを押すと文字サイズが切り替えられるのですが、違うページに移動してしまうとその機能は動きません。 正直、Javascriptについての知識は全くなく、何がおかしいのか検討も付きません。 googleで何か情報がないか探してみたのですが、Firefoxに問題がある文章はいくつか見かけたのですが、NNに関する情報は見つけられませんでした。 各ブラウザにもいろいろ特徴があるから、動かなくても仕方ないのかな？ でも、ＮＮユーザーの為にも何とかしたいなぁと思いますし、一体どうしたら良いのか困ってます。 大変申し訳ないのですが、どなたかアドバイスをいただけませんでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- styleswitcherについて(ページ間での情報の維持)
現在作成しているページで、CSSが切り替えられるstyleswitcherというJavaScriptを使用したいと考えていますが、別ページに移動した際に切り替えたCSSが元に戻ってしまって困っています。 環境は、 WindowsXP InternetExplorer6.0 です。 作成は、http://www.zakimi.com/archives/2004/06/05/214447.phpに書かれている通りに行いました。 具体的には、 ●jsフォルダにstyleswitcher.jsを作成 ●cssフォルダにdefault.cssと2.cssというCSSファイルを作成 ●<head></head>内に <script type="text/javascript"src="js/styleswitcher.js"></script> <link href="css/default.css" rel="stylesheet" type="text/css" title="default" /> <link href="css/2.css" rel="alternate stylesheet" type="text/css" title="2" /> と記述したhtmlファイルを2つ(AとB)を作成 ●htmlファイルAとBの<body></body>内に、それぞれ <a href="#" onclick="setActiveStyleSheet('default'); return false;">CSS1</a> <a href="#"onclick="setActiveStyleSheet('2'); return false;">CSS2</a> と記述 ●htmlファイルAとBに、それぞれのファイルへのリンクを作成 私が実現したいのは、htmlファイルAをブラウザで表示した後、『CSS2』をクリックしてCSSファイルを2.cssに切り替え、さらにファイルBへのリンクをクリックします。この時、ファイルBにはdefault.cssファイルではなく、2.cssを適用するというものです。 現状は、htmlファイルAでCSSをCSS2に切り替えた後にファイルBへ移動すると、default.cssファイルが適用されてしまいます。 これではページ間を移動するたびにCSS2に切り替えなくてはいけなくなってしまうので、困っています。 どなたかお分かりの方がいらっしゃいましたら、お知恵をおかしください。宜しくお願いいたします。
- 締切済み
- JavaScript
- favicon.icoが表示されない
環境：IE7 Apache2 \a\images \aにindex.htm \a\images\favicon.ico favicon.icoは「@icon変換」というフリーソフトで作成しました。（容量1K） index.htmlの内容は <head>、<meta>タグ、<title>ｘｘｘｘｘ</title>の後に <link rel="icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="Shortcut Icon" type="img/x-icon" href="images/favicon.ico" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> となっております。 IEのアドレスバーの左は、IEのマークのままです。 どなたか、ご経験のある方、アドバイスいただけると幸いです。
- ベストアンサー
- HTML
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- thickboxで画像ギャラリーが表示されない
あるサーバー上でthickboxの画像ギャラリーが表示されていたんですが、別のサーバに移し変えたとたんに表示されなくなりました。 <script language="javascript" src="js/jquery.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="js/thickbox.js" charset="UTF-8"></script> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all"> </head> <body> <div class="others"><a href="new_bike/12413289033.jpg" title="花" rel="old" class="thickbox"><img src="images/other_button.gif" border="0" alt="その他の画像" class="rollover" /></a><a href="new_bike/12413289034.jpg" title="木" rel="old" class="thickbox" style="display : none;"></a></div> 表示されなくなってからはスクリプトタグ内にcharset="UTF-8"を追加しただけです。 サーバ環境に依存するのでしょうか？ 教えてください。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery.noConflict(); </SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript> jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0 });}); </SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○ src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。
- 締切済み
- JavaScript
