• ベストアンサー

画像のロールオーバー

画像をマウスオーヴァーでAからBに変えて クリックでBに固定し、またマウスオーヴァーでAを表示 クリックでAにする方法を教えてください。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

以下<head>内に記述 <script language="JavaScript"> function img_change( tarid, img_a, img_b ){ if( document.all ) img_src = document.all( tarid ).src; if( document.layer ) img_src = document.layer( tarid ).src; if( !document.all && document.getElementById ) img_src = document.getElementById( tarid ).src; if( img_src.indexOf( img_a ) != -1 ){ if( document.all ) document.all( tarid ).src = img_b; if( document.layer ) document.layer( tarid ).src = img_b; if( !document.all && document.getElementById ) document.getElementById( tarid ).src = img_b; }else{ if( document.all ) document.all( tarid ).src = img_a; if( document.layer ) document.layer( tarid ).src = img_a; if( !document.all && document.getElementById ) document.getElementById( tarid ).src = img_a; } } </script> 画像の<img>タグを以下のように変更 <img src="A_URL" id="img_id" onclick="img_change(this.id,'A_URL','B_URL');" onmouseover="img_change(this.id,'A_URL','B_URL');" onmouseout="img_change(this.id,'A_URL','B_URL');"> 変更するのは[img_id][A_URL][B_URL]のみ

yukiko00000
質問者

お礼

できました！！！ありがとうございました！！！！！

yukiko00000
質問者

補足

ご回答ありがとうございます。 ちょっと試してみたのですが。 [img_id]の部分を何に変えたらよいのか解らないので お手数ですがまた教えていただきたのですが。 よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 画像のロールオーバー

    Dreamweaver8のビヘイビアのスワップイメージを使って 画像のロールオーバーを再現したいのですが 思い通りにいきません。 実装したいこと ---------------------------------------------------- 画像Ａをマウスオーバーで画像Ｂに変わる クリックでオーバーした状態を保持（画像Ｂのまま） さらに、画像Ｃをマウスオーバーで画像Ｄに変わり クリックでオーバーした状態を保持（画像Ｄのまま） そのクリック時、画像Ｂが画像Ａに変わる ---------------------------------------------------- http://h2ham.up.seesaa.net/html/bgimage-change03.html の上の画像のような感じです。 これを実装を助けて頂きたいです。 スクリプトが書けず、Dreamweaverのビヘイビアしか 対応できない為、詳しく解説いただけたら嬉しいです。 もしくは参考サイト、サンプルソースなどありましたら 助かります。 よろしくお願いします。

  • WordPressで画像のロールオーバーをさせたい

    WordPressのブログや固定ページの記事の中で、 ２枚の画像を使って、画像のロールオーバー（マウスオーバー）をさせたいのですが、 やりかたがわかりません。 Java Scriptではなく、CSSで行いたく思い、 検索していろんなサイトに行きましたがうまくできませんでした。 もし可能であれば、単純にこれをコピーしたらできる というＣＳＳをご提示していただけないでしょうか。

  • 画像の切り替え

    教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。

  • 画像のロールオーバー

    画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持（画像a2のまま） さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持（画像b2のまま） そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>

  • CSSでのロールオーバー

    CSSでのロールオーバーについての質問です。 通常時A ロールオーバーB クリック時C この３つの画像を使ってメニューをロールオーバーさせたいのですが、 クリック時に切り換えさせる術を知らず、困っております。 a:link,a:visited{background-image:url(通常時A); a:active,a:hover{background-image:url(ロールオーバーB); でロールオーバーさせることは出来たのですが、クリック（Onclick）時に画像を切り換えることは、CSSで可能なのでしょうか。 宜しく御願い致します。

    • ベストアンサー
    • HTML
  • マーキーでロールオーバー

    マーキータグで画像を左右に動かし、そこにロールオーバーでリンクを貼ろうとしています。 マーキーで動いていてもマウスを合わせロールオーバーさせると、画像をその場に止められる方法というのはありますか？ 更に、マウスをはなすと再びそこから左右に動き出すようにしたいのですが・・・。 何か良い方法があったら是非教えて下さい。

    • ベストアンサー
    • HTML
  • CSSのみでのロールオーバーについて

    リストで並べてたテキストにマウスをのせると、別の箇所にある画像が変化するようにしたいのですが、CSSだけでできるでしょうか。 具体的には、A,B,C....というようにテキストのリストを並べて、Aというテキストにマウスを置くと、任意の場所にある画像がAの画像になり、同じようにBというテキストにマウスを置くと、今度はその画像がBの画像に変わるというものです。 Java scriptを使わずおこないたいためアドバイスいただけませんでしょうか。

    • ベストアンサー
    • CSS
  • ロールオーバーで画像を固定

    今、写真のアルバムのページを作っていて、 小さい画像の上にマウスを置くと、 小さい画像と、隣にある大きい画像が切り替わるようにロールオーバーの設定をしています。 そこで質問なのですが、マウスを置いた小さい画像をクリックしたら マウスが離れた後でも、大きい画像を 他の小さい画像をクリックするまで 固定しておくにはどのようにすればいいですか？

    • ベストアンサー
    • HTML
  • 画像がランダムに表示されるFLASH

    いつもお世話になっています。 以下のようなFLASHを作りたいのですが、やり方がわからず困っています。 (1)リロードするたびにランダムで切り替わる画像１～６がある (2)画像の横にボタン１～６があり、マウスオーバーするとそれぞれ画像１、画像２…と表示される (3)ボタン１～６をクリックするとwebページ１～６へジャンプ(リンクさせている) 上記目的のうち、(2)(3)については完成しています。具体的にはAフレームには画像1、Bフレームには画像2…と配置し、ボタン1～6のアクションスクリプトにそれぞれ「マウスオーバー時にAフレームに飛ぶ」と記述しています。そしてメインのタイムライン1フレーム目にはアクションスクリプトに「ボタン1がクリックされたらwebページ1へ、ボタン2がクリックされたらwebページ2へ…」と記述しています。 これで(2)(3)の目的は果たせており、問題は(1)です。 ランダム表示される画像があり、ボタンのマウスオーバーで指定した画像が表示され、クリックでwebページへとぶ、ためにはどこにどんな記述をすれば良いのでしょうか？ ちなみに作ったFLASHがサイトのトップページの一部となり、クリックで飛ぶwebページはそのサイト内です。 アドバイスいただけると助かります。 どうかよろしくお願いします。FLASHは上記がほぼ初めての挑戦である初心者です。

  • 画像のマウスオーバーの際のズレを直すには

    CSSを用いてマウスオーバーで画像に枠を付けるスタイルを使用したのですが、マウスオーバーした際に枠が出ると同時に画像が少し右下にずれてしまいます。マウスオーバーで枠を表示させながら画像は固定させるという事は出来るのでしょうか？宜しくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する