- 締切済み
画像の交換について
ESateの回答
- ESate
- ベストアンサー率64% (11/17)
画像の交換法則 ○○0.jpg ⇔ ○○1.jpg ○○2.jpg ⇔ ○○3.jpg 要は2n ⇔ 2n+1です document.onclick = function(e){ e = e || window.event; var ele = e.target || e.srcElement; if(ele.tagName != 'IMG') return; // imgタグ以外無視 var path = ele.src; var x = path.match(/(.+)(\d)(\.jpg|\.png|\.gif)/); if(!x) return; // 拡張子のまえに数字が入ってない場合は無視 var same = new Array; var imgs = document.getElementsByTagName('img'); for(var i=0;i<imgs.length;i++) if(path == imgs[i].src) same.push(imgs[i]); x[2] ^= 1; path = x.slice(1).join(''); ele.src = path; if(same.length) for(var i=0;i<same.length;i++) same[i].src = path; } ファイル名管理がしっかりしていないと不具合がでる場合があります
関連するQ&A
- タブ画像を切り替えてクッキー保存
タブ画像を切り替えるようなことをJavaで行うにはどうすればよいでしょうか？ 下記のようなAのタブとBのタブが２つあるとして、最初のページアクセスではAのタブがオンになっています。 画像はAとBそれぞれにオン・オフがあり、4つの画像を使用します。 ＿＿[ A-オン]＿[B-オフ]＿＿ ←デフォルト ここでB-オフの画像をクリックすると、 ＿＿[ A-オフ]＿[B-オン]＿＿ ←こうなる という風にオンクリックで切り替えることができるようにしたいと考えています。 もちろん、逆にBからAに切り替えることもできるようにしたいです。 （オンになっている方のタブをクリックしてもそのまま画像は変わらない） そして、切り替えた状態をクッキーに保存し、再度アクセスした時も切り替わったままになっていると嬉しいです。 このタブ（まったく同じもの）を複数のページの同じ箇所に設置したいのですが、 ページ１で切り替えた後、ページ２にアクセスしたとして、ページ２でも切り替わった状態で表示されると完璧です。 このようなことが可能でしょうか？どなたかご教授いただけると幸いです。よろしくお願いします。
- ベストアンサー
- JavaScript
- サムネイルクリックで別ウィンドウに拡大画像表示
javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- PHPでPDFを画像で表示したい
レンタルサーバ（lolipop）でディレクトリに置いてあるPDFファイルを画像として表示したいと思ってますが、何故PHP初心者の為、ネットで探してみましたが、エラーになりなかなか上手くいきません。 おわかりになる方、宜しくお願い致します。 あるディレクトリに複数のPDFファイルがあります（ページ数はすべて1ページのみ） そのPDFを画像としてブラウザに並べて表示して、クリックすると実際のPDFが表示されるしくみを作りたいです。 解り難い表現でしたら、申し訳ありません。 お解かりになる方、宜しくお願い致します。
- 締切済み
- PHP
- 小窓を出したい。
画像が多いHPを作成中です。 １つのページに画像をいくつか入れるよりも、 小さい画像をクリックすると、大きな画像で見れるようにした方がいいと聞きました。 そこで、Java Scriptを使って小窓で見れるようにしたいと思いました。 １ページにテーブルを作り、画像をいくつか入れているのですが、１画像ごとに小窓で見れるようにしたいのです。 Aの画像をクリック→小窓A Bの画像をクリック→小窓B ↑ のように、違う小窓が出てくるようにしたい。 色々と画像が多いHPを作成中です。 １つのページに画像をいくつか入れるよりも、 小さい画像をクリックすると、大きな画像で見れるようにした方がいいと聞きました。 そこで、Java Scriptを使って小窓で見れるようにしたいと思いました。 １ページにテーブルを作り、画像をいくつか入れているのですが、１画像ごとに小窓で見れるようにしたいのです。 Aの画像をクリック→小窓A Bの画像をクリック→小窓B ↑ のように、違う小窓が出てくるようにしたいのです。 Java Scriptを使うのはまったく初めてなのですが、 上記の場合のJava Scriptの書き方えを教えて下さい。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- リンクで画像を置き換えたい
初心者ですが、よろしくお願いします。 たとえば 001.jpg 002.jpg 003.jpg という３つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ～省略～ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像１，２，３のリンクをクリックすることで、 ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、 ご教授願いないでしょうか？ 要望としては、切替候補の複数の画像は ページをロードしたときに最初に全て読み込んでおいて、 リンククリック時の画像の切替をスピーディにしたいと考えています。 サンプルの上記例にそくしたサンプルのコードなどを 回答いただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- クリックによる画像の入れ替え処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。 クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でできるような気がするが、サンプルとなるものがなく、書き方がわからない。 （調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした） 上記について、ご回答よろしくお願いします。
- 締切済み
- JavaScript
- オンマウスで2箇所の画像を変えたい
似た内容の質問をいくつか拝見したのですが、どうしても解決できず…よろしくお願いいたします。 □ ←画像Ａ ----------- □ ←画像Ｂ □ ←画像Ｃ □ ←画像Ｄ ・（以下同型のものが複数） ・ とある時に、 画像Ｂをオンマウスで画像Ａ→画像A-1、かつ、画像Ｂ→画像Ｂ’ 画像Ｃをオンマウスで画像Ａ→画像A-2、かつ、画像Ｃ→画像Ｃ’ 画像Ｄをオンマウスで画像Ａ→画像A-3、かつ、画像Ｄ→画像Ｄ’ となるようにしたいのです。 関係ないかもしれませんが、画像Ｂ～はリンクになっていて、他ページへ飛ぶようになっております。 皆様、どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- photoshopCS3で、開いている複数の画像が一緒に拡大・縮小してしまう。
MacOSX10.5でphotoshopCS3を使用しております。 昨日からズームの機能が突然おかしくなってしまいました。 特に設定を変えた記憶はございません。 具体的に言うと、複数の画像を開いているとき、 （今回、A、B、Cの３つの画像を開いているとします） Aをアクティブにして作業している際、虫眼鏡で画像を拡大すると、 アクティブでないB、Cの画像まで一緒に拡大してしまいます。 shiftキーを押しながら作業している訳でなく、虫眼鏡→クリック、 あるいは虫眼鏡→altを押しながらクリック しているだけなのに、複数の画像が一緒に拡大したり縮小したりしてしまいます。 今回の例の場合、Aのみを拡大して作業したいのに、 Bの画像も一緒に拡大してしまうので、Bを作業しやすいもとの比率に戻そうと虫眼鏡ツールで縮小するとAも縮小してしまい、 複数の画像を開いて並行して作業するのが大変になってしまいました。 photoshopCS3を再インストールしたものの改善されません。 photoshopはcreative suite3 design premiumで一括で入れたソフトの一つなので、 一度全てのアドビコンポーネントをアンインストール後、 creative suite3を再インストールすべきでしょうか。 どなたか解決方法や原因をご存知の方、教えていただけないでしょうか。 よろしくお願い致します。
- 締切済み
- その他(ソフトウェア)
- クリックして変更した画像を他の画像をクリックしたとき戻すには？
以前、別で下記のような質問がありました。 ●質問－－－－－－－－－－－－－－－－－－－ 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか？ どなたかご教授おねがいします。 －－－－－－－－－－－－－－－－－－－－－－ 上記の質問を受けての回答が下記のような感じで ●回答－－－－－－－－－－－－－－－－－－－ <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> －－－－－－－－－－－－－－－－－－－－－－ これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryを使ったブロック外の画像変化
いくつか候補としてパターンをあげたいのですが知識不足で具体案が浮かばないので質問参りました。 参照や情報程度でもかまいませんのでよろしくお願いします。 町名の一覧（テキスト）と、地図画像の２つブロックがある状態で、町名をポイントすると地図の該当箇所の色が変わる（hover用画像を作るでも四角い領域で色を乗せるでもよい）、という仕組みを作りたいのですが、以下質問です。 １，jQueryでロールオーバーさせるのが一番簡単だと聞きましたが「jquery ロールオーバー」で調べてはみましたが希望する情報がありませんでした。調べる方向が間違ってるのでしょうか（こういう検索をしろ、みたいなのでかまいません） ２ javaScript以外で上記仕組みを行うことは可能でしょうか。 ※対応する画像は１つではなく、ページによって複数枚の場合もあります。（テキスト１～５まで画像Aの中に変化する箇所があり、テキスト６～８が画像B、など）
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 ぜひ参考にさせていただきたく思います。 相当勉強になります…(汗)