「MY ALUBUM」@11月18日
@charset "utf-8"; /* CSS Document */ * { margin: 0; padding:0; } ul, a{ text-decoration: none; } img { border: none } body { font-size: 0.8em; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; text-align: center; background-color: #FFF; margin: 30px auto; } #container { width: 800px; height: 100%; text-align: left; margin: 30px auto; } #wrapper { width: 800px; height: 399px; background: url(../images/contents/06.jpg) no-repeat; overflow:hidden; } #footer { width: 800px; height: 30px; background-color: #136cd0; } #footer address { font-size:0.7em; font-family: Geneva, Arial, Helvetica, sans-serif; font-style: normal; text-align: center; letter-spacing: 1px; color: #fff; padding-top: 7px; } /*=====nav====*/ #nav { width:800px; height: 45px; margin: 0 20px 0 0; background: url(../images/top/btn_bg.jpg) repeat-x left top; } #nav ul { width:782px; height: 45px; margin: 0 10px; } #nav li { display: inline; float: left; } #nav li a { width: 130px; height:45px; display: block; text-indent: -999em; text-decoration: none; } #nav li#home a{ background: url(../images/top/btn01.jpg) no-repeat; } #nav li#home a:hover{ background: url(../images/top/btn01_on.jpg); } #nav li#profile a{ background: url(../images/top/btn02.jpg) no-repeat; } #nav li#profile a:hover{ background: url(../images/top/btn02_on.jpg); } #nav li#contents a{ background: url(../images/top/btn03.jpg) no-repeat; } #nav li#contents a:hover{ background: url(../images/top/btn03_on.jpg); } #nav li#blog a{ width: 129px; background: url(../images/top/btn04.jpg) no-repeat; } #nav li#blog a:hover{ background: url(../images/top/btn04_on.jpg); }#nav li#contact a{ background: url(../images/top/btn05.jpg) no-repeat; } #nav li#contact a:hover{ background: url(../images/top/btn05_on.jpg); }#nav li#link a{ width: 131px; background: url(../images/top/btn06.jpg) no-repeat; } #nav li#link a:hover{ background: url(../images/top/btn06_on.jpg); }
* { margin:0; padding: 0; } #image { width:440px; height: 379px; font-size: 0.9em; line-height: 1.5; text-align: left; float: left; margin: 20px 0 0 30px; } #image p { margin: 0 0 10px 0; } #image p img{ margin:0 8px 8px 0; } .camera { float: right; margin:0 30px 0 0; padding-top: 29px; } /*=====contentページはここから====*/ #sidebar { width: 120px; height: 399px; float:left; background-color: #e3edf6; margin-left:10px; padding-left: 10px; } #sidebar p img{ margin: 20px 0 0 13px; } #sidebar ul{ margin: 20px; list-style-type: square; } #sidebar li a{ padding: 5px 0 0 0; letter-spacing: 0.1em; line-height: 1.5; } /*=====content1====*/ #content1{ width:230px; height: 399px; float: right; margin: 20px 20px 10px 0; } #content1 h2{ font-size: 1.3em; color:#33F; text-align: center; } .date{ font-size: 0.9em; text-align: center; margin:10px 0; } #content1 h2 p{ font-size: 0.8em; line-height: 1.5; } /*=====content2====*/ #content2{ width:380px; height: 399px; float: right; font-size:0.7em; margin: 20px 10px 10px; } #content2 p.scrool1{ text-decoration: none; float: left; } #content2 p.scrool2{ text-decoration: none; float: right; } #content2 ul { list-style-type:none; clear:both; } #content2 li{ display:inline; float: left; } #content2 li .sab{ margin: 10px 8px 0 0; }
<title>MY PHOTO ALBUM</title> <link href="css/base.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼#container--> <div id="container"> <!--▼#header--> <div id="header"> <h1><img src="images/top/title.jpg" width="800" height="85"alt="" /></h1> <!--▼#nav--> <div id="nav"> <ul> <li id="home"><a href="index.html"> HOME</a></li> <li id="profile"><a href="#"> PROFILE</a></li> <li id="contents"><a href="contens.html"> CON</a></li> <li id="blog"><a href="#">BLOG</a></li> <li id="contact"><a href="#">CONTACT</a></li> <li id="link"><a href="#">LINK</a></li> </ul> </div> <!--▲#nav--> </div> <!--▲#header--> <!--▼#wrapper--> <div id="wrapper"> <div id="image"> <p>ホントに何気ない日常なんだけど、ファインダーを通すと違った世界が現れる。<br /> 気の向くまま徒然に撮ったプライベートフォトアルバムへようこそ。</p> <p><img src="images/top/b01.jpg" width="208" height="141" alt="" /><img src="images/top/b02.jpg" width="208" height="141" alt="" /><img src="images/top/b03.jpg" width="208 " height="141"alt="" /><img src="images/top/b04.jpg" width="208"height="141" alt="" /></p> </div> <p><img src="images/top/b05.jpg" width="294" height="370" alt="" class="camera"/></p> </div> <!--▲#wrapper--> <div id="footer"> <address>COPYRIGHT(C) 2008 MY PHOTO ALBUM ALL RIGHTS RESERVED. </address> </div> </div> <!--▲#container--> </body> </html>
その後、先生のサイトにあったyuga.jsを入れて、ボタンを変換するも、なかなか出来ずに悩む。
原因は、画像名を「○○_on」にしていかなったから。
しかも、wrapper上下に変な空きが出来て、時間をかけるも直らない。やはり、CSSの組み方が変なのかも・・・・。
yuga.js
「yuga.js」内の「find('img')」3箇所を「find('images')」に変更する。
//グループ内のimg要素を指定するセレクタ生成
$(c.groupSelector).find('images').filter(isRolloverImg);