- ベストアンサー
画像に触れると画像が変わるやつについて
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
スミマセン、この方が分かりやすいですね。 <IMG src="最初の画像" border=0 width="22" height="20" onMouseOver="this.src='触れると変わる画像'" onMouseOut="this.src='最初の画像'">
その他の回答 (2)
- Black_Tiger
- ベストアンサー率21% (300/1391)
さらにヘッダー内で“onMouseOver”の画像をあらかじめロードしておくと素早く表示出来ます。
お礼
ありがとうございました。
私が作ったものの場合、（同じ大きさの画像） <IMG src="e_.gif" border=0 width="22" height="20" onMouseOver="this.src='f_.gif'" onMouseOut="this.src='e_.gif'"> で、作動してますので、可能かと思います。 違う大きさの場合は分かりませんが。
お礼
ありがとうございました。
関連するQ&A
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- 画像が2枚入れ替わるようにしたい
ポインタ（マウス）を載せると画像が変わる。画像が2枚入れ替わるようにしたいのですが・・・ http://www.coffee-minton.com/sinkiro/mokuji10-2-5.html ( ↑ このサイトに説明がありました ） 下の２枚の画像を入れ替えたいのですが、うまくできないのですが、どなたかご指導くださいませ <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" width="154" height="130"> <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150"> -------------------------------------------------------------- 見本のタグ <!--http://coffee-minton.com/sinkiro/ --> <IMG src="0-11.gif" width="248" height="174" onmouseover= "this.src='0-1.gif'" onmouseout="this.src='0-11.gif'"> --------------------------------------------------------------- 下記のようにやってみたのですが、うまくいきません＾＾； <!--http://coffee-minton.com/sinkiro/ --> <IMG src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150" onmouseover= "this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" onmouseout="this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpe"> --------------------------------------------------------------
- 締切済み
- ブログ
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- cssファイルへリンクできないです。
今回からCSSファイルでホームページを作り出している超初心者なので、 専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。 そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、 リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。 よろしく御願いいたします。
- ベストアンサー
- HTML
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- 複数の画像を連動してロールオーバーさせたいのですが
宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>
- ベストアンサー
- HTML
- カーソルを重ねると変わる画像
<img src="(画像1のパス名)" width="60" height="40" onmouseover="if(document.images) this.src='(画像2のパス)'" onmouseout="if(document.images) this.src='(画像1のパス)'"> これを使ってマウスを重ねると画像が変わるようにしています。 次の画像を右隣に置きたいのですが、段落ちしてしまいます。 この段落ちした画像は、重ねると画像が変わるようにはしていない画像です。 隣同士に置くにはどのようにしたらよろしいですか？ ちなみに用語は改行してません。なので、改行による段落ちではないのは確かです。
- ベストアンサー
- HTML
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- ▲▲マウスオンで画像を変更について▲▲
<span onmouseout="changeimg.src='h1.bmp'" onmouseover="changeimg.src='h2.bmp'"> <img src="h1.bmp" width="188" height="43" border="0" name="changeimg"> </span> このタグを使っています。適切かどうかはわからないのですが^^ この他のタグでもかまいません、複数画像が変わるものを1つのページに表示させたいと思っています。 何か良いタグはないでしょうか？
- ベストアンサー
- HTML
お礼
ありがとうございました。