• 締切済み

IEだとマウスオーバー時に画像の位置が下がる

http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle demo⇒http://line25.com/wp-content/uploads/2010/slideshow/demo/demo.html こちらのサイトのスライドショーのスクリプトを使用したいのですが、 IEで見ると、マウスオーバー時にスライドの位置が下がります。 これを解消するにはどうすればよろしいでしょうか。 ご回答よろしくお願いいたします。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

CSS定義で、<ul id="nav">のpositionをabsoluteにしておく。 div#slideshow ul#nav { display: none; list-style: none; //position: relative; position: absolute; 　　　　　　　　top: 210px; 　　　　　　　　 z-index: 15; }

yyyyyyyy8
質問者

補足

早速の回答ありがとうございます！ IE8ですと無事解決できました。 ですがIE6ですと、今度はマウスオーバーで位置が上にずれるようになってしまいました。 こちらの現象も解決法はございますでしょうか。

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

関連するQ&A

  • GallerifficというjQueryはIE7で

    GallerifficというjQueryを使ってスライドショーを設置しています。 http://www.twospy.com/galleriffic/ IE7よりも古いバージョンで見ると、レイアウトがぐちゃぐちゃに崩れてしまいます。 このjQueryはIE7では使えないのでしょうか？ いろいろ調べていると英語の情報で、「div.slideshow img」にposition: absolute;やposition: relative;を追加しろと出てきますが、レイアウトが崩れるのはjQueryの問題ではなくCSSの問題なのでしょうか？ 詳しい方教えていただけると幸いです。

  • マウスオーバすると画像の配置が変わる

    今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。 サイト：http://snapkidz.biz/wp/ ブルブルする場所はコップの部分になります。 記載部分は以下です。 ーheader.phpー <a href="#" class="cup">cup</a> ーCSSー a.cup { display: block; width: 90px; /* 画像1枚分の横幅 */ height: 110px; /* 画像1枚分の高さ */ text-indent: -9999px; /* 文字を見えなくする */ background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */ position:relative; top:303px; left:1080px; } a.cup:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ } マウスオーバすると画像の配置が移動してしまいます。 これはどうすればなおるのでしょうか？ 宜しくお願いします。

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

  • この画像のキャラクターを探してます

    この画像の白髪の女の子のキャラクターの名前を教えてください。img.vipcle.com/wp-content/uploads/2014/04/news4vip_1396094834_6602.jpg

  • 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では１行しか該当しているものがないので、nextでは読み込まれないように思うのですが・・・ よろしくお願い致します。

  • 画像ファイルの名前をそのままURLにする

    名前が日本語の画像ファイルがあります。 そのファイルをWordPressにアップロードしたとき、 画像ファイルのURLを元の日本語のものにしたいです。 画像ファイルの名前→ああああ-1.jpg ↓WPにアップロード https://www.〇〇.com/wp-content/uploads/ああああ-1.jpg 普通にアップロードすると、 https://www.〇〇.com/wp-content/uploads/25d65154cf8d425c0f19a2.jpg みたいな数字とアルファベットの組み合わせになります。 これを、元の日本語の名前にしたということであります。 これはどのようにすればできますでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • jQuery Cycle Pluginについて

    jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）を使用して、8枚の画像を次々と表示するスライドショーを実装しました。 1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。 知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。 どうぞ宜しくお願いいたします。

  • このフォトはどうやって撮影したのでしょうか？

    https://junjikumano.com/wp/wp-content/uploads/2018/10/junjikumano_top_01-compress.jpg 惚れ惚れする写真ですが、どうやって撮影したのでしょうか？

  • プルダウンメニューについて

    知人から頼まれホームページを作成しています。 javascriptでプルダウンメニューと打ち出し画像の両方を使うとうまく表示されません。 グローバルナビゲーション（プルダウンメニュー）のすぐ下に打ち出し画像がくるレイアウトになります。 打ち出し画像が邪魔をしてプルダウンのサブメニューが表示されません。 【プルダウンメニュー】 http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html 【打ち出し画像】 http://jonraasch.com/blog/a-simple-jquery-slideshow 上記の2つを組み合わせ、プルダウンの伸びたメニューが打ち出し画像に重なり、動かすことは可能でしょうか？ HTMLとCSSの知識はありますが、プログラムの知識はありません。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する