締切済み

ＨＰ作成

2008/09/07 22:04

HP作成について困ってます；； <div id="sub"> <div class="frame"> <h3><img height="46" alt="" src="sub_midashi_moji.gif" width="252" border="0"></h3> <ul id="fsize"> <li id="la"><a title="文字サイズ「大」" onclick="setActiveStyleSheet('la'); return false;" href="#">文字サイズを「大」にする</a> </li> <li id="me"><a title="文字サイズ「中」" onclick="setActiveStyleSheet('me'); return false;" href="#">文字サイズを「中」にする</a> </li> <li id="sm"><a title="文字サイズ「小」" onclick="setActiveStyleSheet('sm'); return false;" href="#">文字サイズを「小」にする</a> </li></ul></div> このタグを入れてもブラウザに表示されないのはなぜですか？スタイルシートもいれてあるんですが；

kei1979
お礼率81% (9/11)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

みんなの回答

noname#77303

2008/09/08 11:55 回答No.4

こんにちは。 styleswitcher.jsとは、どこかで配布されていたものでしょうか？とすれば、Javascriptに問題は無く、HTMLの方に問題があるようですね。まず、「文字サイズを変える部分だけ」のHTMLファイルを０から作ってみてはどうでしょう。僕も自分で試して見ましたが、単純な構造の方がチェックも楽ですし・・・。・試した内容（ＣＳＳ部分は省略・・・） <script type="text/javascript"> function ChangeTextSize(n){ change.style.fontSize = n; } </script> <ul id="sizemenu"> <li><a href="#" onclick="ChangeTextSize('18px')">文字サイズ大</a></li> <li><a href="#" onclick="ChangeTextSize('16px')">文字サイズ中</a></li> <li><a href="#" onclick="ChangeTextSize('12px')">文字サイズ小</a></li> </ul> <div id="change"> 文字サイズが変わるよ </div>

質問者

お礼 2008/09/08 22:33

こんばんわ。A List Apertってサイトです　htmlも張りますね。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>リフォームのＤｒホームズ</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script.js" src="styleswitcher.js"></script> </head> <body onload="MM_preloadImages('images/menu_over_01.gif','images/menu_over_02.gif','images/menu_over_03.gif','images/menu_over_04.gif','images/menu_over_05.gif')"> <div id="container"> <div id="header"> これが頭のほうです。　文字変更のhtmlも貼り付けたほうがいいでしょうか？

pick52
ベストアンサー率35% (166/466)

2008/09/08 02:26 回答No.3

> しかし・・・文字の変更がききません；取り敢えず、JavaScriptにエラーが出ているのでその部分を書いてくれないと誰にも回答できません。ただ、できるなら自分でデバッグした方がいいと思うのですが...。他にJSに詳しい人とかいないのでしょうか。 > ライン：　５４ 54行目にエラーがあるといっています。ただし、実際にエラーが出ているのはこの下の行(55行目の場合があります) また、この表示は単にエラーが発生している行であり、エラーの直接の原因はこの行にない可能性もあります。 > 文字：　１上と合わせて54行目の1文字目にエラーがあるといっていますが、この表示は結構いい加減なようなので宛になりません。 > エラー：　オブジェクトを指定してください。存在しないオブジェクトやnullまたはundefinedになっているオブジェクトを参照しようとしたときに発生するエラーです。オブジェクトを取得している部分を見直してください。 > コード：　０これは何を指すのかぼくはよく分かっていません(エラーコードかな)。 > ＵＲＬ：　dhtmled1 dhtmled1というファイルでエラーになっているという事です。ところで、この名前になっているというのは何らかのオーサリングツールで作成していますか。その場合はちゃんとJavaScriptのファイルが指定した場所にあるか確認してください。オーサリングツールで1回も保存していない場合。カレントディレクトリがどこになっているのかあ不明になりますのでJSファイルが正常に読み込めていない可能性が高いです。 (setActiveStyleSheetという関数が見つからないという事かも知れません)

質問者

お礼 2008/09/08 22:29

