• 締切済み

javascriptで画像の切り替え

javascriptで下記のページの様にソートはしなくて構わないのでアイコンの動き、切り替えるだけをプラグイン等使わずに実装したいです。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ http://ikedaya.gejigeji.jp/anime/sinsaku_end-2011.html 詳しくは <th class="*****">をクリックしたらアイコン画像が切り替わる。 ※現状このclassにbackgroundで画像を表示しています。 1、デフォルトは上下▲▼の画像 2、押したら上▲画像 3、もう一度押したら下▼画像 それ以降は2～3の繰り返し。 ソートについては別の方がやっていただけるので動きだけをお願いしたいです。 できましたら至急教えていただきたいです；；

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

ANo2です 「背景」というのを見落としていました。m(__)m ＞※現状このclassにbackgroundで画像を表示しています。 とのことなので、 elm.src = status?"img2.gif":"img3.gif"; 　　　　　　　　↓ elm.style.backgroundImage = status?"url(btn2.gif)":"url(btn3.gif)"; みたいな感じで。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

要領のみですが… 実装は対象ブラウザに応じて修正を。 Array.prototype.map.call(document.querySelectorAll(".hoge"), function(elm){ 　var status = false; 　elm.addEventListener("click", function(evt){ 　　status = !status; 　　elm.src = status?"img2.gif":"img3.gif"; 　}, false); });

回答No.1

こんなん質問じゃなくって作成依頼じゃんよ。 http://lancers.jp ここで5,000円で作ってくれるよ

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

