• 締切済み

画像で作成したボタンの処理について

HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cを一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)画像Aがクリックされたら、画像Aを画像A2に置き換える (2)画像A2が表示されている状態で、画像Bをクリックすると、画像A2は画像Aとなり、画像Bは画像B2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみ画像A2となり、カーソルが離れると画像Aに戻ってしまうが、クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でif文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。

みんなの回答

  • nana_coco
  • ベストアンサー率66% (56/84)
回答No.2

こんばんは。 ↓この辺が参考になるかと思います。 http://codingmania.net/globalnav/432.html http://codingmania.net/globalnav/409.html

adober
質問者

お礼

ありがとうございます。 既存のソースの修正なのですが、元々のソースがテーブルで作成した枠の中に画像を配置しており、リスト化されていないものだったのですが、リスト化してこちらを参考にやってみたいと思います。 なるべくソースを変えないでと言われていますが、どれだけ調べてもリスト化するしか方法がなさそうですものね…。

noname#206842
noname#206842
回答No.1

意味がよくわからない！ ボタンをクリックする＝リンク先に飛ぶ onclickでボタン背景を変える意味がないのでは？・・・ onMouseで背景を変える＝ロールーオーバー どうしてもやりたいのであれば、作れるが意味がないのでは？・・・ ユーザビリティとか、ウェブの意味をもっと理解する必要があると、おもわれるが？・・・ レイヤー(z-index)を重ね、同じ位置に、透明度をゼロにの画像を表示すれば、CSSだけで十分できるとおもうが？・・・ 考え方だけ・・・スクリプトを使うとブラウザのスクリプトを切っている人には、まったく変化がない！

adober
質問者

補足

