- ベストアンサー
画像と水平線について
すみません。 htmlで画像の下に水平線を引いたのですが、 画像と水平線の間に空白が空いてしまいます。 画像と水平線を重ねることは可能なのでしょうか。 <html> <head> <body> <img src="/image/test.gif"> <hr size="0.5" noshade color="#c7ecf9"> </body> </html> よろしくお願い致します。
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 画像に並ぶ文字の縦センタリングがズレてしまいます
わかってらっしゃる方からすると、 おそらく相当つまらない質問な気がして恐縮なのですが、、、 画像の右横に文字を縦センタリングをしたいのですが、 ----------------------------------- ------ タイトル文言 -画像- ------ ----------------------------------- というようにズレてしまいます。 <hr size="5" noshade color="#000080"> <div class="title"> <img src="../images/image001.jpg" alt="image001" align="middle" > <font size="+2">タイトル文言</font> </div> <hr size="5" noshade color="#000080"> 真ん中にはならないものでしょうか？ お暇な時にご回答いただけたら幸いです。 HTMLでよく使われるような気さくなサイトがございましたら、 合わせてお教えいただけるとありがたいです。
- ベストアンサー
- HTML
- マウスオーバーで画像の切替でタイマーをつけるには？
<html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか？ 教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像ファイルが崩れる
Perlで、CGIを作成しています。 GIF画像をCGI経由で表示させようと思っているのですが、なぜか、画像が崩れてしまいます。GIFだけではなく、Jpegでも同じです。しかし、HTMLファイルの <img>タグでそのまま表示させようとすると、きちんと表示します。 どのようにすれば、崩れを抑えられますか? CGIソース---------------------- #!/usr/local/bin/perl $imgsrc="number/0.gif"; print "Content-type:image/gif\n\n"; open(IMG,$imgsrc); binmode(IMG); print <IMG>; close(IMG); -----------------------------EOF HTML---------------------------- <html> <head> </head> <body> <img src="cgi/image.cgi" width="28" hegiht="31"> </body> </html> ------------------------------EOF gif画像は、 http://www.akikobrand.com/icon/img/10/6/0.gif を使わせていただきました。(個人的な使用です)
- ベストアンサー
- CGI
- 画像を縦にそろえて表示させたいのです。
画像を縦にそろえて表示させたいのです。 リストボックスの中身を「△」（1up.gif）「▽」（1down.gif）で入れ替える。 そんな画面を作ろうとしています。（今は画像を並べているだけです。） 「△」(1up.gif) 「▽」(1down.gif) の２っのボタンはリストボックス脇の上端と下端にタテに並べたい所ですが どうしても添付の画像のようになってしまい悩んでおります。 ※の行で何かしらやればよいのかと align="left" や BR Clear=ALL などを試したのですが「▽」ボタンだけがリストボックスの下の行に配置されてしまいます。 皆様のお知恵を拝借したく思います。 宜しくお願いします。 htmlソース <body> <hr align="left" width="100%" SIZE="5"> <select size="15" name="Listbox1" style="WIDTH:200px" multiple> </select> <IMG src="../images/1up.gif" align="top"> ※ <IMG src="../images/1down.gif"> <hr align="left" width="100%" SIZE="5"> <div align="left"> <IMG src="../images/Set.gif" </body>
- ベストアンサー
- HTML
- マウスオーバー時に画像切り替え
JavaScriptで文字（画像）上にマウスポインターをオーバーするともう一つの大きな画像を切り替える、という風にしたくて、以下のようにしました。 <html> <head> <title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rosery de la mort PC profile2</title> <style type="text/css"> <!-- HTML { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } BODY { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } --> </style> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/p1.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/p2.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/p3.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/p4.jpg"; // ポイント時の画像4 var img4 = new Image(); img4.src = "image/p5.jpg"; // ポイント時の画像5 var img5 = new Image(); img5.src = "image/p6.jpg"; // ポイント時の画像6 var img6 = new Image(); img6.src = "image/p7.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center><img height="75" alt="" src="roseblue-i3.gif" width="72" align="baseline" border="0"><font size="7"><font face="Script" color="#ffffff"><em><strong> Profile <img height="75" alt="" src="roseblue-i5.gif" width="72" align="baseline" border="0"></strong></em></font></font></center> <br><br> <center> <img src="yl2.jpg"> <p><img src="image/p1.jpg" alt="start" name="def"></p> <br><br><br> <p> <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> </p> <br><br> </center> </body> </html> 上のようにしたのですが、アップロードしても、画像が全く表示されません。 因みに参考にしたところはここです。 http://www.tagindex.com/javascript/link/change3.html このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか？ 画像は全てアップロードしました。
- ベストアンサー
- JavaScript
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- jqueryのloadで読み込んだページ内でthickboxで画像を表示する方法
画像表示処理方法で教えて頂ければと思います。 テスト用に２つのファイル(index.html, test.html)を用意しました。 index.htmlで thickboxを使用して画像をクリックすると希望通り （画像がアップ表示）の動作をします。 しかしindex.htmlのloadで test.html読み込んだ時の画像部分が、 target="_self"で押したときの動作になってしまいます。 解決方法、よろしくお願いします。 -----index.html----- <html> <head> <link href="thickbox.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <script type="text/javascript"> <!-- function init(){ $("#Test").load("test.html"); } // --> </script> </head> <body onload="init()"> <div id="Test"></div> <hr> (2)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a> </body> </html> -----test.html----- (1)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a>
- ベストアンサー
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- １０ｃｍある画像を左から３ｃｍのみ表示させるにはど
<html> <head> <title>test</title> <style type="text/css"> img{width:500px; </style> </head> <body> <img src="http://test/line.jpg"> </body> </html> これで、画像のサイズ（割合）を調整できますが 例えば１０ｃｍある画像を左から３ｃｍのみ表示させるにはどうすればいいでしょうか？ 上記のやり方だと長さの調節はできますが それに伴い画像も縮小拡大されてしまいます。
- ベストアンサー
- HTML
- ローカルネットワークをONしていてもONにするようにエラーが出る
- iOSで無線LAN経由でブラザー製品のHL-L3230CDWに接続しようとする際に、ローカルネットワークがONになっていてもエラーが発生して接続できないトラブルが発生しています。
- 関連するソフト・アプリとしてPrint＆Scanを使用しています。
お礼
crepon133さん ご返答の方有難うございます。 役立ち助かりました。 またよろしくお願い致します。