Gizport
1 回答
0
Share (facebook)
115
view
全般

フレーム自体にオンマウスで背景画像変化 イラスト展示サイトを作ってい...

フレーム自体にオンマウスで背景画像変化 イラスト展示サイトを作っています。

一番下の画像のように、画像Aを背景にしたフレームの上にマウスを乗せると、画像Bが背景になり、更新履歴の文字が読みやすくなるようにしたいと思っています。
文字の上ではなく、そのフレーム(又は画像)の上に乗せるだけで変わる
とりあえずウェブで調べてみたのですが、当方あまり詳しくないので試してみても成功できませんでした。

文字だけがスクロールできるようにしたいので、なるべくテーブルは使いたくないです。
javascript、HTML、CSS(あまり詳しくないのですが)、どの方法でも構いません。

そのページのソースです。


<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-type" content="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>ここにサイト名</title>

<!--このページのみのcss設定ここから-->
<style type="text/css"><!--
html{
scrollbar-arrow-color:#fff;
scrollbar-base-color:#000;
scrollbar-face-color:#000;
scrollbar-track-color:#000;
scrollbar-3dlight-color:#fff;
scrollbar-highlight-color:#000;
scrollbar-shadow-color:#000;
scrollbar-darkshadow-color:#fff;
}
body {
background-image : url('img/画像A.png');
background-attachment: fixed;
background-position: 100% 0%;
background-repeat: no-repeat}
-->
</style>
<!--このページのみのcss設定ここまで-->

</head>

<body>

aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>
aaaaaaaa<br>

</body>
</html>



どなたかなるべくわかりやすくご教授いただけると助かります。
宜しくお願いします。
Yahoo!知恵袋 5377日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
質問者さんのいう「フレームに」というのは「更新履歴のboxに」という解釈でいいですか?
で、あれば擬似フレームを利用し、スクロールバーの付いたboxにonmouseoverすればいいかと。
フレーム(分割フレーム)内に表示するページ全体にonmouseなら、<body>にonmouseを付ければいいんじゃないかと思いますが、どうでしょう。

擬似フレーム(スクロール付きbox)
http://www.tagindex.com/stylesheet/box/overflow.html


doctypeの「Frameset//EN」は<frameset>が書かれている土台ページにのみ使います。
その他のページはStrictかTransitionalを選びましょう。



>どのように記述していいかがよく分かりません
えー、私も実際に確認してみたわけではないので、上手く行かなかったら申し訳ないですが。
フレーム内に表示するページの<body>にonmouseで。

<body onmouseover="this.style.backgroundImage='url(img/画像B.png)'"
onmouseout="this.style.backgroundImage='url(img/画像A.png)'">
aaaaaaaa<br>
aaaaaaaa<br>
Yahoo!知恵袋 5376日前
シェア
 
コメントする
 

参考になったと評価
  このQ&Aは参考になりましたか?

Share (facebook)
その他の解決方法を知っていますか?
回答する
全般
53
Views
質問者が納得何の公式ウィジェットかよくわかりませんが、貼ってあるソースを見る限り、文字に線が出てくる可能性があるのは /* main(右フレーム) */ #main p{margin:0.5em 6em;padding:0;background:url(img/line.gif) repeat; #main li{margin:0;padding:0;background:url(img/line.gif) repeat;} のbackground:url(img/line,gif);の部分だけです。 このback...
4791日前view53
全般
83
Views
質問者が納得幾つか修正部分がありましたので、下記に直したものを書いておきます。 @charset "Shift_JIS"; /* 全体の設定 ---------------------------------------------------------------------*/ *{ margin : 0; padding : 0; font : 100%/160% Verdana,'MS Pゴシック',osaka,sans-serif; border : none; } /* スクロール...
5070日前view83
全般
30
Views
質問者が納得>数字の部分を④のように整数のみはそのまま、少数のある場合は3桁表示にしたいのですが・・・・ 文章と、上の例とが合ってないように思えますが、 上から4桁目を切り上げて、3ケタの全角数字での表示とする。 ただし、100g当たり1000円以上の場合は、小数点以下を切り上げて1の位まで表示する ということでしょうか。だとすれば長いですけれど =JIS(TEXT(ROUNDUP(B1/A1,2-INT(LOG(B1/A1))*(B1/A1<10))*100,"0"&IF(I...
5140日前view30
全般
54
Views
質問者が納得JIS関数で全角にすると文字列になりますね。 ユーザー定義 "100g当り "@"円" とされてはいかがでしょう。。。
5140日前view54
全般
40
Views
質問者が納得current? で、その見えている余分な部分はどこの背景? <div id="g_navi">の背景じゃないですか? 必要ですか? 別の要素に背景をつけると、余白とか枠線分の幅とかでブラウザによって解釈の違うずれも生じますから、あまりやらないほうがいいですよ。 ~_on……存在しないclass名は指定できていないと思いましょう。 参考にしたサンプルがあるなら、もう一度サンプルからリンク数の修正、画像の修正、と一つずつ修正して作成していくことをお勧めします。 ×-60
5220日前view40

関連製品のQ&A