解決済み

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

  • すぐに回答を!
  • 質問No.4173770
  • 閲覧数145
  • ありがとう数2
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 85% (12/14)

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

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

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

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

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

  • 回答No.1

ベストアンサー率 66% (1052/1578)

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

<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">


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

お礼率 85% (12/14)

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

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

お願いします。
投稿日時 - 2008-07-13 19:58:16
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全2件)

  • 回答No.3

ベストアンサー率 66% (1052/1578)

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

ベストアンサー率 66% (1052/1578)

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

お礼率 85% (12/14)

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

無事に完成しました♪
投稿日時 - 2008-08-16 18:39:13
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