意図が伝わらずすみません。 ロールオーバー、クリックでそれぞれ別のボタン画像を入れ替えるというのはユーザー側の希望です。 私が趣味で作っているものではあれば自由に変えることもできますが、そうもいかないので困っているのです。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • クリックによる画像の入れ替え処理について

    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

    縦1000px 横1000pxの画像(test.jpg)があり、この画像は、5×5で25枚の 縦200px 横200px の画像がつながって一枚となっています。 <img id="testplace"src="test.jpg" width="200px" height="200" /> と指定し（この時には、一番左上の200pxの画像が見えている）、その下に <a href="javascript:void(0)" onclick="testscript(0,0)">1番目</a> <a href="javascript:void(0)" onclick="testscript(0,200)">2番目</a> <a href="javascript:void(0)" onclick="testscript(0,400)">3番目</a> <a href="javascript:void(0)" onclick="testscript(0,600)">4番目</a> <a href="javascript:void(0)" onclick="testscript(0,800)">5番目</a> <a href="javascript:void(0)" onclick="testscript(200,0)">6番目</a> <a href="javascript:void(0)" onclick="testscript(200,200)">7番目</a> 　　・ 　　・ 　　・ <a href="javascript:void(0)" onclick="testscript(800,600)">24番目</a> <a href="javascript:void(0)" onclick="testscript(800,800)">25番目</a> とクリックする場所を設けて、それぞれをクリックすると、「testplace」に各々の200pxずつの画像が表示されるようにするスクリプト「testscript」を作成したいと考えています。 この方法だと画像は複数いらず1枚で済みます。CSSで背景画像を移動させる方法は使用しないで、実装できますでしょうか。 よろしくお願いいたします。

  • スワイプ画面でのonclick処理について

    先日、以下のサイトを参考にスワイプ画面を作成しましたが スワイプ画面でボタンをクリックする処理が実装できませんでした。 http://web-dou.com/android/swipe.html ページをA⇔B⇔Cとスワイプで遷移することができ、 Aの画面でAのレイアウトに配置したボタンを押すと ある処理を行うというものです。 以下のコードを3つの上記のスワイプを管理するソースコードに記述したところ、 「NullPointerException」というエラーが発生しました。 m_button = (Button)findViewById(R.id.button01); m_button.setOnClickListener(this); 以前した質問(http://okwave.jp/qa/q8826506.html)で回答していただいた通り、 参考にさせていただいた方法ではOnclick処理は実装できないのでしょうか？ もし実装できないのであればスワイプ画面でOnclick処理を行う方法について 教えていただければと思います。 回答よろしくお願いします。

  • jQueryのイベント

    いつもお世話になっております。 jQueryでスマートフォンのアプリを作成しております。 背面に画像（１）を配置して、その画像の上にさらに画像（２）を配置し （１）のクリックイベントの取得がしたいのですが どのように実装したらよろしいでしょうか。 クリックイベントのほかにスクロールの処理があるので こちらの実装方法も合わせてご教示いただけると幸いです。

  • 複数の画像ボタンから複数の画面に遷移

    javascript、struts初心者です。 画像ボタンAをクリックするとA.doに 画像ボタンBをクリックするとB.doに遷移するようにしたくて、以下のように書いたのですが、動きません。 【JSP】 <html:form action="/chksubmit" method="get"> <html:hidden property="submitdata" value=""/> <html:image src="../image/aaa.gif" onclick="func_submit('aaa')"/> <html:image src="../image/bbb.gif" onclick="func_submit('bbb')"/> </html:form> 【javascript】 function func_submit(id) { submitdata.value = id; } DispatchActionを使って、submitdataの値を見て遷移先を決めるやり方です。 submitdataに値が入ってくれないため、「そんなメソッドがないよ！」とエラーになります。 どうしてsubmitdataに値がはいってくれないのでしょうか？どなたかご教授お願いします。

  • JavaScriptでアニメーションを作成

    JavaScript初心者です。よろしくお願い致します。 現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。 アニメーションの動きは下記のとおりです。 Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。 その上にBの画像を配置（位置はAのこの位置…と決められています）。 ↓ 画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。 その拡大方法なのですが、それぞれの中心から拡大するのではなく、 ちょうど建物の前に犬がいるところに近づくような アニメーションを施したいと思います（※添付画像を参考）。 参考になるサイト、およびｊQueryなどありいましたら教えてください。 なにぶん、JavaScriptを使いはじめてまだ間もないので、 参考書を探すのにも苦労している次第です。 よろしくお願い致します。

  • wordpressの実装について。ホームページ作成

    wordpressでの実装について。ホームページ作成です。 wordpressを利用してビジネスサイトを作成したいと思っています。 手順として、先にhtmlとcssでホームページを作成してからwordpressへ置き換えた方が、 wordpress利用でエラーが出た時など、htmlやcssが原因でないことがハッキリするとあったため、 先にhtmlやcss、javascriptでホームページを作成している段階です。 そこで疑問なのですが、 今、現段階でjavascript(jQuery含む)も利用して少しずつ実装をしています。 次にやりたいことで以下の処理があります。 ・記事全てを「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧として、 新しい記事が１ページ目の先頭にくるようような処理です。参考サイトのURL[ttp://thehub.jp/category/news] このような処理をjavascriptだけで実現させるのは大変そうですし、 仮にjavascriptで実装できてもwordpressを利用するときにうまく置き換えられるか、 またwordpressの仕様上、結局は外さないといけなくなることを懸念しています。 そこで今の段階で以下を質問しておきたいのです。 wordpressの既存設定やプラグインでこのように 「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧を 作成するようなことはできるものでしょうか？ またそういった既存設定やプラグインが無い場合、複雑なjavascriptを利用しても、 うまくwordpressに置き換えられるものでしょうか？ 経験や知識のある方にご教授願いたいです。よろしくお願い致します。。

  • wordpressの実装について。ホームページ作成

    wordpressでの実装について。ホームページ作成です。 wordpressを利用してビジネスサイトを作成したいと思っています。 手順として、先にhtmlとcssでホームページを作成してからwordpressへ置き換えた方が、 wordpress利用でエラーが出た時など、htmlやcssが原因でないことがハッキリするとあったため、 先にhtmlやcss、javascriptでホームページを作成している段階です。 そこで疑問なのですが、 今、現段階でjavascript(jQuery含む)も利用して少しずつ実装をしています。 次にやりたいことで以下の処理があります。 ・記事全てを「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧として、 新しい記事が１ページ目の先頭にくるようような処理です。参考サイトのURL[ttp://thehub.jp/category/news] このような処理をjavascriptだけで実現させるのは大変そうですし、 仮にjavascriptで実装できてもwordpressを利用するときにうまく置き換えられるか、 またwordpressの仕様上、結局は外さないといけなくなることを懸念しています。 そこで今の段階で以下を質問しておきたいのです。 wordpressの既存設定やプラグインでこのように 「サムネイル」「タイトル」「本文の一部」で複数ページ構成の一覧を 作成するようなことはできるものでしょうか？ またそういった既存設定やプラグインが無い場合、複雑なjavascriptを利用しても、 うまくwordpressに置き換えられるものでしょうか？ 経験や知識のある方にご教授願いたいです。よろしくお願い致します。

  • ホームページの画像の処理について

    サイトのなかに画像があり、クリックすると大きい画像が現れるという処理のなかで現れた画像にカーソルを持って行くとプラス(＋)になりクリックすると、さらに大きな画像が現れるという処理がしてあるサイトがあります。どうすればできるのか、わかりません。処理の名前・分かりやすく解説されているサイト等がありましたら教えていただけませんでしょうか。よろしくお願いいたします。

  • 画像処理中にプレグロスバーを表示させたい

    画像処理するプログラムを組んでいるのですが、処理に時間がかかるので、プレグロスバーを表示させたいと考えています。 <?php if($_POST["mode"]){ 画面B ～画像処理～ }else{ 画面A <form method="me.php"> ～実行ボタン～ <input type="hidden" name="mode" value="1"> </form> } 最初は画面Aが表示され、実行ボタンを押すとB画面へ移って画像処理、みたいな流れにしています。 プレグロスバーを実装するのに http://www.html5.jp/library/progress.html こちらのサイトのバーが良いかと思いました。 ところが、実際に画面Bに実装すると画面Aで画像処理を行い、画像処理が終わってから画面Bが表示されるため、まったくプレグロスバーの意味がないものになります。 解決する方法はないでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する