関連するQ&A

  • スクロールに沿ってjavascriptで背景画像を

    現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。

  • JavaScriptでのDIV間のスクロール

    JavaScriptの初心者です。 JavaScriptの実装方法について教えてください。 以下のようなhtmlがある場合に、JavaScriptの関数呼び出しによってbox間のスクロールをさせたいです。 例：yyyyyyyのboxで関数を呼ぶと、zzzzzzzzzzのboxまでスクロールする。 <div class="box">xxxxxxxxxxxxxxxxxxxxxxx</div> <div class="box">yyyyyyyyyyyyyyyyyyyyyyy</div> <div class="box">zzzzzzzzzzzzzzzzzzzzzzzzzz</div> class名が同一である場合にこのような処理を行うためには、各boxの座標を取得しておき、現在表示しているboxの上下のtop座標に移動させるような関数を実装すれば良いと考えています。 ですが、どのような実装をすれば良いか、試行錯誤していますがうまくいきません。 どなたかアドバイスをいただけるととてもうれしいです。

  • こんにちは、javascriptにてボタンを押すと画像が透明度が下がる

    こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。 ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を 元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class＝"fade1">のような タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。 適切な方法がありましたら、教えてください。よろしくお願いします。 【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });

  • jqueryによる画像切り替えのカスタマイズ

    jqueryによる画像切り替えのカスタマイズについて こちらのサイト（http://blog.net-king.com/）で、プラグインをダウンロードし、 設置・動作確認と基本的なことは完了しました。 オプションでの設定以外のことについてカスタマイズを試みたのですが、 知識不足で上手くいかず、お知恵を拝借できればと思い投稿いたしました。 実装したいカスタマイズ内容ですが、 そのままの状態だとページを開いたときにデフォルトで表示されるのは menu1の青い画像であるphoto01.jpgになっていますが こちらを任意の画像での表示にしたいのです。 （その際メニューの順番は変更なしでお願いします！） 何かご不明点等があれば補足をさせていただきます。 もしお分かりになる方がいらっしゃいましたらご教授いただければ幸いです。 どうぞ宜しくお願いいたします。

  • JS 疑似要素のアイコンをアニメーション

    JS 疑似要素のアイコンをアニメーション JavaScriptで疑似要素のアイコンをアニメーションさせます。 テーブルヘッダーにソート用のアイコンを付けました。 下記のような動作をさせるには、どのようなコードで書きますか？ （添付図は動作例） ＜仕様＞ ・アニメーションさせる項目名にクラス名「icon」を付けておく ・初期状態は、三角形アイコンを薄い色で表示 ・項目名のクリックでアイコンが赤く変わる ・もう一度クリックで青色の逆三角形に変わる ・同じ項目名をクリックするたびにトグル ・別の項目名のクリックで、直前のアイコンは初期状態に戻る ・ソート機能は付けていない。 <style> table { border-collapse: collapse; } th { background-color: #ddd; } th, td { padding: 0 1em; height: 30px; line-height: 30px; font-size:1em; } thead th.icon { position: relative; padding-left: 30px; cursor: pointer; } thead th.icon::before { content: "▲"; display: inline-block; position: absolute; left: 4px; color: #eee; } tbody td:nth-child(n+3){ text-align: right; } </style> <table id="table4" border="1"> <thead> <tr> <th class="icon">No.</th> <th class="icon">NAME</th> <th class="icon">HEIGHT (cm)</th> <th class="icon">WEIGHT (Kg)</th> <th>BMI</th> </tr> </thead> <tbody> <tr><th>1</th><td>CHUBBY</td><td>160</td><td>90</td><td>37.1</td></tr> <tr><th>2</th><td>VICKY</td><td>156</td><td>60</td><td>24.7</td></tr> </tbody> </table>

  • JavaScriptライブラリってそもそも・・・

    私はweb制作をはじめて3年たらずのｗｅｂデザイナーです。 プログラムはまったくと言っていいほど書けないので、アニメーションなどを実装したいときはwebで拾った著作権的に大丈夫なものを使いまわしています。 ほとんどjqueryライブラリを使ったものです。 最近はそのソースも少しは読めるようになり、少し手を加えられるようになりました。 そこで、かなり根本的な疑問がわいてきたのです。 ◆JavaScriptライブラリってそもそもなにが書いてあるものなのでしょうか？ ※JavaScriptライブラリとはで調べたのですが、難しい言葉が多くて・・・ （jqueryとは具体的にどんなものが書いてあるものなのか。） ◆jqueryのアドオンとかjqueryのプラグインとか書いてあるのをよく見かけますが、これはなんのでしょうか？アドオンとプラグインは違うものなのでしょうか？ ◆jqueryを読み込んで実行するためのスクリプトをソースに追加すれば意図した動きになりますよね。（アコーディオンメニューなど） ↓こういうもの＝＝＝＝＝＝＝＝＝＝＝ <script type="text/javascript"> $(function(){ // ここにコードを書いていく。 }); </script> これは「jqueryライブラリを使用して作ったプログラム」という言い方であっているのでしょうか？ それともこのソースに追加するスクリプトのことをアドオンというのでしょうか？ 無知で恥ずかしいのですが、この辺のことをきっちり理解できれば、もう少し自分のできる範囲が広がるのではないかと思い、質問しました。 よろしくお願いします。

  • dataTablesのテーブルの内容がずれる

    3ステップで表をソート＆値を検索できるjavascript「dataTables」 http://www.skuare.net/test/jdatatables.html 上記サイトのjavascriptを使いソートで並べ替えることはできましたが、 　 <thead> 　　 <tr> (1)　　<th>Rendering engine</th> (2)　　<th>Browser</th> (3)　　<th>Platform(s)</th> (4)　　<th>Engine version</th> (5)　　<th>CSS grade</th> 　　 </tr> 　 </thead> 　 <tbody> 　　 <tr class="oddA"> (1)　　<td>Gecko</td> (2)　　<td>Firefox 1.0</td> (3)　　<td>Win 98+ / OSX.2+</td> (4)　　<td class="center">1.7</td> (5)　　<td class="center">A</td> 　　 </tr> （略）※trがtbodyに10個ほど入ります 　 </tbody> <thead>の見出し部分の番号が <tbody>部分の番号と同じ並びになるはずなのですが、 (1)(2)(3)(4)(5)ではなく、 (4)(3)(2)(1)(5)となってしまいます。 http://sprymedia.co.uk/dataTables/example_alt_pagination.html ↑は上記解説サイトの元々のサイトなのですが、 こちらのhtmlのソースの<tbody>部分の<td>も(1)～(5)と順番に記述されています。 これだけでは情報不足とは思いますが、 ここを変えたら直るかもしれないなどありましたら教えていただけないでしょうか。 よろしくお願いいたします。

  • 『JavaScript Accordion』について

    『JavaScript Accordion』について 初めて投稿致します。 『JavaScript Accordion』（http://www.leigeber.com/2008/10/animated-javascript-accordion/の「Click here to download the source code.」でダウンロード可）を自サイトに実装しようとしたのですが、もともとの形式が「dl dt dd」形式のため、うまく実装できませんでした。 実装したい箇所は下記の通りです。 <!-- BEGIN news --> <h3>NEWS</h3> <div class="main"> <ul class="news"> <li>2010/01/05 : 更新5</li> <li>2010/01/04 : 更新4</li> <li>2010/01/03 : 更新3</li> </ul> </div> <!-- END news --> <!-- BEGIN old --> <h3>OLD</h3> <div class="main"> <ul class="news"> <li>2010/01/02 : 更新2</li> <li>2010/01/01 : 更新1</li> </ul> </div> <!-- END old --> <!-- BEGIN news -->から<!-- END news -->は常時表示、<!-- BEGIN old -->から<!-- END old -->は通常非表示、見出しの「OLD」をクリックすることで表示or非表示が切り替わるようになるのが希望です。 また上記タグの箇所は以下の通りcssを設定しているのですが、実装するにあたって何か追加する必要はありますでしょうか？ h3{ font-size:80%; font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif; font-weight:bold; color:#ef004a; letter-spacing:4px; margin:0 5px 10px 14px; } div.main{ font-size:76%; font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif; line-height:150%; padding:0 10px 15px 15px; } ul.news{ font-size:100%; font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif; padding:0 10px 10px 15px; } ul.news li{ list-style-type:disc; } スクリプト、htmlタグ、cssそれぞれどのように変更すれば実装が可能か、どなたか詳しい方がいらっしゃいましたら、お知恵を拝借したく存じます。 どうぞよろしくお願い申し上げます。

  • 画像を中心に配置したい

    画像の上下にも背景色を表示したいですが、うまくできません。 横幅は<align="center">で指定できたのですが、上下は・・・。 HTML、CSS、画像ファイル（gazou1.jpg）全て同じ階層にあります。 ・HTML <div class="gazou" align="center"><img src="gazou1.jpg"></div> ・CSS div.main { width: 100%; background-color: green }

    • ベストアンサー
    • CSS
  • ★滑らかな画像切り替え★

    アプレットを用いてスライドショーのようなものを作成しようと考えています。 しかしながら、画像を読み込むまでに時間がかかり、滑らかにつなぎたいのに、コマ送りのようになってしまいます。 できる限り断続的ではなく連続に見えるようにしたいと考えているのですが、良い方法はないでしょうか？ 画像に関してはJavaScriptの方が有効だとするサイトが多すぎて悩んでいます。 プログラムを載せておきます。尚、画像はどれも800×600のサイズです。 import java.awt.*; import java.applet.*; import java.awt.event.MouseListener; import java.awt.event.MouseEvent; public class S1 extends Applet implements MouseListener { 　　Image img; 　　int Flag=0; 　　public void init() 　　{ 　　　　addMouseListener(this); 　　　　setSize(800,600); 　　} 　　public void paint(Graphics g){ 　　　　switch(Flag){ 　　　　case 0:img=getImage(getCodeBase(),"../image/bg001.jpg"); break; 　　　　case 1:img=getImage(getCodeBase(),"../image/bg002.jpg"); break; 　　　　default:img=getImage(getCodeBase(),"../image/bg003.jpg"); break; 　　　　} 　　　　g.drawImage(img,0,0,this); 　　} 　　public void mouseClicked(MouseEvent e) { 　　　　Flag++; 　　　　repaint(); 　　} 　　public void mouseEntered(MouseEvent e) {} 　　public void mouseExited(MouseEvent e) {} 　　public void mousePressed(MouseEvent e) {} 　　public void mouseReleased(MouseEvent e) {} } 改善点などもあれば是非！

    • ベストアンサー
    • Java

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する