• 締切済み

[jQuery]フォームで画像切替、遷移しても維持

こんにちわ。jQuery初心者です。 入力フォーム内で、3択のラジオボタンの選択内容によって 画像アイコンを切り替える仕組みを作成しています。 ▼javascript(jQuery)側 $(function(){ $("input[name='ans[reply]']:radio").click(function() { var index = $("input[name='ans[reply]']:radio").index(this); switch(index) { case 0 : $('img#chageImg').attr('src','../../common/img/icon_02.gif'); break;　//デフォルト case 1 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; case 2 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; } }); ▼html側 <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> 切り換え自体は、↑の書き方で問題なく動くのですが、 [submit]した後の入力エラーや、確認画面へ遷移後に戻ると、 上記の"デフォルト"のアイコン表示に戻ってしまいます。 ※エラーチェックやvalueの受け渡しはPHPで制御しています。 下記（A）（B）2通りの方法を思い付き、 リファレンスではまだ応用がよく分からず、行き詰まっています。 （A）関数化して、bodyのonloadで読み込む （B）cookieで制御　※再来訪の際には、"デフォルト"のアイコン表示 どちらかシンプルな方法で わかる方がいらっしゃいましたら、教えていただけないでしょうか。 よろしくお願いいたします。

  • byID
  • お礼率0% (0/1)

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

入力フォーム内と言う事は <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> は違いますよね。 <form action="./"> 　<p><img src="" width="" height="" alt=""></p> とかですよね。 　なら、その時に<input type="hidden" name="backImg" value="../../common/img/icon_01.gif">の値も書き換えて、再度フォームを作成する時に順番変えればよい。 　重要なフォームのあるところに、(jQueryを含む)javascriptを使うべきでないとお考えなら、もっとも良いのはCookieとサーバー側での処理です。画像を選択した時点で一旦その内容をサーバーに送り、cookieを書き換えてフォームを再提出。そのときに画像自体を変更してしまう。../../common/imgのいうスクリプトを用意して、cookieの値によって/出力される画像をicon_02.gifを他のものに変える。

byID
質問者

補足

ありがとうございます。 > Cookieとサーバー側での処理 今回は、この方法が適しているのですね。 cookieの制御ということので、検索みたところ ↓を参考にして進めてみようと思っていますが、 http://www.favorite-labo.org/view/306?continue=1 > そのときに画像自体を変更してしまう。 > ../../common/imgのいうスクリプトを用意 初心者のため、↑がよく分からなかったのですが、もし より良いサンプルあれば、参考にさせていただければと思います。 よろしくお願いします。

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

関連するQ&A

  • 画像の間隔を詰めたい

    以下の画像の間隔を詰めたいのですがb-95.gifとその左右にあるb-305.gifとの間隔が埋まりません。 この画像はアイコンで、提供してくれるサイトにある見本ではちゃんと 感覚が埋まっているのですが、どうすればいいのでしょうか？ <img src="hiyo_43.gif"> <img src="b-325.gif"><img src="b-305.gif"> <a href="index.html"> <img src="b-95.gif" border="0" onmouseover="this .src='b-105.gif'"> </a> <img src="b-305.gif"><img src="b-102.gif">

    • ベストアンサー
    • HTML
  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • 初心者です　jQueryのマウスオーバーについて

    jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>

  • jQueryで画像置換が上手くいきません

    PCサイトをスマホで読み込んだ場合に、特定の画像を小さいサイズに置換して表示したいのですが、色々調べたところ、jQueryで画像置換ができるというサンプルがあったので用いたのですが、上手くいきません。 都合上、スマホ専用サイトを作成するという方針ではありません。 よって、所どころ画像置換する必要があり、どうしても実現させたいのです。 サンプルスクリプトは以下の通りです。 if文は他のスクリプトでも使用しており動いているので、合っていると思っています。 何がいけないのでしょうか？ -------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像置換</title> <script src="js/jquery.js"></script> <script> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { $('h1>img').attr('src', 'images/aaa.jpg').attr('width', '320').attr('height', '50'); } </script> </head> <body> <header> <h1><a href="index.html"><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></a></h1> <header> </body> </html> -------------------------------------------------------------------- ちなみに、構文エラーは出ません。 サンプルスクリプトの出所は http://ascii.jp/elem/000/000/561/561127/index-3.html で、スクリプトの内容は以下の通りでした。 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { $('h1>img').attr('src', '_images/ttl_main_mini.png').attr('width', '665').attr('height', '217'); } おわかりになる方、ぜひアドバイスください。お願いします。

  • 特定の月日に設定を持たせたい

    カレンダーを作りました。 その中で、祝日等の特定の月日には$styleでCSSを変えたいと思っています。 ですが、特定の日がたくさんあるのでもっと効率のいい方法があれば教えていただきたいと思います。お願いします。 switch( $wday ){ case 0: //日曜日の文字色 $style = "sun"; break; case 2: //火曜日の文字色 $style = "holiday"; break; case 6: //土曜日の文字色 $style = "sat"; break; default: //月～金曜日の文字色 $style = "wek"; } switch( $wday ){ case 2: //火曜日にはプログラムは不要 $prg = "&nbsp;"; break; default: //火曜日以外にプログラムへのリンク $prg = "<a href=\"lesson/$y$month$day.htm\" target=\"_blank\" id=\"btn_prg\"><img src=\"common/img/icon_prg.gif\" alt=\"プログラム\" width=\"14\" height=\"14\" /></a>"; } //-------------------祝日・振り替え設定。---------- //--2008年9月の設定 if ($month == 9 and $day == 15){ $style = "sun"; } if ($month == 9 and $day == 22){ $style = "holiday"; $prg = "&nbsp;"; } if ($month == 9 and $day == 23){ $style = "sun"; $prg = "<a href=\"lesson/$y$month$day.htm\" target=\"_blank\" id=\"btn_prg\"><img src=\"../common/img/icon_prg.gif\" alt=\"プログラム\" width=\"14\" height=\"14\" /></a>"; } //--2008年10月の設定 if ($month == 10 and $day == 13){ $style = "sun"; }

    • ベストアンサー
    • PHP
  • jQueryでの画像切り替え処理について

    前回の質問の続きになります。 一列に配置したボタンを、マウスオーバー時、クリック時にそれぞれ別の画像に切り替えたいと思っています。 （元画像A_offを、マウスオーバー時はA_on、クリック時はA_off_s3へと変更する。 　A_off_s3の状態でマウスオーバーされた場合、A_offにはならず、A_off_s3のままとする。 　A_off_s3が表示されている時に他のボタンB_offがクリックされたら、B_offはB_off_s3を、A_off_s3はA_offを表示する。） 色々なページを参考に、以下のようなスクリプトを書きました。 ---------- <head> <script type="text/javascript" src="script/jquery-1.11.0.min.js"></script> <script> $(function(){ var handler = $('ul#nav li a'); var url = document.URL; var urlId = url.substr(url.lastIndexOf('#')); var urlIdJudgment = urlId.lastIndexOf('#'); $('ul#nav').each(function(){ $('#tab-box > div:first').show(); var imgSrc = $('ul#nav li:first img').attr('src'); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on'); }); handler.click(function() { var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_s3/g, ""); $('ul#nav li img.tab-on').attr('src',imgOff); $('ul#nav li img').removeClass('tab-on'); $(this).children('img').addClass('tab-on'); var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); return false; }) }); $(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); </script> </head> <body onload="MM_preloadImages('img/A_off.jpg','img/A_on.jpg','img/A_off_s3.jpg','img/B_off.jpg','img/B_on.jpg','img/B_off_s3.jpg','img/C_off.jpg','img/C_on.jpg','img/C_off_s3.jpg')"> <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="xxx"><img src="img/A_off.jpg" width="134" height="36" alt="" id="A" /></a></li> <li><a href="yyy"><img src="img/B_off.jpg" width="134" height="36" alt="" id="B" /></a></li> <li><a href="zzz"><img src="img/C_off.jpg" width="134" height="36" alt="" id="C" /></a></li> </ul> </div> ---------- 上記のスクリプトで実行をすると、クリック時に？マークが表示され、カーソルが離れると○_off_s3の画像が表示されます。 また、○_off_s3の画像が表示されている時に、○_off_s3にカーソルを合わせると、？マークが表示され、カーソルが離れると○_off_s3が表示されます。 また、○_off_s3の名称をわかりやすいものにしようと思い、○_off_cに変更し、スクリプトの"_s3"を”_c”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。 原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。

  • jsを書き換えてgifができるようにしたい

    function handleFiles(files) { l("アイコン変更！！1"); if (files.length > 0) { l("アイコン変更！！2"); var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { l("アイコン変更！！3"); var reader = new FileReader(); reader.onload = function(evt) { load(evt.target.result) } ; reader.readAsDataURL(file) } } } function load(src) { l("アイコン変更！！load"); img = new Image(); img.onload = function() { analyze() } ; img.src = src } function analyze() { l("アイコン変更！！analyze"); if (!img) return; SmartCrop.crop(img, { width: 100, height: 100, debug: false }, draw) } function draw(result) { l("アイコン変更！！draw"); selectedCrop = result.topCrop; drawCrop(selectedCrop) } function drawCrop(crop) { l("アイコン変更！！drawCrop"); canvas.width = 100; canvas.height = 100; ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height); img_src = canvas.toDataURL(); var img_tag = $('<img>').attr('src', img_src); $('#file_span').html(img_tag); $('#b_change_profile').prop('disabled', false) } function img_selected_clear() { $('img.selected', '#icon_table').each(function() { $(this).removeClass('selected') }) } function emit_change_icon_name() { var data = {}; data.selected_my_icon = selected_my_icon; data.character_name = $("#ipt_change_character_name").val(); socket.json.emit('change_icon_name', data) } $(function() { $('#canvas_wrap').hide(); $('#i_file').change(function(e) { handleFiles(this.files) }); これをどう書き換えれば画質制限の突破やgifの搭載ができるでしょうか。 回答よろしくお願いします。

  • PHPで画像を表示するプログラムについて

    実行するとランダムで取得した値を利用して、３パターンくらいの画像を切り替えて表示するPHPファイル を作成したいです！ 以下のように書いてみたのですが、如何せん初心者なものでできない原因すらわかりません！ 間違っているところを是非指摘していただきたいです。 宜しくお願い致します <?php $rand = rand(1,10); switch($rand){ case 1: echo("1"); break; case 2: echo("2"); break; case 3: echo("3"); break; case 4: echo("4"); break; case 5: echo("5"); break; case 6: echo("6"); break; case 7: echo("7"); break; case 8: echo("8"); break; case 9: echo("9"); break; case 10: echo("10"); break; if ($rand <= 3){ echo"<img src='a.jpg'>"; } elseif ($rand 4< || $rand >6 ) { echo"<img src='b.jpg'>"; elseif ($rand 7< || $rand >10 ) { echo"<img src='c.jpg'>"; } } ?>

    • 締切済み
    • PHP
  • jqueryのloadで読み込んだページ内でthickboxで画像を表示する方法

    画像表示処理方法で教えて頂ければと思います。 テスト用に２つのファイル(index.html, test.html)を用意しました。 index.htmlで thickboxを使用して画像をクリックすると希望通り （画像がアップ表示）の動作をします。 しかしindex.htmlのloadで test.html読み込んだ時の画像部分が、 target="_self"で押したときの動作になってしまいます。 解決方法、よろしくお願いします。 -----index.html----- <html> <head> <link href="thickbox.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <script type="text/javascript"> <!-- function init(){ $("#Test").load("test.html"); } // --> </script> </head> <body onload="init()"> <div id="Test"></div> <hr> (2)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a> </body> </html> -----test.html----- (1)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a>

  • googleMapでアイコン変更すると情報ウィンドウが開かない

    お世話になります。 タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。 以下のプログラムで何か問題があるのでしょうか。 わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する