お世話になります。
今、ホームページを作成しているのですが…
ホームページ上で、文字のサイズを簡単に切り替えられる様にしようと思い、探してみたところ、styleswitcher.jsというJavascriptがあったので貰ってきました。
http://alistapart.com/stories/alternate/
ここからstyleswitcher.jsをいただいてきました。
文字の大きさが大、中、小になるように.cssファイルを3つ作り、拡張子.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用)では、動作確認が出来たのですが、NN7だけが動きませんでした。
設定を確認したところ、Javascriptを有効にするにはチェックがついていました。
設定のところでOKを押してから、切り替えボタンを押すと文字サイズが切り替えられるのですが、違うページに移動してしまうとその機能は動きません。
正直、Javascriptについての知識は全くなく、何がおかしいのか検討も付きません。
googleで何か情報がないか探してみたのですが、Firefoxに問題がある文章はいくつか見かけたのですが、NNに関する情報は見つけられませんでした。
各ブラウザにもいろいろ特徴があるから、動かなくても仕方ないのかな?
でも、NNユーザーの為にも何とかしたいなぁと思いますし、一体どうしたら良いのか困ってます。
大変申し訳ないのですが、どなたかアドバイスをいただけませんでしょうか?よろしくお願いします。
No.2ベストアンサー
- 回答日時:
あれ、画像でもできると思うのですが・・・。
NN7.1で、<img>でも<input type="image">でもOKでした。--------------------------------------
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/main_normal.css" id="style"/>
<script type="text/javascript"><!--
function changeCSS(src){
document.getElementById("style").href = src;
}
// --></script>
</head>
<body>
<img src="img/sample1.gif" style="cursor:pointer;" onClick="changeCSS('css/main_small.css');"/>
<img src="img/sample2.gif" style="cursor:pointer;" onClick="changeCSS('css/main_normal.css');"/>
<img src="img/sample3.gif" style="cursor:pointer;" onClick="changeCSS('css/main_large.css');"/>
<input type="image" src="img/sample1.gif" onClick="changeCSS('css/main_small.css');"/>
<input type="image" src="img/sample2.gif" onClick="changeCSS('css/main_normal.css');"/>
<input type="image" src="img/sample3.gif" onClick="changeCSS('css/main_large.css');"/>
</body>
</html>
--------------------------------------
どうでしょう?
ありがとうございました!
うまくいきました!
大変助かりました(*^▽^*)
ホームページ作るって難しいですね。
HTML覚えたり、スタイルシート覚えたり、Javascript覚えたり…いろいろ勉強しなきゃならないし…知恵熱でそうです(TT
スタイルシートも最近ようやく分かってきて使えるようになっては来ましたが、JavaScriptはさっぱりさんで本当に困ってました。
『分からないんだったら手を出すなよ』と突っ込まれてしまいそうですが、susie-tさんに助けていただけたので本当にうれしいです。
これからはJavaScriptも勉強していきたいと思います。
ありがとうございました。
No.1
- 回答日時:
styleswitcher.jsは見てないのですが
単に適用スタイルを変えるだけなら以下でできます。
------------------
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="'css/main_normal.css" id="style"/>
<script type="text/javascript"><!--
function changeCSS(src){
document.getElementById("style").href = src;
}
// --></script>
</head>
<body>
<input type="button" value="small" onClick="changeCSS('css/main_small.css');"/>
<input type="button" value="normal" onClick="changeCSS('css/main_normal.css');"/>
<input type="button" value="large" onClick="changeCSS('css/main_large.css');"/>
</body>
</html>
------------------
NN7.1でも動くことは確認しました。これではだめですか?
※余談ですが、NNは日本でのサポートが終わってることもあって、非対応も仕方ないというのが私の意見です・・・。
この回答への補足
さっそくの回答ありがとうございます。
私の質問に不足の部分がありました。
大、中、小は画像のボタンで操作出来る様にしたかったんです…
くもん学習療法センター
http://www.kumon-lt.co.jp/
上記のサイトの様にしたかったんです。
(このサイトは、NNでも大丈夫でした。)
質問を出してからもどうにかならないか探してみましたが、各ブラウザ対応までは利用の皆さんは考えていらっしゃらない様で、NNの件については全く出会えませんでした。
やぱり、susie-tさんがおっしゃる通り、非対応でも仕方がないのかなぁ?と思います。
また、きちんと対応させようとしたら・・・
input type="button"
でないと無理なのでしょうね。
ブラウザの種類がいくつかあって、それぞれに愛用される方がいて、皆に見やすい様にしようと思ったら、結構大変ですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DreamWeaverでJS
-
サイトにアクセスした際、数秒...
-
jqueryのcolorboxを読込直後に...
-
<script>タグというのはどこか...
-
jQueryの基本的なことについて...
-
文字サイズの大中小について
-
画像をゆっくりと切り替える方法
-
マウスオーバー+クリカブルマッ...
-
noscript内にlinkは間違い?
-
<a href="#" …>の意味を教えて...
-
onLoadをbodyタグ以外で使用する
-
bodyにidをつける理由は何ですか?
-
HTMLタグでマウスポインタを変...
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
JavaScriptでiframeの内容を「...
-
テキストボックス内にハイパー...
-
1から100までの平方根を表示す...
-
ひとつの外部ファイルに複数の...
-
変数の代入値を外部の.txtファ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
ebayの返信で『 Message may no...
-
jQueryの基本的なことについて...
-
DreamWeaverでJS
-
プラグイン無しでContactform7...
-
パソコンでホームページを作成...
-
document.lastChild.appendChil...
-
サイトにアクセスした際、数秒...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
Javascriptの外部サーバーから...
-
jQueryのfilterについて
-
マウスオーバー+クリカブルマッ...
おすすめ情報