• ベストアンサー

画像のロールオーバー

画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像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>

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

前回は動作内容が不明だったので、推測で作りましたが… 画像のペアが「c.jpg,c2.jpg」のように2がつくものがペアだという規則性があるなら、わざわざ最初に定義する必要はありませんね。 （ローカルで動かすとsrcがフルパスでfile://localhost～みたいな場合、正しく解釈しないブラウザがありますが、サーバにUPすれば動作すると思います。） ついでですが、同じスタイルのものはまとめて定義しておいたほうが、HTMLが見やすくなるし、後の修正も楽になるのでは？ <html> <head> <style type="text/css"> <!-- table {border:0; border-collapse: collapse; padding:0;} tr, td {margin:0; padding:0;} .group1, .group2 {width:111px; height:50px; border:0; margin:0 1px;} --> </style> <script type="text/javascript"> <!-- var elm=[]; var o_idx=[]; var img=[]; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++){ if (e[i].className && e[i].className.substr(0,5)=='group'){ var num=e[i].className.substr(5); if (num=='') num='none'; if (!isNaN(num)) {o_idx[parseInt(num)]=-1; img[j]=e[i].src; 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(){ var num=parseInt(elm[idx].className.substr(5)); var m1=img[idx].replace(/\.[A-Z0-9]{2,4}$/i,'2') + RegExp.lastMatch; if (n > 1){ if (o_idx[num] > -1) elm[o_idx[num]].src=img[o_idx[num]]; elm[idx].src=m1; o_idx[num]=idx; } else { if (idx != o_idx[num]) elm[idx].src=n?m1:img[idx]; } };} // --> </script> </head> <body> <table><tr> <td><img src="a.jpg" class="group1"></td> <td><img src="b.jpg" class="group1"></td> <td><img src="c.jpg" class="group1"></td> <td><img src="d.jpg" class="group1"></td> <td><img src="e.jpg" class="group1"></td> <td><img src="f.jpg" class="group1"></td> </tr></table> <br> <table><tr> <td><img src="g.jpg" class="group2"></td> <td><img src="h.jpg" class="group2"></td> <td><img src="i.jpg" class="group2"></td> </tr></table> </body> </html>

testid
質問者

お礼

