Firefoxでの画像表示位置が違う

このQ&Aのポイント
  • HP作成時での質問です、Firefoxでの画像表示位置についてご相談いただきました。
  • トップページに配置したイメージ画像が、IEとFirefoxで表示位置が異なる現象が発生しています。
  • スライドショーの動作自体は問題ありませんが、Firefoxでは画像が図の位置に表示されてしまいます。
回答を見る
  • ベストアンサー

firefoxでの画像の表示位置が違う

HP作成時での質問です、どうぞ宜しくお願い致します。 トップページにイメージ画像を配置し、それをjqueryというjavascriptで スライドショーさせる(計4枚を5秒ずつで切り換え、最後の画像でストップ)ようにしました。 作成後、プレビューするとスライドショーそのものの動作確認は問題ありませんでした。 が、ブラウザ上での表示位置に違いが出ました。 IEだと何の問題もありません(画像(1))。が、Firefoxだとその画像が図の位置にあるんです(画像(2))。 どちらのブラウザでもスライドショーはします。 使用したタグの記述としては以下の通りです。 --------------------------------------------------------- 【head内】 その(1) <style type="text/css"> <!-- #slideshow { position: relative; width: 800px; height: 250px; } #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; } --> </style> その(2) <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> その(3) <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ $(function() { function slideSwitch() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : null; if ($next !== null) { $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } else clearInterval(intervalID); } var intervalID = setInterval(slideSwitch, 5000); }); </script> --------------------------------------------------------- 【body内(の画像を置きたい場所)】 <TABLE border="0" width="800" height="250" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD <p id="slideshow" valign="middle" width="800" height="250"> <img src="images/top_image01.jpg" class="active"> <img src="images/top_image02.jpg"> <img src="images/top_image03.jpg"> <img src="images/top_image04.jpg"></TD> </TR> </TBODY> </TABLE> --------------------------------------------------------- ※ちなみにこのページをfirefoxでソース表示すると上記body内のこの部分が赤字表示されます。 <TD <p id="slideshow" valign="middle" width="800" height="250"> 見てわかると思いますが上記body内、</p>がありません。 メモ帳でtop_image04.jpg">の後に</p>を書いて上書きするのですが、その上でfirefoxで開いても やはり画像表示位置は違うままです。 さらに私は通常ホームページビルダーで作成しているのですが、 このソフト上でトップページを開くとエラー検出となり自動修正され、毎回この</p>が消えています。 (しかし</p>が無い状態でもIEでは問題無く正しい位置で表示されています) こういったことも今回の現象と何か関係があるのでしょうか。 以上の情報から、何か原因が特定出来るようでしたら、どうかお教え頂きたく存じます。 宜しくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • balloon23
  • ベストアンサー率69% (16/23)
回答No.2

TDの書き出し部分が閉じられていないからとかどうでしょう?   <TD <p id="slideshow" valign="middle" width="800" height="250"> ↓ <TD><p id="slideshow" valign="middle" width="800" height="250">   あと、pタグ内の余分なものはcssに移した方が検証しやすいかもです。 valignとかwidthとかheightとか。

love_la_dog
質問者

お礼

あまりにあっけない解決に目からとても大きなウロコが落ちました。 ものの見事に上手くいきました、素晴らしいです。 まさかあんな所を見落とすとは…頭を抱えていた昨日が嘘のようです。 CSSについてもそうですよね。おっしゃるとおりです。 基本、ソフト上で視覚的に適当にチャチャッと作っていくだけでタグの事はあまり意識しないので、 もっとタグを整理整頓する事を意識していかなければ、と思いました。 しかしじつに簡潔明瞭な答えとお優しいアドバイス、本当に助かりました。ありがとうございました。 ※親切にお教え下さったお二方とも、本当に本当にありがとうございました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

高い確率で、 >IEだと何の問題もありません(画像(1))。  ではなく、IEの動作がおかしい。 DOCTYPEを <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  とIEもウェブ標準で動作するように書き換えてみてください。  そもそもなぜtableを使う必要があるのですか?? 「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」  と繰り返し繰り返し言われ続けてきたこと。 <p id="slideshow">  <img src="images/top_image01.jpg" class="active">  <img src="images/top_image02.jpg">  <img src="images/top_image03.jpg">  <img src="images/top_image04.jpg"> </p> <style type="text/css"> <!-- p#slideshow { position: relative; width: 800px; margin:0 auto; height: 250px; } p#slideshow img { display:block; position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } p#slideshow img.active { z-index: 10; opacity: 1.0; } p#slideshow img.last-active { z-index: 9; } --> </style>

love_la_dog
質問者

お礼

書き忘れていました。 一行目の宣言もそのように記述していたのですが、 ソフトで開く度にエラー検出&自動修正でEN">以降が必ず消えるという現象もありました。 さて、お教え頂いた通りの記述を全て実行すると上手くいきました。 ご丁寧に全ての記述を書いて下さり真にありがとうございます。 テーブルについては、そういったセオリーの事など全く知りませんでした。 ただただ勉強不足で無知でお恥ずかしい限りです。 これまでソフトでの直感的な操作に依存し過ぎて騙し騙しやってきましたが、 駄目ですね。基礎の大切さを改めて痛感しました。 お教え頂いた事全て、的確かつ今後も作成していく上で必要な事柄として重く受け止めます。 ありがとうございました。

関連するQ&A

  • 教えてください!

    教えてください!jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか? コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- 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 ); }); よろしくおねがいします

    • ベストアンサー
    • CSS
  • 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> どなたか回答よろしくお願いいたします。

  • 一瞬画像が

    現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか? どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>

  • JQUERY slideshowについて

    slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで3枚の写真を動かしています。 で、トップページの写真を9枚にして、左3枚・真ん中3枚・右3枚というふうに動かしたいです。 トップイメージの写真(幅900px)3枚を トップイメージの写真(幅300px)×3を3枚スライドにする (意味不明ですか・・・) 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、CSSのZーindexを使っています。 現在のHTML <div id='slideshow01'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> 求めるHTML <div id='slideshow01'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> この js を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 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()", 4000 ); });

  • css、javascriptの外部化について

    <!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=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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()", 4000 ); }); </script> <!-- CSS --> <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p> <!-- CODE --> <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div> <!-- / CODE --> </div> </body> </html> 上記のソースをhtml、css、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、 お願いします 単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } 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()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎました よろしくお願いいたします

  • 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では読み込まれないように思うのですが・・・ よろしくお願い致します。

  • 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
  • リンク付きスライドショーの不具合について

    先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。 しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・ なんか不自然なので、急いで改善したいです。どうかご協力お願いします! つくったホームページ→http://www.geocities.jp/raisutei/ A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $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> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow a.active { z-index:10; opacity:1.0; } #slideshow a.last-active { z-index:9; } </style></head> <body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript" <table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a>&nbsp; <a href="http://www.geocities.jp/raisutei/okomeconsept.html"> <img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html"> <img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3">&nbsp;</a></div> </td> </tr> </tbody> </table> ※一部中略しました。

  • Firefoxでの画像の縦の隙間をなくしたい

    現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }

    • ベストアンサー
    • CSS
  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう