javaでロールオーバーメニューを作る
久しぶりに更新。
学校にも行って、ちょこっと色々詳しくなった結果…
全部いじくりなおしたい！
だがしかし時間がない！！
いや、時間は作るものですよね。
てゆうか職場の人にHP作成頼まれたから
いそいそとパソコンに向かってやってたんだけども、
body内しかいじれないってことは、ロールオーバーどーやんのさ
って壁にぶち当たりまして、結果こんな時間（；ω；）
javaなんて嫌い
引数についての覚え書きも兼ねてメモしておこうと思います。
～
<body>
<script type="text/javascript">
<!--
function menu_over(num){
document.getElementById(num).style.backgroundPosition='0px -50px';
}
function menu_out(num){
document.getElementById(num).style.backgroundPosition='0px 0px';
}
// -->
</script>
<div style="position:relative; top:-30px; left:100px; z-index:2;">
<ul style="list-style-type:none;">
<li id="img0" style="float:left; display: block; background-image:url(img/m0.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img1" style="float:left; background-image:url(img/m1.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img2" style="float:left; background-image:url(img/m2.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img3" style="float:left; background-image:url(img/m3.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
</ul>
</div>
<div style="clear:both;">回り込み解除</div>
</body>
～
あーまじ疲れた！
onmouseover（）で関数を呼び出すときは、（）内に入れた値が戻り値として返る。
んで、function menu_over(num)のnumに戻り値が代入されるから、
getElementById(num)←ここにもnumをいれてあげれば戻り値がそのまま入る。
onmouseover(this.id)ってしてあげれば、
それぞれのリストにつけたidが返ってくるからソースがスッキリする。
ってことでいいのかな？
違うかな？
…もういいや、それで。
リンク画像に出る点線もどーにかしないとなー
今調べた感じだとjavaでやるとtabが効かなくなるらしい…それはイヤ…
cssでやれたらどんなに楽だろう…
むしろ点線くらい出てもいいかな…
ただテキスト飛ばすと激しい点線でちゃうからな…
firefoxだけかな？他ブラウザで確認する元気が残ってないよ…
むしろ文字未入力で画像だけでいけるかな…
読み上げ使う人なんて居ないだろうし！共有スペースだし！
…とりあえず寝ます。おやすみなさいｚｚ
学校にも行って、ちょこっと色々詳しくなった結果…
全部いじくりなおしたい！
だがしかし時間がない！！
いや、時間は作るものですよね。
てゆうか職場の人にHP作成頼まれたから
いそいそとパソコンに向かってやってたんだけども、
body内しかいじれないってことは、ロールオーバーどーやんのさ
って壁にぶち当たりまして、結果こんな時間（；ω；）
javaなんて嫌い
引数についての覚え書きも兼ねてメモしておこうと思います。
～
<body>
<script type="text/javascript">
<!--
function menu_over(num){
document.getElementById(num).style.backgroundPosition='0px -50px';
}
function menu_out(num){
document.getElementById(num).style.backgroundPosition='0px 0px';
}
// -->
</script>
<div style="position:relative; top:-30px; left:100px; z-index:2;">
<ul style="list-style-type:none;">
<li id="img0" style="float:left; display: block; background-image:url(img/m0.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img1" style="float:left; background-image:url(img/m1.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img2" style="float:left; background-image:url(img/m2.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
<li id="img3" style="float:left; background-image:url(img/m3.png); width:150px; height:50px;" onmouseover="menu_over(this.id)" onmouseout="menu_out(this.id)">
<a href="★★★" style="display:block; width:150px; height:50px;">★★★</a>
</li>
</ul>
</div>
<div style="clear:both;">回り込み解除</div>
</body>
～
あーまじ疲れた！
onmouseover（）で関数を呼び出すときは、（）内に入れた値が戻り値として返る。
んで、function menu_over(num)のnumに戻り値が代入されるから、
getElementById(num)←ここにもnumをいれてあげれば戻り値がそのまま入る。
onmouseover(this.id)ってしてあげれば、
それぞれのリストにつけたidが返ってくるからソースがスッキリする。
ってことでいいのかな？
違うかな？
…もういいや、それで。
リンク画像に出る点線もどーにかしないとなー
今調べた感じだとjavaでやるとtabが効かなくなるらしい…それはイヤ…
cssでやれたらどんなに楽だろう…
むしろ点線くらい出てもいいかな…
ただテキスト飛ばすと激しい点線でちゃうからな…
firefoxだけかな？他ブラウザで確認する元気が残ってないよ…
むしろ文字未入力で画像だけでいけるかな…
読み上げ使う人なんて居ないだろうし！共有スペースだし！
…とりあえず寝ます。おやすみなさいｚｚ
ページ最下部のアメブロのバナーの表示位置っ
今までは全部サイト任せでやってたけど
今回は自力で頑張ったよ!!
だから書き留めておきまーすっ
一番下に表示されるアメブロのバナーの
表示位置の設定に関するCSSです。
/* フッターバナー配置 */
#footerArea{
text-align: center;
padding: 0px;
margin: 上px 右px 下px 左px;
}
centerをleftとかrightとかに変えると
左寄せとか右寄せとかになります
marginの上下左右に数値を入れると
細かい設定ができます
いろいろやってみてください
あとカレンダーもいじったんだけど
それは他サイト様から頂いたものを
無理矢理カスタムしちゃったので、
間違いがあるといけないので
のせないでおきます(･∀･)
ってことで今日はここまでっ
あとはsubんとこの表示のズレの原因と
コメント欄と記事一覧とブックマーク一覧と
アクセス解析と…
…てけっこうあるな(･∀･)がーん
社会人になるまでにできるかなぁ
がんばろ