jQueryでCSSの背景画像を切り替えたい
- jQueryを使用してCSSの背景画像を切り替える方法を知りたい。
- WordPress環境での相対パスでの背景画像の指定方法がわからない。
- jQueryで指定する変更後の背景画像を絶対パスに変更したら上手くいった。
- ベストアンサー
jQueryでCSSの背景画像を切り替えたい
見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg
- Reiseipasuta
- お礼率100% (2/2)
- CSS
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jQueryに限った事ではありませんが。 ・ページのHEAD内に記述する場合、そのページ（HTMLファイル）からの相対パス。 ・外部JSからの読み込む場合、そのJSファイルからの相対パス。 ～と言う事で。それでも上手くいかないのであれば、何か他に原因があるかもです。
関連するQ&A
- CSSでの背景の指定について教えてください。
背景がうまく指定できません。よろしくお願いします。 フォルダ（img)の中にbana(ファイル名）750×100のjpgの画像が置いてあります。 CSSの指定は #head{ width:750px; height:100px; background-color:#ffffff; background-image:url(../img/bana.jpg); border-bottom:#999999 solid 1px; } HTMLは <div id="head"> <h1>・・・・・・</h1> </div> です。色々と試してみたのですが、背景が入ってくれません。 初心者ですので説明不足かもしれませんが よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- jQueryで背景画像を変更したい。
ブロック要素がありまして（下記<div id="box">boxの中身</div>） そのブロック要素の背景画像(背景は動的に生成)を 別の画像に変えたいと思っています。 ※現行のPCサイトのHTMLをいじらずに、スマホ対応しています 背景画像としては、 現在の背景画像⇒haikei.jpg 新しい背景画像⇒haikei_smp.jpg ↑こんな感じで ファイル名の「haikei」の部分は動的に生成しているため可変ですが、 もとの画像に「_smp」が付く画像ファイルを用意して、 対応したい考えています。 特にイベントはなく、loadしたら読み込む予定でいて 以下のように書いたのですが、 PC上のシミュレーターではうまくいくものの、 実際のスマートフォンで確認したら実行できませんでした。 PC上ではエラーもなかったのですが、 背景画像が変わらないといった不具合です。 HTML ---------------------- <div id="box">boxの中身</div> js ----------------------- $(function(){ //mainbgに現在の背景画像を格納 var mainbg = $("#box").css("background-image") //mainbgを(".")で分割し、bgImgに格納 bgImg = mainbg.split("."); var img01 = bgImg[0]; var img02 = bgImg[1]; //「_smp」を付与し、smp_mainbgに格納 var smp_mainbg = img01 + "_smp." + img02 ; //jQueryでbackground-imageを変更操作 $("#box").css("background-image" , smp_mainbg); }); そもそも、この書き方がよいのか分かりませんが もっとスマートの書き方がありましたら 別の方法でも、どうかご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
- jQueryにて背景のURLを取得
jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50％に縮小するにはjavascriptをどうすればいいのでしょうか？ 【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>
- ベストアンサー
- AJAX
- CSSでの画像指定について。
CSSでの画像指定について。 ファイルパスの指定について教えてください。 フォルダ１の中に「sample.html」、「sample.css」、「img」フォルダが入っており、 「img」フォルダの中に、「nature_01.gif」が入っています（下図）。 -------------------------------------------------------------------------- フォルダ１ L sample.html L sample.css L img（フォルダ） img(フォルダ) L nature_01.gif ---------------------------------------------------------------------------- このファイル構成だと、sample.css の中で 『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い と理解していたのですが、背景に画像が表示されませんでした。 その後、下記のように修正すると、画像が表示されるようになりました。 firefox3.5 →修正後は画像が表示される。 Internet explore 8 →修正前、修正後ともに表示されない。 ----------------------------------------------------------------------- 【修正前】 #contents{ width:750px; background-image:url(/img/nature_01.gif); 【修正後】 #contents{ width:750px; background-image:url(../img/nature_01.gif); ------------------------------------------------------------------------ OS・・・windows xp なぜ、こうなるのか、わかるかたがいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- cssで画像のパスを指定する場合
cssで画像のパスを指定する場合は、background-imageでいいのでしょうか？ 今は img.sample { background-image: url("http://test.jpg") のようにやっていますが 昔やった方法は background-image ではなく srcを使っていた気がします。 background-imageでも問題なく表示されますが、 <img class="sample"> のように、imgタグを使っているのだから、srcのほうがいいのかな、と思ってしまいます。 実際はどちらがいいのでしょうか？
- 締切済み
- CSS
- cssの画像切り替え
宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl"> <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt> <dd>あ</dd> </dl> ○css #dl { width: 170px; height: 170px; margin: 0; } #dt a { text-decoration: none; } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none; } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="～">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="～">からの切り替えを行いたいです。 そもそも、html指定の、<img src="～">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。
- ベストアンサー
- HTML
- 画像スライドショー用のjQueryを埋め込みたい
画像スライドショー用のjQueryを埋め込みがしたいです。 埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？ またデレクトリーはどこにいれればいいのでしょうか？？ 基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- jQuery:要素の位置情報の保持について
jQuery:要素の位置情報の保持について 現在、IE8,jQuery 1.4.1,jQuery UI 1.8.1の環境でWebアプリケーションの作成を行っています。 画像ファイルを（マウスの）ドラッグで移動させ、ドロップした後の位置情報を保持し、再びそのWebアプリケーションを起動させた時に画像ファイルが移動した後の位置のままというようにしたいと考えています。 このようなことは可能でしょうか？ もし可能な場合、何か参考となるコードやキーワードを教えていただけないでしょうか？ 画像ファイルを移動させる事までは確認しましたので載せておきます。 <html> <head> <title>ドラッグで要素移動title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" language="JavaScript"><!-- $(function () { $("img.mover").draggable({ opacity: 0.5, cursor: "move", grid: [20, 20], stop: function () { var x = $(this).css("left");//この値をどこかで保持しておきたい var y = $(this).css("top");//この値をどこかで保持しておきたい alert("左：" + x + "、上：" + y ); } }); }); //--></script> </head> <body> <img src="pic1.jpg" class="mover" alt="test" /> <img src="pic2.jpg" class="mover" alt="test" /> <img src="pic3.jpg" class="mover" alt="test" /> </body> </html>
- 締切済み
- AJAX
お礼
外部JSにした場合どのファイルから見た相対パスを打てばいいのか分からなかったので、非常に助かりました。 当方の事例の場合、外部JS(change.js)から見た画像の相対パスは「../img/pic2.jpg」になると思い試してみたところ、動作しませんでした。 続いて検証として全てのファイルを同階層に移し、パス指定をファイル名のみに変えても動作せず…何かがオカシイですね…。 WordPress環境下の為コレが原因かなと思い、change.js内のパスを「/wordpress/wp-content/themes/テーマフォルダ/img/pic2.jpg」に変更したところようやく画像の切替ができました。 なぜ上記のパスが必要かは理解できていません。精進します。 早速のご回答、誠にありがとうございました。