- ベストアンサー
imgタグ内 name とｉｄの違い
こんにちは、DreamWeaver8を使ってホームページの勉強を始めたものです。 スワップイメージを作成していて、imgタグ内でname属性とid属性とがでました。スワップイメージの振る舞いには何の違いもないのですが、そもそも属性がnameとidとではどのように違うのかなと思いました。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。 例）上側はname,下側はid <img src="button1.gif" name="Image1" width="150" height="29" id="Image1" onmouseover="MM_swapImage('Image1','','button1-2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="button2.gif" width="150" height="29" id="Image2" onmouseover="MM_swapImage('Image2','','button2-2.gif',1)" onmouseout="MM_swapImgRestore()" />
- norinori1
- お礼率67% (674/994)
- ホームページ作成ソフト
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
http://www.tohoho-web.com/html/img.htm このページの下の方の「一般属性」の所に「id」「name」についての説明があります（表中の属性名がクリック出来る先のページに詳細説明あり） 一般的には、name属性は<A>タグから参照され、id属性はJavaScript、スタイルシート、ダイナミックHTMLなどから参照されます。 「参照される方」から見ればイメージ描画動作に違いはありませんが「参照する方」から見れば重要な違いです。 因みに、id、name属性は一般属性なので<IMG>タグ以外のタグにも付けられます。
その他の回答 (1)
- shirousa01
- ベストアンサー率36% (36/98)
W3C勧告の日本語訳に以下の文章があります。 HTML4は、a, applet, form, frame, iframe, img, map 要素について name 属性を定義している。またHTML4は、id 属性も導入している。これらの属性はともにフラグメント識別子として使われるよう設計されている。 XMLでは、フラグメント識別子は ID 型であり、要素ごとに ID 型の属性は1個しかありえない。したがって、XHTML 1.0 では、id 属性が ID 型として定義されている。XHTML 1.0 文書が適正に構築されたXML文書であることを保証するために、XHTML 1.0 文書は、フラグメント識別子を定義するときには、歴史的には name 属性ももっている要素であっても、id 属性を使わなければならない。XHTML文書がメディア型 text/html として配布されるときにそうしたアンカーが後方互換であることを保証することに関する情報については、HTML互換性ガイドラインを見よ。 XHTML 1.0 では、これらの要素の name 属性は公式には廃止予定であり、後続バージョンのXHTMLでは取り除かれるであろうから、注意してほしい。
お礼
返信ありがとうございます。少し私には難しいのですがなんとなくは理解できました。
関連するQ&A
- ウィンドウを閉じる
close.gifというファイル名の画像を押すとそのウィンドウが閉じる様にしたいのですが、現在スワップイメージでclose_s.gifというファイルを設定しています。 ドリームウィーバー４で作成しています。 下がそのスクリプトなのですが、ウィンドウを閉じさせるにはどこに何を記述したら良いのでしょう？ <a href="javascriptvoid(0)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/close_s.gif',1)"><img src="img/close.gif" width="110" height="32" border="0" name="Image1"></a>
- ベストアンサー
- JavaScript
- javascritpの中身をHTML-lintでエラーが出ないようにしたい
英語のサイトで海外の方が作ったものを Another HTML-lint gateway http://openlab.jp/k16/htmllint/htmllinte.html でチェックしてエラーをできるだけなくしたいのですが、 私がJavascriptがさっぱりわからず、つまづいてしまいました。 ---------------------- <script language="JavaScript1.2">mmLoadMenus();</script> <a href="about.asp" onMouseOver="MM_showMenu(window.mm_menu_0119092132_0,0,23,null,'image2');MM_swapImage('image2','','images/menu_about2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_about2.gif" name="image2" border="0" id="image2"></a><a href="basel.asp" onMouseOver="MM_swapImage('image1','','images/menu_basel2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_basel2.gif" name="image1" border="0" id="image1"></a><a href="activitiesassist.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090425_0,0,23,null,'image3');MM_swapImage('image3','','images/menu_assist2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_assist2.gif" name="image3" border="0" id="image3"></a><a href="activitiesreport.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090642_0,0,23,null,'image4');MM_swapImage('image4','','images/menu_report2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_report2.gif" name="image4" border="0" id="image4"></a><a href="specificinfo_main.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090857_0,0,23,null,'image5');MM_swapImage('image5','','images/menu_specific2_selected.gif',1)" onMouseOut="MM_startTimeout();;MM_swapImgRestore()"><img src="images/menu_specific2.gif" name="image5" border="0" id="image5"></a><a href="links.asp" onMouseOver="MM_swapImage('Image2','','images/menu_links2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_links2.gif" name="Image2" border="0" id="Img1"></a> ---------------------- ・body内にscriptが書かれています。 ・alt属性の入れ方がわかりませんでした。 ・<script language="JavaScript1.2">は、 <script type="text/JavaScript1.2">で良いのでしょうか。 ・同じnameがあり(idも合っていない)変更しても問題ないでしょうか？ 初心者な質問かと思いますが、 回答いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？
お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>
- ベストアンサー
- HTML
- うまくリンク先に飛ばないです…
<a href="ch_01/info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/nav_overbtn03.gif',1)"><img src="images/nav_btn03.gif" name="Image7" width="175" height="25" border="0" id="Image7" /></a> こう記述していますが、リンク先に飛ばなくて困っています。 初歩的な質問かと思いますが、どう記述すればいいのでしょうか？ HTML Javaとも初心者なので分かりやすく教えてもらえたら嬉しいです。
- ベストアンサー
- ホームページ作成ソフト
- イベントハンドラを完全に外部化にしたい
イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ～></li> <a href="b.html"><img ～></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です
- ベストアンサー
- JavaScript
- このCSSどこが間違ってる？中央揃えで二段組みみするには？
お世話になります。 CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。 現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ（leftmenu/centermenu）を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう？一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。 div#header{width:800px; margin-left:auto; margin-right:auto; } div#container{width:800px; margin-left:auto; margin-right:auto; } div#contens{width:800px; margin-left:auto; margin-right:auto; div#leftmenu{width:157px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF} div#centermenu{width:643px; float:right; margin-left:auto; margin-right:auto; background-color:#FFFFFF} } div#footer{width:800px; margin-left:auto; margin-right:auto; clear:both; } body{background-attachment: scroll; background-color: #990000; background-image: url(bg-photo.jpg); background-repeat: repeat-y; background-position: center; } ＨＴＭＬものせておきます。 </head> <body onLoad="仮.jpg')"> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133"> <param name="movie" value="top.swf"> <param name="quality" value="high"> <embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed> </object> </div> <div id="container"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a> </div> <div id="contens"> <div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div> <div id="centermenu"> <div align="left"><img src="index-bar.jpg"></div> </div> </div> <div id="footer"> <div align="center"> <p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p> </div> </body> </html>
- ベストアンサー
- ブログ
- nameを使わずにidだけで
よろしくお願いします XHTML1.0 StrictでJavascriptを使おうと思ったのですが 通常 <img src="1.gif" width="180" height="155" alt="" name="b01" onmouseover="document.b01.src='02.gif'" onmouseout="b01.document.src='01.gif'" /> と書いているのを nameを使わずにidだけで同じ動作を行うにはどうしたらいいのでしょうか？ 参考になるホームページなどありましたらよろしくお願いします
- ベストアンサー
- JavaScript
- <div>と<div>の隙間を無くす方法
ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> <div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> <div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;
- ベストアンサー
- CSS
- ソースコードの説明とはどのようにすればいいのでしょうか？
はじめまして。 現在、Dreamweaverでサイト作成し、mouseoverのプログラムを記述していますが、Dreamweaverで自動で挿入したもののためよく理解しておりません。 以下のソースコードについて説明をしてくださいと言われたのですが、どのようにして説明すればいいのでしょうか？ <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','img/navon_01.gif',1)"><img src="img/nav_01.gif" alt="ホーム" name="Image28" width="93" height="50" border="0" id="Image28" /></a> どの部分がどういった内容か正直まったくわかっておりません。 javascriptについて理解している人間も不在のため、こちらで質問させていただきました。 どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 簡単なJavaScriptなんですが
セル内にボタン（menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver３で作ったら、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
お礼
返信ありがとうございます。非常に参考になりました。