@charset "shift_jis"; body { color: #333333; margin: 0px; padding: 0px; text-align: center; background: #FFFFFF url(images/bg.gif) repeat-x top; font: 80%/2 "メイリオ", "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; vertical-align: top; } iframe { margin-bottom: 20px; } /*文字サイズ変更ボタン（ここは変更しないように） ------------------------------------------------------------------*/ #fsize { height: 44px; width: 173px; margin-right: auto; margin-left: auto; padding-bottom: 10px; } #fsize li { float: right; } #fsize a{ overflow:hidden; /*firefox用*/ display: block; text-indent: -9999px; } #sm a { background-image: url(images/fsize_btn_01.gif); height: 44px; width: 58px; } #sm a:hover { background-image: url(images/fsizen_btn_01.gif); } #me a { background-image: url(images/fsizen_btn_02.gif); height: 44px; width: 55px; } #me a:hover { background-image: url(images/fsizen_btn_02.gif); } #la a { background-image: url(images/fsize_btn_03.gif); height: 44px; width: 60px; } #la a:hover { background-image: url(images/fsizen_btn_03.gif); } これがスタイルシートです。js部分と文字部分だけ入れました。htmlもはりますね　全くわからなくなりました；；

pick52
ベストアンサー率35% (166/466)

2008/09/08 02:10 回答No.2

>>ANo.1さん > あと、アンカーにtitle属性ってないような・・・？ありますよ。 http://www.tohoho-web.com/html/a.htm Wikipediaでも各リンクに対して使用されています。因みに、リンク先が違うのにそのリンクに使用している文字列が同じものがあった場合に、区別ができないのでどちらかというと title属性をつけることはむしろ推奨されています。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#same-link-text

質問者

お礼 2008/09/08 22:24

返事が遅くなりました；　リンクまでつけていただきありがとうございます。　

sh_hirose
ベストアンサー率66% (56/84)

2008/09/07 22:27 回答No.1

まず</div>がひとつ足りません。個人の書き方によるんですが、 <div> <div> <ul> <li><a onclick="setActiveStyleSheet('sm'); return false;" href="#">文字サイズを「小」にする</a> </li></ul></div> このように書くとタグの対応が見ずらくタグ忘れなどが発生します。 <div> 　<div> 　　<ul> 　　　<li><a href="#">文字サイズを「小」にする</a></li> 　　</ul> 　</div> </div> このようにした方が後々メンテするときも見やすいです。（開始タグを改行したら、終了タグも改行し、改行しないなら一行で書ききるべきだと思います。）あと、アンカーにtitle属性ってないような・・・？表示されないって言うのがどの状態でなのかがよくわかりませんが、このソースにとりあえず<html><head><body>を付けてHTMLを作成し、ローカルで表示しました。

質問者

お礼 2008/09/07 22:57

わかりやすい回答ありがとうございます＾＾　一応治して見たら表示しました！　しかし・・・文字の変更がききません；ライン：　５４文字：　１エラー：　オブジェクトを指定してください。コード：　０ＵＲＬ：　dhtmled1 とでました・・・　ＪＳとstyleswitcherなるものがフォルダに入ってますが、同じフォルダに２個ｊｓをいれてるからですか？

質問者

補足 2008/09/07 23:26

関連するQ&A

jQueryについて教えてください
http://www.skuare.net/test/jFloatingmenu.html こちらのサイトを参考に製作をしたのですが <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;">メニュー1</a></li> <li><a href="#" onclick="return false;">メニュー2</a></li> </ul> </div> こちらの部分をテキスト表示だと表示されるのですがメニューを画像（CSSを使ったロールオーバー）にすると点線のみ表示され、画像が表示されなくなります。 <ul> <li class="category1_1"><a href="#" target="_parent">メニュー1</a></li> <li class="category1_2"><a href="#" target="_parent">メニュー2</a></li> </ul> 原因がわかりません教えていただけませんでしょうか？
- ベストアンサー
- JavaScript
JavaScript document.writeについて
<ul id="font-size-change"> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li> </ul> 上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。 function fontSizeChange(){ document.write('<ul id="font-size-change">'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('default'); "); document.write('return false;" />標準</a></li>'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('large'); "); document.write('return false;" />大</a></li>'); document.write('</ul>'); } とっても効率が悪い記述だと思うのですが、もっとシンプルで効率の良い書き方はないでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
Javascriptでプルダウンメニューを作りましたが関数化できません
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。初期状態では1の部分が開く。それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。縦長のプルダウンメニューです。たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。困っています。教えてください。
- ベストアンサー
- JavaScript
Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
（HP作成）メニューバーのプルダウンの高さ分が下にずれる。
（HP作成）メニューバーのプルダウンの高さ分が下にずれる。お世話になります。独学でHPの作成をはじめて３週間たらずの者です。色々試行錯誤しているのですが分からず困っております。どなたかご教授頂ければ幸いです。 (1)ヘッダー、(2)プルダウン形式のメニューバー、(3)フラッシュ、(4)コンテンツという構成のHPです。＜質問＞メニューバーのプルダウンの高さ分が下にずれる。言い方を変えると、本来、フラッシュやコンテンツを配置したい場所から、プルダウンの高さ分が下方へずれる。恐らく、positionを利用すれば解決できると思うのですが、どこでどう使えば良いのかが、分かりません・・・。不明な点がありましたら、質問ください。下記がHTMLです。CSSは追加で掲載します。 <body> <div id="wrapper"> <div id="header"> <h1><img src="image/header.gif" width="960" height="100"/></h1> </div>  <div id="navibar"> <ul> <li ><div id="btn01"><a href="#">ミッション</a></div></li> <li><div id="btn02"><a href="#">講師紹介</a></div></li> <li onmouseover="document.getElementById('pull').style.visibility='visible'" onmouseout="document.getElementById('pull').style.visibility='hidden'"> <div id="btn03"><a href="#">事業内容</a></div> <ul id="pull"> <li> <div id="pull01"><a href="#">各種セミナー・講演</a></div> </li> <li> <div id="pull02"><a href="#">コーチング</a></div></li> <li> <div id="pull03"><a href="#">カウンセリング</a></div></li> </ul> </li> <li><div id="btn04"><a href="#">お客様の声</a></div></li> <li><div id="btn05"><a href="#">よくある質問</a></div></li> <li><div id="btn06"><a href="#">お問合せ</a></div></li> </ul> </div>  <div id="flash"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="350"> <PARAM NAME=movie VALUE="xxx.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <param name="BGCOLOR" value="#D6D6D6" /> <EMBED src="xxx.swf" width="960" height="350" quality="high" bgcolor="#D6D6D6" wmode="transparent"> </OBJECT> </div> <div id="contents"> <p><img src="image/topicbnr.gif" width="960" height="40" alt="新着情報" /></p> </div> </div> </body>
- ベストアンサー
- HTML
ポップアップメニューの制御について
こんにちは。現在、ポップアップメニューの制御がうまくいかず困っております。 [やりたいこと] ・リンクの上にマウスを置くとポップアップメニューが開く・ポップアップメニューからマウスが外れるとポップアップメニューを閉じる・対応したいブラウザはIE6,IE7,FireFox2.0 他のサイトを参考にした結果、onmouseoverのイベントでメニュー表示まではできたのですが、メニューからマウスを外した時にメニューを閉じる処理がうまくいっておりません。onmouseoutを使うとできそうなのですが、メニューからではなく、リンクからマウスを外した時にメニューが消えてしまい困っています。解決のヒントになることでも結構ですので、アドバイスを頂けたらと思います。現在はclearTimeSetやclearTimeoutで制御できないかを調べている最中です。よろしくお願いいたします。 [HTMLのソース(一部抜粋)] <div id="testmenu1" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div id="testmenu2" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <table> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu1'); return false;" onmouseout="testHidePopupMenu('testmenu1'); return false;">メニュー1</a> </td></tr> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu2'); return false;" onmouseout="testHidePopupMenu('testmenu2'); return false;">メニュー2</a> </td></tr> </table> [JavaScriptのソース(一部抜粋)] var mX = 0; var mY = 0; var pX = 5; // マウスから右に5ピクセルずらす var pY = 5; // マウスから下に5ピクセルずらす document.onmousemove = testGetMousePoint; // マウス位置取得 function testGetMousePoint() { 　mX = event.clientX + document.body.scrollLeft; 　mY = event.clientY + document.body.scrollTop; } // ポップアップメニューの表示 function testShowPopupMenu(id) { 　pop = document.getElementById(id).style; 　pop.visibility = "visible"; 　pop.left = mX + pX + "px"; 　pop.top = mY + pY + "px"; } // ポップアップの非表示 function testHidePopupMenu(id) { 　document.getElementById(id).style.visibility = "hidden"; }
- ベストアンサー
- JavaScript
cssで作成する多階層リスト
こんにちは。 cssで・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい以上のように作成したいのですが、そのcssの記述がわかりません。色々サイトで探しましたが見つからず。。。どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">ＴＥＳＴ(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">ＴＥＳＴ(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "ＭＳＰゴシック", "MS PGothic", "MS UI Gothic", "ＭＳゴシック", "ＭＳ明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }
- 締切済み
- HTML
IE7でのz-index対応について
以下のようにコーディングすると、IE7でドロップダウンリストが後ろ側に隠れるのですが、対応方法はありますか？div#gnavi ul li ul.sublist　のz-indexを9999とかにしても効果なくて。。。 <div id="gnavi"> <ul> <li><a href="#">MENU01</a></li> <li><a href="#">MENU02</a> <ul class="sublist"> <li><a href="#">MENU02-01</a></li> <li><a href="#">MENU02-02</a></li> <li><a href="#">MENU02-03</a></li> <li><a href="#">MENU02-04</a></li> <li><a href="#">MENU02-05</a></li> </ul> </li> <li><a href="#">MENU03</a></li> <li><a href="#">MENU04</a></li> </ul> </div> <div id="adArea"> <ul> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> </ul> </div> CSS側では、以下のようにしています。 div#gnavi ul li { float:left; position:relative; } div#gnavi ul li ul.sublist { position:absolute; top:0px; left:0px; display:none; } div#gnavi ul li ul.sublist li { float:none; } div#adArea { clear:both; } div#adArea ul li { float:left; }
- ベストアンサー
- HTML
CSSでボックス内の隙間が消えない
MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }
- 締切済み
- HTML
意味を教えてください。
初心者です。 webの勉強をしているものです。 DOM Scripting標準ガイドという本を読み進めています。どうしても意味が分からないので教えていだだけると幸いです。 htmlコード <h1>スナップショット</h1> <ul> <li> <a href="images/fireworks.jpg" onclick="showPic(this); return false;" title="打ち上げ花火">花火</a> </li> <li> <a href="images/coffee.jpg" onclick="showPic(this); return false;" title="一杯のブラックコーヒー">コーヒー</a> </li> <li> <a href="images/rose.jpg" onclick="showPic(this); return false;" title="赤い赤いバラ">バラ</a> </li> <li> <a href="images/bigben.jpg" onclick="showPic(this); return false;" title="有名な時計">ビック・ベン</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="イメージギャラリー" /> <p id="description">写真をお選びください</p> javascriptコード function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; } function countBodyChildren() { var body_element = document.getElementsByTagName("body")[0]; alert (body_element.childNodes.length); } です。 javascriptの2行目でwhichpic.getAttribute("href") とあります。関数の引数であるwhichpicが2行目に入る意味が分かりません。本では「whichpicは要素ノードを表しています。具体的には<a>要素を表しています。画像へのパスを抜き出すのは、whichpic要素にgetAttributeメソッドを使うことで実現できます。」とあります。 whichpicがなぜa要素を表すことになるのかがどうしても分かりません。どうか教えてください。
- ベストアンサー
- JavaScript

ＨＰ作成