• 締切済み

IPHONEでのクリッカブルマップ

PCサイトを作成していて ommouseover/onmouseout を使ってリンクボタンを作成しました。 このサイトをスマホで開くとアンドロイドは問題ないのですが。IPHONEで開くとそのリンクボタンを触ってリンク先には飛ぶのですが、そのページに戻ってきたときにリンクボタンに触った状態の画像のままになってしまいます。何か対処できる方法はないでしょか。 overで(1)の画像になって outで元の画像が表示されますが リンク先から戻ってもoverの(1)の画像がでてしまいます

みんなの回答

回答No.1

(クリッカブルマップ ではなく ロールオーバーのことだとは思いますが) その現象は、前ページに戻ったときにキャッシュを表示しているからなので 戻ったというイベントを見つけて、onmouseoutと同じ処理を行わせればよいことになります。 例 window.onpageshow = function(event) {  if (event.persisted) {   var tempEle = document.getElementById("xxx");   if ( tempEle ) tempEle.src = "img/xxxx.jpg";  } }; もしくは、ページごと強制リロードさせるかです。 (その分、サーバー負荷やトラフィックは増えますが) window.onpageshow = function(event) {  if (event.persisted) {   window.location.reload();  } }; (このサイトは インデントが崩れるので、全角空白つかってインデントさせています)

関連するQ&A

  • クリッカブルマップがきかない!?

    html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか??ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか?? 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>

    • ベストアンサー
    • HTML
  • 初心者です。クリッカブルマップonclickの後

    javascript初心者です。 クリッカブルマップにおいて指定area内をクリックすると 画像が差し替えになる状態です。 差し替え後の画像はarea範囲よりも大きい(マップ全体と同一サイズ)なのですが このarea座標外でクリックして、元画像に戻るようにしたいです。 現在は、area座標内をクリックしないと元画像に戻りません。 ■jabascript function circle01_over(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'ロールオーバー後の画像(元画像と同じサイズで一部だけ変えたもの)'; } function image_out(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = '元画像マップ'; } function circle01_click(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'クリック後の画像'; } ■html <img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" /> <map name="Map" id="Map"> <area shape="circle" coords="***,***,***" href="javascript:void(0);" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" /> 初歩的な事で申し訳ありません・・・ 尚、jQueryも新規リンク(html)も使用不可です。 添付画像のように動作させたいです。 宜しくお願い致します。

  • HP制作。クリッカブルマップについて。

    HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" >  『省略』                  </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>

    • ベストアンサー
    • HTML
  • クリッカブルマップの作り方

    クリッカブルマップの作り方 アメリカの州、中国の省、山手線の駅名をクリックしたら、リンク先へとぶ画像をつくりたいと考えています。 下絵の入手先をご存じでしたらお教えください。有料でかまいません。 フォトショップか、イラレか、あるいは何でつくればいいでしょうか? 作り方のサイトなどありますでしょうか? 下は一例です。 http://www.jcbus.co.jp/chinahotel/map/

  • クリッカブルマップの部分的な画像の入れ替え

    HTMLの頁に大きな一枚の画像を貼り付け、クリッカブルマップで7か所にリンクボタンを作りました。マウスがリンクボタン上に来た時、そのボタンエリアにだけ違う画像を表示したいのですが、どなたかお教え願えないでしょうか?当方javascriptは初心者です。よろしくお願いします。

    • ベストアンサー
    • HTML
  • クリッカブルマップにロールオーバーを付ける

    クリッカブルマップにロールオーバー(Javascript)を付けようと思うのですが、 どうも目指していることが上手くいきません。 まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。 この通りに書けば、通常のロールオーバーはできるのですが、 私の目的はあと+α必要になります。 [内容] 1. オンマウス時にロールオーバー 2. クリック後も、ロールオーバー状態 3. 他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態 4.他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。 以上です。 ちなみに現状(上記サイト)は.onmouseover、.onmouseout、.onclickの3つすべてロールオーバー後のイメージを指定すれば[内容]の1と2まではクリアなのですが、3以降がNGです。 そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。 どなたがご教授よろしくお願いいたします。

  • クリッカブルマップでの画像のロールオーバー

    いつも大変お世話になっております。 同じような質問があったのでいろいろと拝見したのですがなかなか上手くいかず質問させていただきました。 今回ホームページで下記のような感じで、クリッカブルマップを 作成しその中に5つのリンクを作成しました。 (仮に、このイメージはmenu.gifだとします。) ¦----------------------¦                   ■■■■■     ¦----------------------¦ これを一番左の四角にマウスをあてると (menu.gif→menu01.gifの画像に入れ替わる。  隣の四角にマウスが来ると今度はmenu02.gifに変わる。) ¦----------------------¦                   ■□□□□     ¦----------------------¦ このような、同じ大きさの違う画像に入れ替えたいのですが このようなことは可能でしょうか? 下のように記述してもエラーが出て上手くいきません。 なにがいけないのでしょうか? <AREA shape="rect" coords="44,209,153,454" href="main.html" onMouseOver="imgChange(menu01.gif)" onMouseOut="imgChange(menu.gif)"> よろしくお願いいたします。

  • クリッカブルマップからリモートロールオーバー

    使用しているソフトは、GoLive6.0、OSはWINDOWSです。 一枚の大き目の画像にクリッカブルマップを設定しまし た。そのホットスポットに別ファイルへのリンクを貼り ました。このホットスポットにカーソルが乗った時点で 離れたところにある画像の表示をリモートロールオーバ ーで変化させたいのです。また、その離れたところにあ る画像自体もその画像にカーソルが乗るとホットスポッ トにカーソルが乗った時と同様に画像を切り替えて、ク リックすれば別ファイルへ飛ぶリンク設定をしたいと思 っています。このようなことはGoLive6.0では可能でし ょうか。 もし可能であれば、方法をお教えいただければ幸いです。 また方法を解説しているサイトなどがあればお教えくだ さい。どうぞよろしくお願いします。

  • クリッカブルマップとインラインフレームを組み合わせたい

    こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。

  • Xoopsモジュールpico内にクリッカブルマップ

    初めまして、投稿させていただきます。 今現在、Xoopsを使いWebページを作成しています。 ページの作成にあたってをpicoを利用し、ビルダーなどのソフトで作成したページのHTMLタグを貼り付けています。 (タグは必要な部分だけ更にメモ帳などで抜粋、加工して貼り付けています) その中で、クリッカブルマップを利用したページを作成したのですが、 巧くリンクが飛びません。 クリッカブルマップに更にその指定したページ内の任意の部分に飛ぶよう指定をしているのですが、 ページは移動するのですが該当する部分に行かず、普通にページ移動するだけです。 クリッカブルマップ上のリンク先は全て1つのページ内なのですが、 それぞれの部分へと飛ぶようにしたいと思っています。 ただ、その中で不思議なことに1箇所だけきちんと機能している部分があり、 使用できないわけではなさそうなのですが、他の部分とのタグの違いが判りません。 何かコツがあればお教えください。 よろしくお願いします。