カーソルを重ねると変わる画像の配置方法
- カーソルを重ねると変わる画像を使用しています。画像の配置に関して、右隣に画像を置く方法を教えてください。
- 画像1にカーソルを重ねると画像2に変わる仕組みを使っていますが、右隣に画像を配置したい場合に段落ちしてしまいます。改行による問題ではないので、適切な配置方法を教えてください。
- カーソルを重ねると変わる画像の使用方法について質問です。画像を右隣に並べるにはどのような方法がありますか？段落ちしてしまっているため、適切な配置方法を教えてください。
- ベストアンサー
カーソルを重ねると変わる画像
<img src="(画像1のパス名)" width="60" height="40" onmouseover="if(document.images) this.src='(画像2のパス)'" onmouseout="if(document.images) this.src='(画像1のパス)'"> これを使ってマウスを重ねると画像が変わるようにしています。 次の画像を右隣に置きたいのですが、段落ちしてしまいます。 この段落ちした画像は、重ねると画像が変わるようにはしていない画像です。 隣同士に置くにはどのようにしたらよろしいですか？ ちなみに用語は改行してません。なので、改行による段落ちではないのは確かです。
- mi-hitomi
- お礼率74% (104/140)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
普通の画像を並べたときは大丈夫なのでしょうか？ 一枚目にalign="left"も無理でしょうか？
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
たとえば、CSSの設定で<img>タグをブロック要素にしてあれば、改行されることになります。
- auty
- ベストアンサー率58% (284/486)
------------------------------------------------------------ <img src="..." /><img src="..." /> と並んでおれば問題ないと思われますが、 その１行分を提出してもらったほうが解決は早いでしょう。 また、関連のありそうなCSSの設定があればそれもお願いします。
お礼
ご回答ありがとうございます。 これは「ライブドアブログ」の記事投稿のところで貼り付けたときの現象です。 改行しなければ段落ちしないと思っていました。あんまりこういうのに詳しくなもので・・・よろしくお願いします。
関連するQ&A
- 画像に触れると画像が変わるやつについて
画像に触れると画像が変わるやつ （<IMG SRC="最初に表示される画像" onMouseOver="this.src='触れると表示される画像'" onMouseOut="this.src='最初に表示される画像と同じの'"> ）の、 画像の大きさをWIDTH,HEIGHTなどで 指定することは出来ないのでしょうか？
- ベストアンサー
- CSS
- 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
- 画像の切り替え
教えてください。 画像がはじめに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> 以上 よろしくお願いします。
- ベストアンサー
- JavaScript
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています
HTMLのホームページにおいて、マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています。 色々なページを見て、 （前略） <SCRIPT> <!-- function In(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} function Out(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} --> </SCRIPT> （中略） /*ボタン１ ここにマウスを乗せて画像１を変更する*/ <IMG onmouseover="In('gra01L.jpg')" onmouseout="Out('gra00.jpg')"src="botan_gra01.jpg" border="0"></TD> /*画像１*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> /*ボタン２ ここにマウスを乗せて画像２を変更する*/ <IMG onmouseover="In('gra01.jpg')" onmouseout="Out('gra00.jpg')" src="botan_gra01.jpg" border="0"> /*画像２*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> （後略） というやりかたでを採用したのですが、このやりかただと一つのページにつき、一箇所の画像しか変更させることができません。 （上では図２しか変更できません） 置いたアイコンによって、個別のウィンドーの画像を変更させたいのですが、どのようにすればいいでしょうか。 参考になるＨＰでもあれば教えてください。
- ベストアンサー
- 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"> --------------------------------------------------------------
- 締切済み
- ブログ
- 画像の不完全な読み込みについて
ロールオーバー(アウト)で画像切り替えをしています。 ＭacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。
- 締切済み
- JavaScript
- 外部ファイルの記述の仕方
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
- マウスを置くと画像が切り替わる設定を２つ以上したい。
IRAMです。 リンクをメニューで作っています。 リンクはテキストと画像共に張っています。 画像に触れると、画像が切り替わるという動作を するソースを、 <a href="onsei.html" onMouseOver="if(document.images) IMAGE.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE"> </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
お礼
ご回答ありがとうございます。 これでした！「align="left"」を入れたら横に並んでくれました。 単純なものを忘れてました。ありがとうございましたm(__)m