• ベストアンサー

どうしたらいいんでしょか?

お世話になります。 ディレクトリごとでメニューの表示状態を変えたいと思い、下記のようなプログラムを書いたんですけど、オンマウスの個所が動作しません。原因はどこにあるんでしょうか? 多分、””の使い方がわかっていないと思うのですが・・・。 print "<li><img src='../img/gm_1b.gif' alt='menu1'></li>";の行の src='../img/gm_1b.gif' alt='menu1'の部分のシングルコーテション「'」も本来なら「"」で書きますよね?(htmlでは) なぜシングルコーテションにしないといけないのかわからないし・・・。 どうぞよろしくお願いします。 <ul> <?php //現在のディレクトリを調べる $path = dirname($_SERVER["SCRIPT_NAME"]); //ディレクトリ変数設定 $string1 = "aaa"; if (strstr($path,$string1)) { print "<li><img src='../img/gm_1b.gif' alt='menu1'></li>"; } else { print "<li><a href='#'><img src='../img/gm_1a.gif' onMouseOver='src='../img/gm_1b.gif'' OnMouseOut="src='../img/gm_1a.gif'' alt='menu1'></a></li>"; } ?> </ul>

  • PHP
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

ご質問の内容では文法ミスがあります。 わかりにくかったりめんどうならヒアドキュメントを 使うとよいです。 コーテーションの制限を気にする必要がなくなります。 print <<<eof <li> <a href="#"> <img src="../img/gm_1a.gif" onMouseover="this.src='../img/gm_1b.gif'" onMouseout="this.src='../img/gm_1a.gif'" alt="menu1"> </a> </li> eof;

armstrong-us
質問者

補足

ありがとうございます。 ヒアドキュメントなる方法があったんですね。 ところで、eof;を書く場所なんですけど、ネストの都合上、一番左にはならないんですけど、どうも一番左側に書かないとエラーが出てしまうんですけど、それはどうしてなんでしょうか? よろしくお願いします。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

言語構造上終端IDはインデントできません。 以下参照ください。

参考URL:
http://www.php.net/manual/ja/language.types.string.php#language.types.string.syntax.heredoc
armstrong-us
質問者

お礼

なるほど、そういうことだったんですね。 ちょっとそのあたりでハマってしまいましたが、無事思うように出来ました。 どうもありがとうございました。

  • inu2
  • ベストアンサー率33% (1229/3720)
回答No.1

(*注意 print よりも echoの方がこの場合は適切だと判断しましたのでechoを使ってます printとechoの違いは自分で調べてくださいね) echo "<li><img src=\"../img/gm_1b.gif\" alt=\"menu1\"></li>"; と書いてもいいんですが そういう場合、私ならメンドウなので echo '<li><img src="../img/gm_1b.gif" alt="menu1"></li>'; って書いちゃいます PHP本人からしてみれば文字列の最初に出てくる「"」と構文として扱うべき「"」の区別がつかなくなるからです 例えば echo "<font color="red">"; と書いたとしましょう 人間が見れば red を囲っている「"」と echo構文の初めと終わりをあらわす「"」の区別は尽きますが、PHP側からみればredを囲っている初めの「"」で 文字列終わり! だと勘違いします つまり下記のように別な意味だと見てしまうわけです echo "<font color=" red">";(←エラーが出ます ですから、「"」で囲った時には「'」で 「'」で囲った時には「"」を文字列としてみてくれます echo '<font color="red">'; echo "<font color='red'>"; 又、文字列として扱いたいときには、前に「\」をつけることによりエスケープ(この場合は文字列として扱ってくれる)してくれます echo "<font color=\"red\">"; 「"」と「'」の違いは自分で調べるとして 感覚的に違いを掴むには、下記のソースを実行したあと、ブラウザでソースを表示させてどんなHTMLが吐き出されているか確かめてみてください $data = "あいうえお"; echo '<font color="red">\n$deta</font>'; echo "<font color=\"red\">\n$deta</font>";

armstrong-us
質問者

お礼

ありがとうございました。 ",'でだいぶ謎に包まれていましたが、納得できました。 丁寧に説明してくださり、よく理解できました。

