• ベストアンサー

HTMLかJavaScriptで、。。。

選択した画像などの枠ぐみか何かを 別の画像と区別するために表示したいのですが・・・。 マウスのシングルクリックで表示したいのですが・・・。 教えてください。。

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

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.1

IMGのborderの値を、onClickイベントを拾って変更すればよいのでは? ---- sample ---- <html> <head> <script language="javascript"> <!-- function waku(n) { for (var i = 0; i < document.gazou.length; i++) { if (i == n) { document.gazou[i].border="5"; } else { document.gazou[i].border="0"; } } } //--> </script> </head> <body> <table> <td><img src="test.bmp" name="gazou" border="0" onClick="waku(0)"></td> <td><img src="test.bmp" name="gazou" border="0" onClick="waku(1)"></td> <td><img src="test.bmp" name="gazou" border="0" onClick="waku(2)"></td> </table> </body> </html> ---- sample end ---- 画像には全て同じname値をつけ、配列扱いにします。 onClickで呼び出すwakuの引数に、画像の番号(配列の要素番号と同じになるように)を渡します。 waku関数の中で、クリックされたIMGのborder値を5に、それ以外を0にしてしまいます。 IE5.0で動作確認済みです。 NSでは動作しませんでした、、、

関連するQ&A

  • こんなJavaScript探してます!

    はじめまして。 早速ですが、下記のようなジャバスプリクトを探しています。 ------------------------------------------- ┌──────────┐  │                │ │    A           │ └──────────┘ ←4枚とも画像です。 ┌─┐┌─┐┌─┐ │ 1││2 ││3 │  └─┘└─┘└─┘   1の画像にマウスオンすると、1とAの画像が別の画像が表示され(すり替えられ)尚且つ1をクリックで別ページにジャンプ。 1※ 1・2・3ともリンク先は異なる 2※ マウスオーバー時に表示される画像は1とAとでは異なる 3※ 2・3も同様の機能がある ------------------------------------------- 探してみたところ http://bunjin.com/java/change_img0.htmlが近いように思えますが、 このスプリクトを応用してできるでしょうか? JavaScriptでなくても、こんな方法で出来る等、お教え頂ければ幸いです! 宜しくお願い致します。

  • HTML上の画像にマウスオーバーして、同HTML内にswfを表示させたい

    HTMLページ内のサムネイル画像にマウスオーバーして大きい画像を表示させるJavaScriptがありますが、そういうイメージでswfの表示ができないでしょうか。 マウスオーバーじゃなくて、クリックでもいいのですが、ポップアップウインドウや別ページに表示させるのではなく、サムネイル画像をクリックすると、同一ページのお決まりの場所でswfムービーを表示させたいのです。 表示させるムービーは、音声が流れたり、swf内で数ページクリックして内容が見れるものです。誰か、ご存知の方、いらっしゃいませんか?よろしくお願いします。

    • ベストアンサー
    • Flash
  • HTMLとJavascriptについて

    今WEBアプリを作成中で、ひとつわからないところがあるので質問させていただきます ページ内に画像があり、その画像をクリックすると別のdiv要素のところにその画像のidを表示させるようにしたいのですが、以下のようではできませんでした。どなたか解決策お願いします。 ------html------- <div> __<a href="#"> ____<img src="hoge.png" id="3" class="hogehoge" onclick="test(this.id)" /> __</a> </div> <div> __<script type="text/javascript"> ____document.write("ここは"+ hallid + "階です"); __</script> </div> -------js--------- hallid = 0; function test(id){ __hallid = id; }

  • マウスのボタン設定ができない

    何日か前から、マウスのボタン設定が ”ポイントして選択し、シングルクリックで開く”から ”シングルクリックで選択し、ダブルクリックで開く” になってしまいました。 マウスのプロパティで設定変更しても、”ダブルクリック”に戻ってしまい、”シングルクリック”に設定できません。 どうすればいいでしょうか? OSはWin2000Proです。 よろしくお願いします。

  • javascript画像の切り替えについて

    javascriptでの画像切り替えについて、どなたか教えていただけますでしょうか? やりたいことは、ユニクロの商品ページのカラー選択のような、↓↓ http://store.uniqlo.com/jp/CSaGoods/472513 サムネイルにマウスオーバーするとメイン画像が切り替わり、 マウスアウトすると、一番最初の画像に戻り、 クリックすると、選択した画像が固定されてメイン画像に表示される、 という動きです。 実際に下のようなソースを作ったのですが、 マウスオーバーとマウスアウトはきちんと動作しても、 クリックしたときに画像が固定されなくて困っています。 どなたか教えて頂けませんでしょうか? よろしくお願いいたします。 ------------------------------------------- <div id="item_main">  <img src="メイン画像のURL" alt="" name="main" /></div>    <div id="item_sum">   <p>    <img src="サムネイルのURL1" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL1;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL2" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL2;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL3" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL3;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> </p> </div> </div> ----------------------------------------------------

  • マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptを探しています

    マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptってないですかね? ■はじめは、サムネイルのような小さい画像を表示。 ■マウスを乗せると少し大きくなる。 ■もっと、大きい画像が見たい場合はクリックして見ることができる。 こんな使用を考えているのですが、私の力では、一から書くことなど到底できそうにありません。 どなたか、こういったことを作ったページや参考になるページなどありましたら教えてください。 宜しくお願い致します。

  • 簡単なJavaScriptなんですが

    セル内にボタン(menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver3で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>

  • javascriptかjQueryか・・・

    ホームページ作成・・・スライドするメニューについてです。 javascriptなどは初心者です。 例えばmixiの右下メニューの中の、「コラボ特集」のようなメニューを作りたいと思っております。 詳細としては、まずHPを開いたら、横長のボックスメニューが出てきます。 最初に3枚の画像が表示されています。4枚目以降は、右に格納(見えない)されていて、4枚目の画像の頭だけが少し出ています。⇒右矢印をクリックすると、4枚目、5枚目が表示され、同時に1枚目、2枚目は左に格納(見えない)されていきます。 逆に←左矢印をクリックしていったら、1枚目、2枚目の画像が現れていく・・・ つまり、常に表示される画像は3枚で、右と左に画像が少しずつ頭を出している、というメニューを作りたいんですね。 その画像には詳細ページへ飛ぶリンクボタンもつけます。 オンマウスで矢印マークが浮かび上がり、マウスが離れると、画像だけのメニューに戻るというのが理想ですが、複雑すぎるのでしたら、常に左右ボタンがついていてもかまいません。 詳しいコードや、URLを教えていただけたら嬉しいです。 「これをアレンジしてみてください」というのは、もしかしたら私には難しすぎると思いますので、できるだけ詳細をお願いします。 わかりにくい説明で申し訳ありません・・・。 皆さまお忙しい中恐縮ですが、どうぞよろしくお願いします。

  • マウスがおかしい

     マウスの設定は、シングルクリックでファイル選択、ダブルクリックでファイルを開くという設定になっているのですが、かなりの確率で、シングルクリックでファイルが開いてしまいます。  思い当たる原因があれば、お教えください。  OS 2000

  • JavaScript?

    http://mytahiti.jp/ のサイトで”タヒチがある奇跡”の下に4つの画像があるのですが、画像をクリックするとフルスクリーンなります。 このように表示させるには、どのように書き込めばよいのでしょうか? よろしくお願いします