- 締切済み
Lightbox2.0にてnext、prev画像が表示されない
タイトル通りなのですが、ホームページにてLightbox2.0を使用しているのですが、next、prev画像が表示されません。 パスを変更してclose、loading画像は表示できたのですが、他に変更するところはあるのでしょうか？ lightbox.cssにて #prevLink:hover, #prevLink:visited:hover { background: url(/images/nextlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/images/prevlabel.gif) right 15% no-repeat; } こちらにてパスを変更しましたがIE、Firefoxどちらとも表示されず・・・ どうすれば表示できるのでしょうか？
- one-two
- お礼率18% (2/11)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- DOUGLAS_
- ベストアンサー率74% (397/534)
＞パスを変更してclose、loading画像は表示できた fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif', の２行の中の「images/」をなにがしかの表記（パス、例えば「●▲/」）に変更されたと存じますが、それと同様に、 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } の２行の中の「../images/」を「●▲/」に変更してみられてはいかがでしょうか？
関連するQ&A
- Lightbox2.0をウェブリブログ(BIGLOBE)で使用するには。
この度、ウェブリブログでブログを始めて、Lightbox2.0を導入しようと試みているのですが 試行錯誤してみても結果、中途半端なできになり行き詰ってしまったので質問させていただきます。 長いですが、お知恵を貸していただけると大変助かります。よろしくお願いしますm(_ _)m (1)ダウンロードしてきたファイルは、ウェブリブログではディレクトリ管理できないし、js、cssはUP自体出来ないので、 他で借りていた有料サーバー(FC2ホームページ)に全て纏めてUPしました。 (http://○○○/js/)(http://○○○/images/)(http://○○○/css/) (2)htmlはウェブリブログでは直接編集できないのでウェブリブログのフリースペースに書き足しました。 ( <script type="text/javascript" src="http://○○○/js/prototype.js"></script> <script type="text/javascript" src="http://○○○/js/scriptaculous.js"?load=effects,builder></script> <script type="text/javascript" src="http://○○○/js/lightbox.js"></script> <link rel="stylesheet" href="http://○○○/css/lightbox.css" type="text/css" media="screen" />) (ここに書いたショートカットアイコンも機能しているので大丈夫なようです。) (3)解説サイトに倣ってlightbox.csを2箇所書き換え ( #prevLink:hover, #prevLink:visited:hover { background: url(http://○○○/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://○○○/images/nextlabel.gif) right 15% no-repeat; } ) (4)同じくlightbox.jsを4箇所書き換え fileLoadingImage: 'http://○○○/images/loading.gif', fileBottomNavCloseImage: 'http://○○○/images/closelabel.gif', <img src="○○○/images/loading.gif"> <img src="○○○/images/close.gif"> そして、Firefoxで確認してみると右下に出る筈のclose×ボタンが出ない…。IE6ではnext画像とplev画像が表示されていない。 試しに(4)のloading.gifとcloselabel.gifをウェブリブログにUP。絶対パスで書き換え。 すると、何故かは分からないがFirefoxIE6ともにcloseボタンが正常に表示されました。 しかし、IE6で確認してみると今度はこちらでprevlabel.gifとnextlabel.gifが表示されていない…。 ウェブリブログにUP。絶対パスで書き換えをしてみると今度はFirefoxで表示されない。結局Firefox優先ということで戻しました。 そして何気なくoperaで見てみると、新しい不具合…。 表示はされるのだがページの下の方。スクロールしていかないと見れない。最初は背景がグレーになるだけだ！と思ったほど。 以上、分かりにくい文章だとは思いますが、ご教示いただきたいと思います！よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- cssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります
いつもお世話になっております。 以下の様にcssを組みました。 〔ｃｓｓ〕 @charset "UTF-8"; #bnn0513 span { display:none; } #bnn0513 a { display:block; width:212px; height:102px; padding:0; background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:link { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:visited { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:hover { background-image:url(images/sample_ov.gif); background-repeat:no-repeat 0 0; } #bnn1 a:active { background-image:url(images/sample_on.gif); background-repeat:no-repeat 0 0; } 〔xhtml（一部）〕 <div id="bnn0513"> <a href="sample.html"><span>サンプル</span></a></div> CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。 一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。 一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか？ java等他のプログラミングが入っても構いませんので方法をご教授ください。 宜しくお願い致します。
- ベストアンサー
- HTML
- アメブロでのlightbox設置について
アメブロでのlightbox設置について教えてくださいませ。 アメブロにjQuery版のlightboxを設置したいと思い、下記の参考サイトさまの手順とおりに設定したのですが、画像がいつまでも読み込み中になりうまく表示されません。 http://ameblo.jp/new-bulue9/entry-10487238040.html 私が行った手順としては １：jQuery lightBox plugin 0.5をダウンロードし、フォルダ名を「Lightboxj5」に変更したのちレンタルサーバーにアップロード。 ２：下記プラグインの「ホームページのURL/」をレンタルサーバーのＵＲＬに書き換えて保存。 <!--■ jQuery Lightbox 5.0 ■--> <head> <link href="ホームページのURL/Lightboxj5/css/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" media="screen" /> <script src="ホームページのURL/Lightboxj5/js/jquery.js" type="text/javascript"></script> <script src="ホームページのURL/Lightboxj5/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('a[rel*=lightbox]').lightBox({ overlayBgColor:'#000009', overlayOpacity:0.6, imageLoading:'ホームページのURL/Lightboxj5/images/lightbox-ico-loading.gif', imageBtnClose:'ホームページのURL/Lightboxj5/images/lightbox-btn-close.gif', imageBtnPrev:'ホームページのURL/Lightboxj5/images/lightbox-btn-prev.gif', imageBtnNext:'ホームページのURL/Lightboxj5/images/lightbox-btn-next.gif', containerResizeSpeed:350, txtImage:'画像：', txtOf:'／' }); }); </script> </head> <!--■■■■■■■■■--> ３：「ブログを書く」段階で画像にで指示されたとおりrel="lightbox"を a タグの最後に記述。 <a href="http://stat.ameba.jp/user_images/20100221/22/new … rel="lightbox"><img src="http://stat.ameba.jp/user_images/20100221/22/new … /></a> 以上です。他のプラグインとバッティングしている可能性も考え他をすべて削除して起動してみましたが、これも駄目でした。 稚拙な文章でわかりつらいかとは思いますが何卒お知恵をお貸しくださいませ。
- ベストアンサー
- ブログ
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
- リンクに画像
リンクに画像 ulのリストのリンクにカーソルを当てると左側に小さなアイコンが出るようにしました。 が、下のようにすると文字にかかってしまいます。 文字にかからないようにするにはどうすればいいでしょう？ padding-leftで文字をずらしたつもりが、画像まで一緒にずれてしまいます。 ul#indx li {margin:10px 0 0 0; padding-left:20px;} ul#indx a:hover{background-image: url("../images/sho-kira-f12.gif");background-repeat: no-repeat; background-position: center left;}
- ベストアンサー
- HTML
- IE6とXHTML+CSS
外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }
- 締切済み
- HTML
- ネスケでの背景表示に困ってます！（ＣＳＳ使用）
はじめまして！ 今手打ちでＨＰを作っているのですが、ネスケで動作確認をすると背景画像が テーブルのセルごとに表示されてしまって困ってます。 セルごとにリピートされている感じです。 背景画像の表示は、ＨＴＭＬにＣＳＳを組み込んで以下のようにしています。 table{ background-image : url(../images/***/***.gif); background-repeat : no-repeat; background-position : 50% 50%; } これだけだとＩＥでも背景が真っ白になってしまったので <table width="640" height="430" border=0 background="../images/***/***.gif"> も付け加えています。 この時点でなんだか怪しいのですが・・・ 初心者で、もうどうしたら良いか途方にくれて困っています。 説明がへたで本当に申し訳ないのですが、 どうか良きアドバイスをよろしくお願いします！
- ベストアンサー
- HTML
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- CSS
- リストの行頭に画像を使う方法について
こんにちは。nekotoraと申します。 CSSを使用して、リストの行頭に画像を表示させる方法を２つ試しました。 以下、スタイルシートの部分です。 ul.kajo {list-style-image:url(images/list04.gif); vertical-align:middle;} li.ban {list-style-type:none; padding-left:22px; background-image: url(images/list04.gif); background-repeat: no-repeat;} 前者の結果は、画像と文字の距離を変更することが できないようです。 後者の結果は、画像と文字の距離を変更できますが、 左側にマージンを設定したように引っ込んでしまい ます。 前者のように表示して、画像と文字の距離を変更 することは可能でしょうか？ どうぞよろしくお願い申し上げます。
- 締切済み
- HTML
