• ベストアンサー

自動で表示切り替えをしたい！！

下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか？ クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。 （本当は、オンマウスだけで表示が替わるようにしたいです！！） アドバイスお願いします＞＜ <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); });//Close Function </script> </head> <body> <div id="main" class="container"> <div class="main_image"> <img src="banner1.jpg" alt="- banner1"> <div class="desc"> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </div><!-- desc --> </div><!-- main_image --> <div class="image_thumb"> <ul> <li> <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" width="50" height="38"></a> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" width="50" height="38"></a> <div class="block"> <h2>タイトル2</h2> <small>04/11/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" width="50" height="38"></a> <div class="block"> <h2>タイトル3</h2> <small>04/12/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" width="50" height="38"></a> <div class="block"> <h2>タイトル4</h2> <small>04/13/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" width="50" height="38"></a> <div class="block"> <h2>タイトル5</h2> <small>04/14/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" width="50" height="38"></a> <div class="block"> <h2>タイトル6</h2> <small>04/15/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> </ul> </div><!-- image_thumb --> </div><!-- container --> </body>

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

そのまま付けたし的な処置ではありますが… スクリプトの前半をこんな風にしてみてはいかがでしょうか？ 最初の方の5000（msec）が自動表示の時間間隔（5000＝5秒） $(document).ready(function() { //************　Intervalの処理を追加 var interval_id; function interval(){ interval_id = setInterval(function(){ var next = $(".image_thumb ul li.active").next("li"); if(!next.length) next = $(".image_thumb ul li:first"); next.click(); }, 5000); } //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); interval(); //***************　ここに1行追加 $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height();//Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { if(interval_id) clearInterval(interval_id); //***************　ここに1行追加 //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250, function(){ interval(); //　***************　この前後の行を修正 }); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } //以下同じ ＞本当は、オンマウスだけで表示が替わるようにしたいです clickイベントで動作するようになっているのをhoverまたはmouseoverにすれば可能です。でも、全体が動くような動作なのでマウスオンだとユーザビリティが悪くなるように感じるのは私だけかなぁ？

goaldast
質問者

お礼

ありがとうございます。問題なくできました！ 私はJavascriptはまだまだ勉強中なので助かりました。 マウスオンだとユーザビリティの配慮に欠けているかなと私も 思っているのですが、やっぱりそうですよね。 迷いどころです… 不明な点など、まだまだここで質問すると思いますので、また ご縁がありましたら是非ご教授お願いします。 本当にありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • サムネイル画像のclass切替がうまく動かない。

    すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして　class="current"　を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。

  • lightboxの画像表示を画像切り替えの画面に組み込みたい

    ttp://designm.ag/tutorials/jquery-display-switch/ の画像一覧の切り替えと litboxの画像表示をしたくて ttp://​www.lateralcode.com/create-a-simple-picture-gallery-using-php/​ の出力結果のコードをそのまま書き写して実行しましたが 実行すると「ページでエラーが発生しました」 ライン11文字2 nullはNULLまたはオブジェクトではありません となってしまいます。 ソースが以下の様になっています。 どこを直していけばいいのか教えてください。 ライン１１は「$(document).ready(function(){」です。 <script type="text/javascript" src="js/jquery-latest.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function () { $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }); }); </script> <style type="text/css"> body { margin: 0; padding: 50px 0 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; background: #000 url(body_bg.jpg) no-repeat center top; color: #fff; } h1 { font: 5em normal Georgia, 'Times New Roman', Times, serif; text-align:center; margin-bottom: 20px; } h1 span { color: #000000; } h1 small{ font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 1.5em; display: block; color: #000; } .container { width: 758px; margin: 0 auto; padding-bottom: 100px; overflow: hidden; } ul.display { float: left; width: 756px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #000; border-right: 1px solid #000; background: #000000; } ul.display li { float: left; width: 754px; padding: 10px 0; margin: 0; border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; } ul.display li a { color: #000000; text-decoration: none; } ul.display li .content_block { padding: 0 10px; } ul.display li .content_block h2 { margin: 0; padding: 5px; font-weight: normal; font-size: 1.7em; } ul.display li .content_block p { margin: 0; padding: 5px 5px 5px 245px; font-size: 1.2em; } ul.thumb_view li{ width: 250px; } ul.thumb_view li h2 { display: inline; } ul.thumb_view li p{ display: none; } a.switch_thumb { width: 122px; height: 26px; line-height: 26px; padding: 0; margin: 10px 0; display: block; background: url(./images2/switch.gif) no-repeat; outline: none; text-indent: -9999px; } a:hover.switch_thumb { filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } a.swap { background-position: left bottom; } </style> </head> <body> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <div id="contents"> <a href="#" class="switch_thumb" >Switch Display</a> <p> <ul class="display" id="pictures"> <li> <div class="content_block"> <a href="./images/1.gif" rel="lightbox[16530]"><img src="./images/2.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li> <div class="content_block"> <a href="./images/3.gif" rel="lightbox[16530]"><img src="./images/4.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li></li> </ul> </p> </div>

  • firefoxで背景が表示されません

    こちらのQAを見て、floatを消してみたりclear入れてみたりしてみましたが一向に変化しません、 navで指定した背景画像がIEでは出てforefoxでは出ません・・どこをどう直したらよいのでしょうか・・・ ------css----------- body{ background:url(img/bg.jpg); padding:0; width: 775px; margin: 0 auto; } wrapper{ padding:0; width:755px; position:relative; } #head { margin: 0px; height: 54px; padding: 0px; } h1{ margin: 0px; padding: 0px; width: 177px; height: 59px; position: relative; top: 0px; right: 0px; background: url(img/logo.jpg) no-repeat; text-indent: -9999px; text-decoration: none; } #head strong { margin: 0px; padding: 0px; height: 15px; font-size: 12px; color: #FFFFFF; position: absolute; top: 3px; line-height: 15px; text-indent: 350px; } #head img { height: 33px; width: 335px; position: relative; top: -44px; float: right; padding: 0px; margin: 0px 10px 0px 0px; } .main_img { background: url(../img/main_img_bg.jpg) no-repeat; width: 755px; height: 390px; display: block; clear: both; margin: 0px; padding: 0px; position: relative; top: -35px; } .main_img .nav { background: url(img/nav_img.png) no-repeat; height: 369px; width: 208px; margin: 0px; padding: 0px; } .clear { clear: both; } .box01 { margin: 0px; padding: 0px; clear: both; width: 755px; } ---------------html----------------- <body> <!-----------------------wrapper(S)------------------------------------> <div id="wrapper"> <!-----------------------head(S)------------------------------------> <div id="head"> <h1>Bar TRACY バートレイシー</h1> <strong>心斎橋・アメ村barのバー</strong> <img src="css/img/head_tel.jpg" alt="06" /></div> <!-----------------------head(E)------------------------------------> <!-----------------------main_img(S)------------------------------------> <div class="main_img"> <!-----------------------menu(S)------------------------------------> <div class="nav"> <ul> <li class="home"><a href="index.html">ホーム</a></li> <li class="menu"><a href="menu.html">メニュー</a></li> <li class="access"><a href="access.html">アクセス</a></li> <li class="staff"><a href="staff.html">スタッフ紹介</a></li> <li class="event"><a href="event">イベント情報</a></li> <li class="contact"><a href="event">お問い合わせ</a></li> </ul> mixi <p>mixiコミュニティ良かったら コミュに遊びに来てください！</p> </div> <!-----------------------nav(E)------------------------------------> </div> <!-----------------------main_img(E)------------------------------------> <div class="clear"></div> <!-----------------------cont(S)------------------------------------> <div class="cont"> <!-----------------------box01(S)------------------------------------> <div class="box01"> <!-----------------------news(S)------------------------------------> <div class="news"> <h2>ニュース</h2> 画像 <p>サンプルテキスト</p> </div> <!-------news(E)--------> <!-----shop_com(S)------> <div class="shop_com"> <p> ショップインコメント</p> </div> <!-----shop_com(E)----> </div> <!---box01(E)---> <!--box01(S)--> <div class="box01"> <!---bana01(S)---> <div class="bana01"> チケット </div> <!--bana01(E)--> <!---shop_info(S)----> <div class="shop_info"> <h2>ショップ情報</h2> 地図 <dl> <dd>TEL：</dd><dt>06-0000-0000</dt> <dd>住所：</dd><dt>大阪市中央区 </dt> </dl> <dd>mail:</dd><dt>m@00000</dt> <!-----shop_info(E)---> </div> <!--box01(S)--> <!----footer(S)----> <div id="footer"> <p>Homeホーム ｜ Menuメニュー | Accessアクセス | Staffスタッフ | Eventイベント | Contactotお問い合わせ</p> </div> <!---footer(E)--> </div> <!--wrapper(E)--> </body> </html>

  • 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに

    以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー　フッターが崩れてしまいます。ie6.0　ie7.0 にて（ie8.0　firefox3）では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-8にする必要があるのです。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">

  • onmouseoverの表示切り替えが上手くいかない

    onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>

  • キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト

    javaScript初心者です。どうぞよろしくお願いします。 http://www.keyence.co.jp/ このサイトのトップの様なコンテンツを作りたいです。 1：一つ一つの中身はflashで 2:時間が立てば次の項目に自動スクロール 最低限上記を必要としたいです。 javaScriptをしっかり扱えるようになりたいので 解説等もいれていただけたら幸いです。 図々しくて恐縮ですがどなたかよろしくお願い致します。 html----------------------------------------------- <body> <div id="rollover"> <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p> <ul id="thumb"> <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li> <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div> </body> </html> css--------------------------------------------- <style type="text/css"> /* ロールオーバー */ ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; } </style> javaScript------------------------------------------ <script type="text/javascript"> //<![CDATA[ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } } //]]> これは拾ったフリーのもののソースなのですが これを改造したほうがやりやすいようでしたら その旨をご教授いただきたいです。 どうぞよろしくお願い致します。

  • jQueryで表示と非表示の切り替えについて

    趣味の写真ギャラリーサイトの制作を行っており、トップページには以下のようにサムネイルを配置しております。 <nav> <div id="haru">春の画像の表示</div> <div id="natsu">夏の画像の表示</div> <div id="aki">秋の画像の表示</div> <div id="fuyu">冬の画像の表示</div> <div id="jitensya">自転車の画像の表示</div> <div id="umi">海の画像の表示</div> <div id="koibito">恋人の画像の表示</div> <div id="yuki">雪の画像の表示</div> </nav> <div id="content"> <div class="thumb haru"><a href="#"><img src="img/haru.png" alt="春の画像"></a></div> <div class="thumb natsu"><a href="#"><img src="img/natsu.png" alt="夏の画像"></a></div> <div class="thumb aki"><a href="#"><img src="img/aki.png" alt="秋の画像"></a></div> <div class="thumb fuyu"><a href="#"><img src="img/fuyu.png" alt="冬の画像"></a></div> <div class="thumb haru jitensya"><a href="#"><img src="img/haru.png" alt="春と自転車の画像"></a></div> <div class="thumb natsu umi"><a href="#"><img src="img/natsu.png" alt="夏と海の画像"></a></div> <div class="thumb aki koibito"><a href="#"><img src="img/aki.png" alt="秋と恋人の画像"></a></div> <div class="thumb fuyu yuki"><a href="#"><img src="img/fuyu.png" alt="冬と雪の画像"></a></div> </div> とりあえずid="content"内に全画像（サムネイル）を配置（表示）しておき、以下のようなことを行いたいのですが… id="haru" クリック時、class="haru"以外の要素に"display:none;"を追加… id="natsu" クリック時、class"natsu"以外の要素に"display:none;"を追加… id="aki" クリック時、class="aki"以外の要素に"display:none;"を追加… id="fuyu" クリック時、class="fuyu"以外の要素に"display:none;"を追加… id="jitensya"… id="umi"… id="koibito"… id="yuki"… classをタグのように使い、画像の表示と非表示を切り替える上手い手を探しております。jQueryでdisplay:noneを追加したり、toggleを使って元の状態に戻したりすることは可能でしたが、haruクリック後にnatsuをクリックすると期待通りに動きが得られなかったりと、60のおじいちゃんにはお手上げです。 解決法をjQueryの達人にご教授頂ければ幸いです。if文と呼ばれる、showの時にhide、hideの時はshowなど、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。

  • 見出しタグのつけ方について

    見出しタグのつけ方について 見出しタグのつけ方が今一、理解できません。 下記のようなページの場合、適切な見出しタグのつけ方で適切なのはどれでしょうか？ それとも、この３つの中には適切なのはないでしょうか？ （特に、メニュー項目をどういう位置づけにしたらいいかがわかりません） 初歩的な質問ですが、よろしくお願い致します。 (1)h1・・・サイトの説明文 　h2・・・サイト名 　h3・・・Welcame,更新情報,関連リンク (2)h1・・・サイトの説明文 　h2・・・Welcame,更新情報,関連リンク (3)h1・・・サイトの説明文 　h2・・・HOME,ABOUT,WORKS,ACCESS,CONTACT 　h3・・・Welcame,更新情報,関連リンク --------------HTML------------------- <body> <div id="header"> <div id="logo_box">サイト名</div> <h1>サイトの説明文 </h1> <ul id="header_navi" class="clearfix"> <li> <a href="#">HOME</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">WORKS</a> </li> <li> <a href="#">ACCESS</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> </div> <div id="inner" class="clearfix"> <div id="contents"> <h3>Welcame</h3> <p>TEXT　TEXT</p> </div> <div id="right"> <h3>更新情報</h3> <p>TEXT　TEXT</p> <h3>関連リンク</h3> <p>TEXT　TEXT</p> </div> </div> </body> ----------------------------------------------------

    • ベストアンサー
    • HTML
  • javascriptによる画像切り替えについて2

    javascriptによる画像切り替えについて2 先日に引き続きjavascriptによる画像切り替えについての質問です。 http://okwave.jp/qa/q5622789.html 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいと考えました。 fujillinさんのアドバイスと http://www.ziyotoy.net/lab/multi_rollover/# を参考に以下のようなソースである程度やりたかったことができたのですが、若干の変更をしたいものの初心者のためどうすればよいかわかりません。 ご助言いただけないでしょうか？ 現行のソース ◆外部js http://www.ziyotoy.net/lab/multi_rollover/# に掲載されています（長くてこのスペースに書ききれないので…） ◆header内js <script type="text/javascript"> //切り替え対象を指定（id） var mr = new MultiRollover("main_img"); //ロールオーバー対象を指定（id） mr.addTarget("navi"); //切り替え画像を指定（画像へのパス） mr.addSource("./img/main_img_02.jpg", "./img/main_img_03.jpg", "./img/main_img_04.jpg", "./img/main_img_05.jpg", "./img/main_img_06.jpg"); mr.observe(window, "load", mr, mr.create); </script> ◆html <img src="img/main_img_01.jpg" alt="メインイメージ" id="main_img" /> <ul id="navi"> <li><a href="../aboutus/index.html" id="thumb2"><img src="../img/menu_02.jpg" alt="ボタン1" /></a></li> <li><a href="../aboutus/index.html#where" id="thumb3"><img src="../img/menu_03.jpg" alt="ボタン2" /></a></li> <li><a href="../staff/index.html" id="thumb4"><img src="../img/menu_04.jpg" alt="ボタン3" /></a></li> <li><a href="../menu/index.html" id="thumb5"><img src="../img/menu_05.jpg" alt="ボタン4" /></a></li> <li><a href="../event/index.html" id="thumb6"><img src="../img/menu_06.jpg" alt="ボタン5" /></a></li> </ul> この状態でボタンにロールオーバーでid="main_img"の画像を切り替えることができるようになりましたが、ロールアウトしたときに最初のmain_img_01.jpgに戻したいのにmain_img_02.jpgになってしまいます。 ロールアウトしたらmain_img_01.jpgに戻るようにするにはどこを変更したらよいのでしょうか？ http://www.ziyotoy.net/lab/multi_rollover/# の管理者様に質問できればと思ったのですが、ブログのコメント等も受け付けていらっしゃらないようなので、ここで質問させていただきます。 どなたかご助言をお願いいたします。

  • Liで背景画像が表示されない

    よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する