jqueryで要素を別要素に表示したいが重なる
- jqueryを使用して要素を別要素に表示する際に、重なって表示される問題が発生しています。
- 重なりを避けるためには、クリックした要素に対して表示する要素を切り替えるプログラムを修正する必要があります。
- 具体的な修正方法は不明ですが、非表示に設定している要素を表示する際に同じ処理を適用する必要があるでしょう。
- ベストアンサー
jqueryで要素を別要素に表示したいが重なる
jqueryには詳しくないのですが、必要に迫られて下記のようなページを制作しています。 構造 1）menu画像をクリックすれば gazouboxでその画像が大きく表示され、（A,B) 2）別のmenu画像をクリックすれば contentの画像が変わり、（a1,a2,a3 → b1,b2,b3) 3)contentの画像をクリックすれば itemshowのDiv内に画像名と同じｓｒｃ．htmlが表示され、 4）それとともに そのcartの内容がcartpanelに表示されます。 実際のページではcartの内容は ショッピングカートのscriptタグを記載します。 ネットで調べて悪戦苦闘しながら上記の構造で動作するところまで漕ぎつけたのですが、 このHTMLでは 「・・のカートタグ」という文字が順に表示されますが 私の製作中のページでは積み重なります。 cartpanelにショッピングカートが表示されて、同一場所に重なって表示されていくので、 クリックした分だけ商品価格の部分が重なって行って 価格が読み取れなくなります。 恐らく、非表示にしているcartを画像クリックでcartpanelに表示するとき、 画像のclassに設定したsrcを cartの処理に同じように使えていないのが問題だろうとは思うのですが、 何日もネット検索しながらいろいろ調べては試してみたものの 基礎知識がないため解決できませんでした。 ページの必要最低限を書き出してみました。 contents画像（．switchButton）をクリックしたら、 そのクリックした画像用の cart だけが cartpanel に表示され 別の画像をクリックしたら 次の画像用のカートに切り替わってくれるようにするには プログラムをどのように修正すればよいでしょうか？ お手数かけますがご指導よろしくお願いいたします。 ---------------------------------------------------------------- <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <title>無題ドキュメント</title> <style type="text/css"> .full_content { position: relative; float: left;} .switchButton {list-style-type: none;} .menu{ width: 120px; height: 120px; list-style: none; text-align: center; display: block !important; cursor: pointer; border: 1px solid #F66; margin-top: 3px;} .menu:first-child {margin-left:0;} .hover { font-weight: bold; display: block !important;} .content { width: 100px; height: 200px; position: absolute; top: 250px;} .cartpanel { height: 200px; width: 150px;} .menu img { height: 120px; width: 120px;} #gazoubox { height: 200px; width: 200px; float: left; border: 1px solid #6F6; margin-bottom: 100px;} </style> <script type="text/javascript"> $(function () { $('#big').attr('src', $('.menu img:first').attr('src')); $('.menu img').click(function () { $('#big').attr('src', $(this).attr('src')); }); }); $ (function(){ $ (".content:not('.hover + .content')").hide(); $ (".menu").click(function(){ $(".menu").removeClass("hover"); $(this).addClass("hover"); $(".content:not('.hover + .content')").fadeOut(); $(".hover + .content").fadeIn(); }); }); $(document).ready(function(){ $('.itemshow').load('A.html'); $(".cart").css("visibility", "hidden"); $('.switchButton').click(function(){ var loadContents = $(this).attr('src'); $('.itemshow').load(loadContents+'.html'); ($(this).find(".cart").css("visibility", "visible")).appendTo('.cartpanel'); }); }); </script> <div id="gazoubox"><img id="big" /></div> <div class="itemshow"></div> <div class="cartpanel"></div> <div class="full_content"> <div class="menu hover"><img src="img/A.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="a1"><img src="img/a1.jpg" /> <div class="cart" src="a1">a1のカートタグ</div> </li> <li class="switchButton" src="a2"><img src="img/a2.jpg" /> <div class="cart" src="gk-pch-kuro">a2のカートタグ</div> </li> <li class="switchButton" src="a3"><img src="img/a3.jpg" /> <div class="cart" src="gk-pch-kuro">a3のカートタグ</div> </li> </ul></div> <div class="menu"><img src="img/B.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="b1"><img src="img/b1.jpg" /> <div class="cart" src="a1">b1のカートタグ</div> </li> <li class="switchButton" src="b2"><img src="img/b2.jpg" /> <div class="cart" src="b2">b2のカートタグ</div> </li> <li class="switchButton" src="b3"><img src="img/b3.jpg" /> <div class="cart" src="b3">b3のカートタグ</div> </li> </ul></div> </div> </body>
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
いまいち動作の理解ができていないのですが、 カートとおっしゃっていますが商品のではないのでしょうか？ とりあえず書いてみたのでjavascriptの部分を下記にしてみてください。 ※ $('.switchButton').click(function(){})内のみ書きなおしています。 ※ $(function (){ や $(document).ready(function(){は何度も書かなくてよいです。 ※ 表示非表示は show(), hide()を使うのが簡単かと思います。 $(function () { $('#big').attr('src', $('.menu img:first').attr('src')); $('.menu img').click(function () { $('#big').attr('src', $(this).attr('src')); }); $ (".content:not('.hover + .content')").hide(); $ (".menu").click(function(){ $(".menu").removeClass("hover"); $(this).addClass("hover"); $(".content:not('.hover + .content')").fadeOut(); $(".hover + .content").fadeIn(); }); $('.itemshow').load('A.html'); $(".cart").hide(); $('.switchButton').click(function(){ var loadContents = $(this).attr('src'); $('.itemshow').load(loadContents+'.html'); $obj = $(this).find(".cart").clone(); $(".cartpanel").empty(); $('.cartpanel').append($obj.show()); }); });
関連するQ&A
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
- jquery 要素数に応じたwidthの取得方法
ご質問です。 下記の様なソースで、リストの数がページにより変わります。 <div class="wrap" style="width:○○px"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> これをjqueryで取得して、width:○○pxに入れる方法を知りたいです。 画像のwidthは、共通です。 ご存知の方いらっしゃれば、ご教授をお願いいたします。
- 締切済み
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- 締切済み
- CSS
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- jquery スライダーが動かない
昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。 問題のサイト：http://snapkidz.biz/wp/ 先日の質問：http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。 <!-- External files --> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <!-- Favicon, Thumbnail image --> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?> <!-- ======================================= スライダーテスト ======================================= --> <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> <a href="#" id="slide-prev">«</a><a href="#" id="slide-next">»</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。 スライダーダウンロード元：http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか？ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- jquery ドロップダウン・メニュー
jquery ドロップダウン・メニュー ドロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、 思うように表示が出来ません。 どうしたらいいのか、教えてください。 <script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('li.twitter').click(function() { if ($(this).hasClass('click')) { $(this).removeClass('click'); } else { $('.click').removeClass('click'); $(this).addClass('click'); } }); $('div.drop').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script> <div id="feed"> <ul class="aux"> <li class="rss1"> <a href="http">RSS1</a> </li> <li class="rss2"> <a href="http">RSS2</a> </li> <li class="rss3"> <a href="http">RSS3</a> </li> <li class="twitter"> <a href="#"><span>Twitter</span></a> <div class="drop"> <p><strong>TW1</strong> <a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a> </p> <p> <strong>TW2</strong> <a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a> </p> </div> </li> </ul> </div>
- ベストアンサー
- JavaScript
- 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など、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。
- 締切済み
- JavaScript
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
お礼
ONEONE様 ありがとうございます！ 希望していた通りの動作になりました。 知識がないもので色々なサイトを調べたものの emptyやappendといったDOM操作があるということにさえ行き着きませんでした。 本当に感謝しています。有難うございました。