ベストアンサー

背景画像を適用

2008/05/26 15:52

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <script type="text/javascript">  </script> <style type="text/css">  </style> </head> <body onLoad="cngColor(1);"> <ul> <li><a href="./" id="key1" onClick="cngColor(1);">サンプル文字列１</a><br> <li><a href="./" id="key2" onClick="cngColor(2);">サンプル文字列２</a><br> <li><a href="./" id="key3" onClick="cngColor(3);">サンプル文字列３</a><br> </ul> </body> </html> 上記ではクリックしたリンクの色が他のリンクをクリックするまで変更されたままになります。このクリックした時に、<li>にもbackground-image:url(img.png);の背景画像を適用したいのですが、どのようにすればいいのでしょうか。別のリンクがクリックされるまで変更したままにしますので、スタイルシートとJavaScriptを併用しなければならないと思い、試行錯誤しておりますが、あまり知識がないためJavaScriptでの背景画像の使い方がどうしてもわかりませんでした。お手数をおかけいたしますが、よろしくお願いいたします。

MASTER-PPC
お礼率94% (52/55)

JavaScript
回答数3
ありがとう数2

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

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

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/05/26 16:45 回答No.1

・　CSSのホバーとJavaScriptの画像の連携が難しそうでしたのでどちらか一方にしたほうがよさそうです。以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <script type="text/javascript">  </script> <style type="text/css">  </style> </head> <body onLoad="cngColor(1);"> <ul> <li><a href="./" id="key1" onClick="cngColor(1);">サンプル文字列１</a><br> <li><a href="./" id="key2" onClick="cngColor(2);">サンプル文字列２</a><br> <li><a href="./" id="key3" onClick="cngColor(3);">サンプル文字列３</a><br> </ul> </body> </html>

質問者

お礼 2008/05/27 14:09

有難うございます。おかげさまで解決することが出来、大変助かりました。

その他の回答 (2)

auty
ベストアンサー率58% (284/486)

2008/05/27 00:25 回答No.3

#1の[追記] } else { document.all["key"+cnt].style.color = nmColor; document.all["key"+cnt].style.backgroundImage = ""; } としておけば、CSSのホバーも同時に使えることが分かりました。

yambejp
ベストアンサー率51% (3827/7415)

2008/05/26 19:52 回答No.2

こんなんでどうでしょ？ //hoge.htm <html> <head> <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head> <body> <ul id="menu"> <li class="active"><a href="./">サンプル文字列１</a></li> <li><a href="./">サンプル文字列２</a></li> <li><a href="./">サンプル文字列３</a></li> </ul> </body> </html> //hoge.css ul{ margin:0px; padding:0px; width:200px; } #menu li.active a{ color:#ff5b1e; background-image:url(img.png); background-Color:aqua; } #menu li a{ color:#323232; height:25px; width:200px; margin:0px; padding:0px; display:block; background-Color:yellow; } #menu li a:hover{ background-image:url(img.png); } //hoge.js window.onload=function(){ var menu=document.getElementById("menu"); var c=menu.firstChild; var flg=true; while(c){ if(c.nodeName=="LI"){ var cc=c.firstChild; while(cc){ if(cc.nodeName=="A"){ cc.onclick=function(){return cngColor(this)} } cc=cc.nextSibling; } } c=c.nextSibling; } } function cngColor(obj){ var c=obj.parentNode.parentNode.firstChild; while(c){ if(c.nodeName=="LI"){c.className="";} c=c.nextSibling; } obj.parentNode.className="active"; return false; }

質問者

お礼 2008/05/27 14:21

有難うございます。今回自分が作成しているメニューでは、ボタン毎に背景画像を変える必要がありましたので、No1様で教えていただいたコードを少し変更して目的のメニューを作成する事が出来ました。ただ、yambejp様のコードはIDが無いぶん、リンクを変更した時のメンテナンス性が大変よさそうですので、時間のあるときに自分のメニューに使えるように試行錯誤してみようと思います。自分の知識ではとても解決できない改造でしたので、大変助かりました。

関連するQ&A

背景色を行ごとに変えるには？
お世話さまです。以下において、 <style type="text/css"> ul,li {padding:0; margin:0; line-height:1.3;} .blockAA {width:740px;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:inside;padding-left:30px;} /* clearfix */ .blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> </body> </html> <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li> <li><a href="#">かかか</a></li> <li><a href="#">ききき</a></li> <li><a href="#">くくく</a></li> <li><a href="#">けけけ</a></li> <li><a href="#">こここ</a></li> </ul> </div> ここで、「あああ」「いいい」行と、「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか？ご回答よろしくお願いいたします。
- ベストアンサー
- 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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。　　　　　　　　　　　　　　　　　　　　　　　どうすればいいのでしょうか？　 h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} 　 ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx　</h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。　　　　　　　　　　　　　　　　　　　　　　　どうすればいいのでしょうか？　 <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話)　xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p>　 <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
IEでCSSによる背景画像の高さが伸びる原因は？
2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style>  </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>
- ベストアンサー
- HTML
IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!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=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
背景色を交互にしたいのですが・・・
お世話になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .list01-odd { background-color: #FFEEEE; } .list02-odd { background-color: #EEFFEE; } a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> </table> <br /> </script> <span class="unnamed1">（あ行）</span> <div class="blockAA"> <ul class="hoge"> <li class="list01-odd"><a href="A073.htm">あああ</a></li> <li class="list01-odd"><a href="A017.htm">いいい</a></li> <li><a href="A069.htm">ううう</a></li> <li><a href="A043.htm">えええ</a></li> <li class="list01-odd"><a href="A080.htm">おおお</a></li> <li class="list01-odd"><a href="A077.htm">かかか</a></li> （省略部分があります）上記において、例えば「ううう」を削除した場合、「えええ」の文字列が背景色といっしょに移動するのですが、この際、「えええ」の文字列のみを移動させたいのです（つまり、背景色は固定させたい）お知恵を拝借できれば幸いです。よろしくお願いいたします。
- ベストアンサー
- HTML
リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!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" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。具体的ソースは下部に記述します。印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 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">  </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>
- 締切済み
- HTML
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。）現在、Kompozerをつかってホームページを作成しています。添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。ご指導いただければうれしいです。よろしくお願いします。＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。ここまで何が間違っているかわかりません。初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML

背景画像を適用