マウスオーバーと背景画像の固定

質問

今、素材を中心にしたHPを作成しています。
背景画像のサンプルとして、マウスを
画像の上にのせるだけで、背景をその画像に
変更するようにしたいのです!!!

何度か挑戦してみたのですが、なかなか上手くいきません。

さらに、できればその背景画像を
画面の上に、横に並べて固定したいのです。

説明が不十分で
注文も多くてすいません。
誰か知っていたら教えてほしいです!!

回答No.1

steel_gray · ベストアンサー

マウスオーバーで背景を変更するサンプルスクリプト。

<script type="text/javascript">
document.onmouseover=function(e){
if(! e) e=window.event;
var t=e.srcElement||e.target;
if(t.nodeName=='IMG') {
var f=t;
while(f){
if(f.className.match(/\bbg\b/)){
document.body.style.backgroundImage='url('+t.src+')';
document.body.style.backgroundRepeat='repeat-x';//★
return ;
} else f=f.parentNode;
}
}
document.body.style.background='';
}
</script>

上記をHTMLのヘッダ部に入れ、
img又はimgが入っているブロックのclassに 'bg'を指定しておきます。
例 - まとめて指定
<ul class="bg">
<li><img～></li><li><img～></li>
例 - 個別に指定
<img ～ class="bg">

★の部分でページの上部に表示するようにしています。
ページの上部ですから、スクロールした状態では確認不能です。
見えている画面の上部という事でしたら、とりあえず今はパス。

補足

どこに画像のファイルを入れればいいんですか!?

お手数かけますけど
あまり知識がないので、
もう少し説明を付け足してもらえると
嬉しいです!!

お願いします。

回答No.3

steel_gray

追記。
「見えている画面の上部」にする為に、
#1の★の行の後に追加。
document.body.style.backgroundPosition='0 '+document.body.scrollTop+'px';

回答No.2

steel_gray

＞どこに画像のファイルを入れればいいんですか!?
画像ファイルを入れる場所はどこでもかまわないです。
普通にサンプルを並べたページを作った後、#1の回答通りにしてみてください。

お礼

ありがとうございます!!

無事に完成しました♪