noscriptの書き方と書く場所を教えて下さい

このQ&Aのポイント
  • WebサイトでjQueryを使用してスライドショーを作成している場合、noscriptタグを使用することでJavaScriptが無効な場合に代替コンテンツを表示できます。
  • noscriptタグはHTMLのheadセクションに配置し、JavaScriptの代替コンテンツを記述します。
  • noscriptタグの中には、JavaScriptが無効な場合に表示する代替コンテンツを記述します。この場合、スライドショーコンテンツの代わりに画像へのリンクを表示することができます。
回答を見る
  • ベストアンサー

noscriptの書き方と書く場所を教えて下さい。

現在、Webサイトを作成しており、トップページにはjQueryを使ってスライドショーを付けました。 jQueryを使ってスライドショーを付けたのは良いのですが、noscriptの付ける場所と付ける方法がわかりませんの。 下記に、コードの状況を記載致しましたので、noscriptの書く場所と書く方法を教えて頂けないでしょうか? HTMLファイルのhead部分に次のようき記載し、 <script src="scripts.js"></script> bodyには次のように記載しております。 <div class="slideshow"> <a href="test/a.html"><img src="test/img/test1.gif" alt="テスト" border="0" /></a> <a href="test/b.html"><img src="test/img/test2.gif" alt="テスト" border="0" /></a> <a href="test/c.html"><img src="test/img/test3.gif" alt="テスト" border="0" /></a> </div> そして、jsファイルには次のようにコードを記入しているだけです。 $(function(){ var interval = 3000; $('.slideshow').each(function(){ var container = $(this); function switchImg(){ var anchors = container.find('a'); var first = anchors.eq(0); var second = anchors.eq(1); first.fadeOut().appendTo(container); second.fadeIn(); } setInterval(switchImg, interval); }); }); 宜しくお願い致します。

noname#233083
noname#233083

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

  • ベストアンサー
  • Gletscher
  • ベストアンサー率23% (1525/6504)
回答No.1

<script type="text/javascript"></script> の後で良いです。 javascriptが動作しないユーザー環境の時に、上記に代わってメッセージを表示したり、別の動作をさせたりできます。 ↓例 <noscript>このページではJavaScriptが必要です。</noscript>

noname#233083
質問者

お礼

私の場合、headの部分にscript typeを記載せずに次のようになってました。 <script src="scripts.js"></script> ということは、script typeを追加し、次のように記載すれば良いのでしょうか? <script type="text/javascript" src="scripts.js"></script> <noscript>このページではJavaScriptが必要です。</noscript>

noname#233083
質問者

補足

私の場合、headの部分にscript typeを記載せずに次のようになってました。 <script src="scripts.js"></script> ということは、script typeを追加し、次のように記載すれば良いのでしょうか? <script type="text/javascript" src="scripts.js"></script> <noscript>このページではJavaScriptが必要です。</noscript>

関連するQ&A

  • noscriptをどうすれば?

    大小の画像を2枚用意して クリックすると大画像が別ウィンドウで表示できるようになりました。 javascripがOFFの時にnoscriptで別窓表示させるようにもしました。 最初はnoscriptを別に置いたのですが、これだとjavascripがOFFの時に最初から小画像が2つ表示されてしまいます・・・ <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <img src="mini.jpg" width="300" height="300" alt="画"> </a> <noscript><a href="big.jpg"> <img src="mini.jpg" width="300" height="300" alt="画"></a> "></noscript> そこで、下記のようにしましたが・・・ 動作はできるみたいです。でもnoscriptのHTMLでの位置で何か変な感じです。正しい方法をご教授ください。 <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <noscript><a href="big.jpg"></noscript> <img src="mini.jpg" width="300" height="300" alt="画"> </a> これ1枚の画像だけなのでライブラリを使いたくないのです。

  • jqueryでの画像表示について

    どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。

  • nextの使い方

    jQueryを勉強したてです。 http://jonraasch.com/blog/a-simple-jquery-slideshow こちらのスライドショーのソースなのですが、 【HTML部分】 <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> 【jQuery部分】 function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); }); となっていますが、activeを差し替えて表示するものをどんどん変えていっているというのはなんとなくわかるのですが、 var $next = $active.next(); で、なぜクラス指定していない次のIMGタグが$nextに読み込まれることになるんでしょうか。 var $active = $('#slideshow IMG'); だったら納得いくものの、 var $active = $('#slideshow IMG.active'); であれば、HTMLでは1行しか該当しているものがないので、nextでは読み込まれないように思うのですが・・・ よろしくお願い致します。

  • <noscript>と</a>の関係

    javascript初心者です。 元々使われていたjavascriptです(動作確認済み) これを他の箇所にも利用しようとしてるのですが 文法的に間違っているような・・・どうでしょう? ------------------------------------------ <a href="javascript:wopen('pict.php?pic=○○',○○,○○)"> <noscript><a href="○○" target="_blank"></noscript> <img src="○○" alt="画像拡大"> </a> ------------------------------------------ また、javascriptは、現在ここ一箇所だけなのですが、 わざわざ利用しないほうがいいのかも? とも思いますが、どうでしょう?

  • html内にスライドショーを複数設置

    こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか?当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。

  • html5でブロックとブロックの間に隙間ができる

    下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa(ホムペ) -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }

    • ベストアンサー
    • HTML
  • IEとFirefoxでリンクの「hover」の状態が異なります。

    IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか? どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 (HTML) <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> (CSS) a:hover { background-color: #000000;} どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部 .js で動かないものが出てきてしまいました

    外部 .js への移行に伴い、動かないものがあります。エラは「未定義の変数です: rollover」、および「スクリプトで呼び出しているソースが見つかりません。」。 test.html、test.js、および画像はすべて同じディレクトリに置いています。 (test.js) window.onload = function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } または function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } window.onload = loadImage; (test.html) <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <a onmouseover="image-1.src=rollover[0].src; return true;" onmouseout="image-1.src='image-1-y.gif'; return true;" href="page-1.htm"><img name="image-1" src="image-1-y.gif" alt="Page 1"></img></a> <a onmouseover="image-2.src=rollover[1].src; return true;" onmouseout="image-2.src='image-2-y.gif'; return true;" href="page-2.htm"><img name="image-2" src="image-2-y.gif" alt="Page 2"></img></a> <a onmouseover="image-3.src=rollover[2].src; return true;" onmouseout="image-3.src='image-3-y.gif'; return true;" href="page-3.htm"><img name="image-3" src="image-3-y.gif" alt="Page 3"></img></a> </body> </html>

  • 初心者です jQueryのマウスオーバーについて

    jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像1.gifが画像1_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $(this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $(this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$(this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $(this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>

  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

専門家に質問してみよう