がんばってこのように作ったんですが 一応動作しました。ただ、ソースが汚いですよね？ ありがとうございました。参考にさせていただきます。 <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> <!-- img.grape {width: 111px; height:50px;} --> </style> var img=['ここに画像をいっぱい並べる']; var elm=[]; var o_idx=-1; var img2=['ここに画像をいっぱい並べる']; var elm2=[]; var o_idx2=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0,k=0; i<e.length; i++) { if (e[i].className=='group1'){ elm[j++] =e[i];} else if (e[i].className=='grape1'){ elm2[k++]=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); } for (j=0; j<elm2.length; j++){ elm2[j].onmouseover=change2(j,1); elm2[j].onmouseout=change2(j,0); elm2[j].onclick=change2(j,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];} } } } function change2(idx2,n2){ //alert(elm.length);//警告文を出す（）の中身を出力()内には""を使用しない return function(){ if (n2 > 1){ if (o_idx2 > -1){elm2[o_idx2].src=img2[o_idx2].split(',')[0];} elm2[idx2].src=img2[idx2].split(',')[1]; o_idx2=idx2; }else{ if (idx2 != o_idx2){ elm2[idx2].src=img2[idx2].split(',')[n2];} } } }

その他の回答 (2)

noname#84373
noname#84373
回答No.2

以下はゴミでした .imglist { list-style-type:none; margin:0px; padding:0px;} .imglist li { display:inline; margin:0px; padding:0px;line-height:normal;} .imglist li img { margin:0px; padding:0px; filter:'Alpha(opacity=100)'; opacity:1; } 削除してください。

noname#84373
noname#84373
回答No.1

まったく毛色がちがいますが・・。どうでしょう？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <style> #ps0 { background-color:#200; } #ps1 { background-color:#002; } .imglist { list-style-type:none; margin:0px; padding:0px;} .imglist li { display:inline; margin:0px; padding:0px;line-height:normal;} .imglist li img { margin:0px; padding:0px; filter:'Alpha(opacity=100)'; opacity:1; } </style> <body> <br> <div id="ps0"> 　<img src="./img/0.gif" width="111" height="50" alt="p0" class="hov"> 　<img src="./img/1.gif" width="111" height="50" alt="p1" class="hov"> 　<img src="./img/2.gif" width="111" height="50" alt="p2" class="hov"> 　<img src="./img/3.gif" width="111" height="50" alt="p3" class="hov"> 　<img src="./img/4.gif" width="111" height="50" alt="p4" class="hov"> 　<img src="./img/5.gif" width="111" height="50" alt="p5" class="hov"> </div> <div id="ps1"> 　<img src="./img/0.gif" width="111" height="50" alt="q0" class="hov"> 　<img src="./img/1.gif" width="111" height="50" alt="q1" class="hov"> 　<img src="./img/2.gif" width="111" height="50" alt="q2" class="hov"> 　<img src="./img/3.gif" width="111" height="50" alt="q3" class="hov"> 　<img src="./img/4.gif" width="111" height="50" alt="q4" class="hov"> 　<img src="./img/5.gif" width="111" height="50" alt="q5" class="hov"> </div> <script type="text/javascript"> //@cc_on; //全角空白は半角にでも /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ 　var rr0 = new RegExp('\\b'+'hov'+'\\b'); 　var mm0; 　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', function (evt) { 　　var o = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; 　　if (mm0) { setOpacity.call(mm0.style, 100); m = null; } 　　if (o.className && o.className.match(rr0)) {mm0 = o; setOpacity.call(mm0.style, 60);} 　}, false); 　function setOpacity(opacity) { 　　/*@if (@_jscript) 　　　this.filter = 'Alpha(opacity=' + opacity + ')'; 　　@else@*/ 　　　this.opacity = opacity / 100; 　　/*@end@*/ 　} 　function MemoryClicker() { 　　this.init.apply(this,arguments); 　} 　 　MemoryClicker.prototype.init = function(groupId, tagname, bgcol, alpha) { 　　var n = document.createElement('div'); 　　var s = n.style; 　　 　　this.gParent = document.getElementById(groupId); 　　this.tagname = tagname.toUpperCase(); 　　this.memory = null; 　　 　　setOpacity.call(s, alpha); 　　s.backgroundColor = bgcol; 　　s.position = 'absolute'; 　　s.display = 'none'; 　　this.screen = document.body.appendChild(n); 　　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', 　　　(function (cb_){ return function(evt){ cb_.checker(evt);};})(this), false); 　}; 　 　MemoryClicker.prototype.checker = function (evt) { 　　var o = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; 　　var p = (function(o, p){ return o ? o == p ? o: arguments.callee(o.parentNode,p): null;})(o, this.gParent); 　　if(!p) return; 　　if (this.memory) { this.screen.style.display = 'none'; this.memory = null; } 　　if (o.tagName != this.tagname) return; 　　with(this.screen.style) { 　　　top = getOffsetPosition(o,'Top') + 'px'; 　　　left = getOffsetPosition(o,'Left') + 'px'; 　　　width = o.offsetWidth + 'px'; 　　　height = o.offsetHeight + 'px'; 　　　display = 'block'; 　　} 　　return this.memory = o; 　　function getOffsetPosition(element, par){ 　　　var ret = 0; 　　　while (element) { ret += element['offset'+par]|0; element = element.offsetParent; } 　　　return ret; 　　} 　}; 　 　new MemoryClicker('ps0', 'img', 'red', 20); 　new MemoryClicker('ps1', 'img', 'blue', 20); }, false); </script>

testid
質問者

お礼

ありがとうございました！ なんとか自力でできました。 でもソースが汚かったり、もっと整理できたりできるみたいでした＞＜ 回答ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ 　　width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？

    • ベストアンサー
    • HTML
  • table内の画像を中央寄せ、のせると拡大、方法？

    画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ～～～　HTML　～～～ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ～～～　CSS　～～～ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }

    • ベストアンサー
    • HTML
  • 正方形のセルに縦画像、横画像を中央に配置

    よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>

    • ベストアンサー
    • HTML
  • htmlの画像表記を教えて下さい

    画像を一列に表記したいと思って下記の様にしましたが、一番左は画像が出ますが、他はHTMLの文字が表記されます。 正しい方法を教えてください。 <TABLE border="0" width="800"> <TBODY> <TR><TD><IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-3.jpg" width="150" height="103"></TD> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-4.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-6.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-2.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-5.jpg" width="150" height="103"</td> </tr> </TBODY></TABLE>

  • 画像のサムネイルを縦横ともに指定した数値以内で表示したい。

    いままで画像を縦横比を維持して表示するには、縦一方の大きさを指定してたのですが これだと横長の画像を多く並べる場合デザインが大きく狂ってしまいます…。（どんどん横に広がってしまいます） googleやpixivのように縦横整えて表示させたいのですが、やり方が分かりません。どのようにすればよいのでしょうか。 イメージとしてはこんな感じです。 ・130ピクセルx130ピクセルの枠の中に縦横比を維持した画像を表示させる。 ・その枠を横に四つ並べる。 （縦長の画像は極端に縦長に表示され、横長の画像は極端に横長に表示されるということです。） 各画像の表示例は、例えばgoogle画像検索やpixivなど。 →google画像検索 http://images.google.co.jp/images?hl=ja&safe=off&q=%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E&lr=&um=1&ie=UTF-8&sa=N&tab=wi →pixiv http://www.pixiv.net/search.php?word=%E6%BC%AB%E7%94%BB&s_mode=s_tag ---いままで使ってたソース--- <table width="80%"> <tr align="center"> <td><a href="001.jpg"><img src="001.jpg" border="0" height="130"></a></td> <td><a href="002.jpg"><img src="002.jpg" border="0" height="130"></a></td> <td><a href="003.jpg"><img src="003.jpg" border="0" height="130"></a></td> <td><a href="004.jpg"><img src="004.jpg" border="0" height="130"></a></td> </tr> <table width="80%"> <tr align="center"> <td><a href="005.jpg"><img src="005.jpg" border="0" height="130"></a></td> <td><a href="006.jpg"><img src="006.jpg" border="0" height="130"></a></td> <td><a href="007.jpg"><img src="007.jpg" border="0" height="130"></a></td> <td><a href="008.jpg"><img src="008.jpg" border="0" height="130"></a></td> </tr> ---ここまで--- こんなソースを使ってました。 教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 「戻る」「進む」ボタンで画像を変えるには？

    「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。 順番が飛んでしまったりしてしまいます。 var n=0; var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg"); function change(){ if(n==0)n=4; if(n==5)n=0; document.img.src=imgDB[n]; } <TABLE cellpadding="10" bgcolor="#0099cc"> <TBODY> <TR> <TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD> </TR> </TBODY> </TABLE> <A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A>　 <A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR> 分かる方、教えて下さい。 よろしくお願い致します。

  • 助けてください＞＜IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • ページ上部にスペースが空いてしまう・・・

    今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="～.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="～html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="～html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="～.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する