関連するQ&A

  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 [html] <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> [css] #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか? わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 初心者です jQueryのマウスオーバーについて

    jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像1.gifが画像1_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $(this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $(this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$(this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $(this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>

  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか? ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • ulの画像をcssのfloatで横並び、IEでの印刷が変(ソース記述のため長文です)

    ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。 具体的ソースは下部に記述します。 印刷すると、最初のulの方は画像が1つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。 参考に、自分の環境も記載します。 なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか?おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP  professional Version 2002 service Pack 2 ブラウザ IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all"> <!-- ul.pageLink{ margin: 0; padding: 0px; list-style: none; } ul.pageLink li{ padding:0; margin: 0; float: left; } --> </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>

  • 【Jquery】before()でソースを挿入

    Jquery初心者です。  before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。 単純なソース(たとえば<p>hello</p>など)はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。 リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか? 書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>

  • CSSの左横に隙間ができてしまいます。

    画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->

    • ベストアンサー
    • CSS
  • CSSで指定した背景が印刷されない

    CSS初心者です、 CSSで背景を指定しているのですが閲覧者側で印刷時に背景も印刷にチェックをいれないと背景が印刷されないのですが、閲覧者側で上記の作業をいなくても背景を印刷させる方法はありましたらどなたかご教授ください。 ソース記述 <div id="header"> <ul id="menu"> <li id="mnu1"><a href="index.html"><img src="menu/tm.gif" width="114" height="44" alt="HOME" title="HOME" /></a></li> <li id="mnu2"><a href="topics.html"><img src="menu/tm.gif" width="114" height="44" alt="オリジナルケーキ" title="Topics" /></a></li> <li id="mnu3"><a href="location.html"><img src="menu/tm.gif" width="114" height="44" alt="スイーツ" title="Location" /></a></li> <li id="mnu4"><a href="business.html"><img src="menu/tm.gif" width="114" height="44" alt="マロン" title="Business" /></a></li> <li id="mnu5"><a href="population.html"><img src="menu/tm.gif" width="114" height="44" alt="ギフト" title="Population Labor" /></a></li> <li id="mnu6"><a href="industrial.html"><img src="menu/tm.gif" width="114" height="44" alt="生地制作" title="Industral Park" /></a></li> <li id="mnu7"><a href="contact.html"><img src="menu/tm.gif" width="114" height="44" alt="お問い合わせ" title="Contact" /></a></li> </ul> CSS記述 #header{ background-color : #ffffff; background-repeat : no-repeat; width : 800px; background-image : url(img/logotop.gif); height : 197px; display:list-item; list-style-image: url(img/logotop.gif); } ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 800px; height : 44px; padding: 0px ;} ul#menu li{ float : left; list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); display : block; text-decoration : none; background-repeat : no-repeat; outline: none; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; } よろしくお願いします。

  • イベントハンドラを完全に外部化にしたい

    イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <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はすでに外部化済です

  • ul li を inlineにすると、右から順にリスト表示されます

    いつもお世話になっております。 基本的なことかもしれませんが、解決できずに困っているので どなたかアドバイスを頂けませんでしょうか。 希望はA,B,Cを左から順に並べて表示させたいのですが、 現在C,B,A となってしまっています。 (希望: A B C 現在: C B A) ---- html ---- <div class="link"> <ul> <li><img src="A.gif"></li> <li><img src="B.gif"></li> <li><img src="C.gif"></li> </ul> </div> ---- css ---- .link ul, li { display: inline; float: right; } これ以降、他の個所(別のclassなど)でul記述しても 全て同様の現象が起きております。 何が原因と考えられますでしょうか?

    • ベストアンサー
    • HTML
  • 画像を挿入して横並びのメニューリストを作ったのです

    が、margin-top,margin-bottom(margin-leftはききます)がききません。何が原因でしょうか? 以下がソースです。 ~html~ <ul id="menu"> <ul>     <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>                           省略     </ul> ~css~ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。

    • ベストアンサー
    • CSS

専門家に質問してみよう