GIFファイルの上にマウスが乗ると、透過GIFを重ねるには？

困ったちゃん・・・ (T_T) [E-Mail] 1999/12/26(日) 23:45:48
普通のGIF画像の上にマウスを乗せると、透過GIFを普通のGIFの上に重ねるようにしたいのですが、可能でしょうか？

<script language="JavaScript">

</script>

<a href="top.htm"
        onmouseover="setImage(document.img1, 'image/botans.gif')"><img
        src="image/botan4.gif" border="0" width="100"
        height="100" name="img1"></a>

普通の画像はbotan4.gifで、botans.gifは透過させてます。
しかし、どーしてもbotan.gifはまったく透過することなく、きれいに元の画像に上書されます（botan4.gifは消えてしまします）。

もともと無理な話なのでしょうか？
どーか、どーか、よろしくお願い致します  (T_T)。

きたむら 1999/12/27(月) 04:14:24
「document.イメージ.src='画像ファイル名'」は、元の画像を消して新しい画像に差し替えるというものなので、この方法だとどうしても元のbotan4.gifは消えてしまいます。
たぶんレイヤーを使って画像を重ねればオーケーだと思いますが、それだとIEとNCの両者に対応させるのが少し面倒っぽいです。

そこで、最初から「botan4.gifにbotans.gifを重ねた絵」を用意しといて、マウスオーバーでそれを表示するという案を思い付きました。ローテクすぎますか？

困ったちゃん (T_T) 1999/12/27(月) 04:27:03
きたむらさん、ありがとーございます！
そうだったのですか・・・。元の画像は消えてしまうのですね・・・。
どーりでいくら透過しても、意味がないわけですね・・・ (T_T)。

最初から絵を用意しておく件ですが、８枚のGIFがあるのでサイズがその倍になってしまうので・・・ (T_T)。
透過してある、botans.gifが使えるとこれ１枚で出来てしまうことなんです。

レイヤーを使えばいいんでしょうか？
どーか、どーかよろしくお願い致します (T_T)。

みんこ 1999/12/27(月) 10:48:04
下敷き画像をテーブルの背景にして、元は何にもない完全透明GIFを
載せて置いて、重ねたい画像とさしかえる、とか。

やったことないからどうか知りませんけど
可能ならレイヤーよりはるかに楽です。NN&IE４以上限定ですが。

困ったちゃん (T_T) 1999/12/27(月) 15:40:28
みんこさん、ありがとーございます！
なるほどっ。と思い、っさっそくやってみたのですが・・・(T_T)。

テーブルの背景にbotan4.gifを設定すると、セルの中に複数の画像が、しかも変な位置に表示されてしまします。
セルの背景をbotan4.gifにして、これをセルの中心に１つだけ表示するにはどーしたらよいのでしょーか？
そんなことって、出来るのでしょうか？
透過GIFを重ねるのは、大丈夫でした。

どーか、どーかよろしくお願い致します (T_T)。

Tak 1999/12/27(月) 17:07:52
そんなに詳しい人間ではないんですが、
TDのbackgroundに設定して，widthとheightを背景画像のサイズにしてもだめですか？

<table border="0">
　<tr>
　　<td background="image/botan4.gif" width="100" height="100">
　　　<a href="top.htm" onmouseover="setImage(document.img1, 'image/botans.gif')">
　　　<img src="image/botan4.gif" border="0" width="100" height="100" name="img1">
　　　</a>
　　</td>
　　　<td background="image/botans.gif" width="100" height="100">
　　　<a href="top.htm" onmouseover="setImage(document.img1, 'image/botans.gif')">
　　　<img src="image/botan5.gif" border="0" width="100" height="100" name="img1">
　　　</a>
　　</td>
　</tr>
</table>

みたいな・・・・　　

ひょっとしたら，ぜんぜんちがうこと言ってます？ぼく。

Tak 1999/12/27(月) 17:30:59
↑のこと。
間違えました！
もし画像を二つ横に並べるんだったら・・・のつもりで書いたんですけど，
imgタグで指定する画像は完全透過GIFだから二つとも同じファイル名が
入るはずですね。

それでtdのbackgroundにそれぞれのＧＩＦをfuctionの引数に透過ＧＩＦ
を設定。ってことで・・

あくまで「二つ並べるとき」のはなしですけど・・・

のぐ 1999/12/27(月) 19:28:24
ＩＥ４以上では、わりと簡単ですが、
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<img id="img1" src="image1.gif" width="20" height="20" style="position:absolute;display:none;">
<img id="img2" src="image2.gif" width="20" height="20" onmouseover="on_mouseover()" onmouseout="on_mouseout()">
</body>
</html>
ＮＣではどうでしょう。割と難しい？どなたかお知恵を・・・。

通りすがり1号 1999/12/27(月) 23:02:07
NN4,IE4両対応でいちばん簡単なのは、
画像を<A>で囲ってonmouseoverを拾ってやること。
拾ったあとの作業はのぐさんと同じ処理になります。

<A>のリンク枠が消えない場合は、<DIV>でonmouseoverを拾う。
拾い方については以下のページのソースが参考になると思います。
http://www.fureai.or.jp/~tato/DHTML/simple/part2/m/m01/m01.htm

困ったちゃん (T_T) 1999/12/28(火) 01:39:59
みなさん、本当に有難うございます！
のぐさんの方法で、出来ました！
でもNNでは出来ません・・・ (T_T)
JavaScript error:Type'javascript:'into Locatin for details
↑と出ます。

通りすがり１号さんの、おっしゃっていることとは
<a href="top.htm" onmouseover="on_mouseover()"
onmouseout="on_mouseout()">
<img id="img1" src="image/botans.gif" border="0" width="100" height="100" style="position:absolute;display:none;">
<img id="img2" src="image/botan4.gif" border="0" width="100" height="100">
</a>
↑こうするということでしょうか？（これでもNNではダメでした）
あと、リンクのソースを拝見したのですが、よく分かりませんでした (T_T)
何分初心者でして・・・申し訳ありません。

IEでは出来たので、感謝！感謝！
NNで可能にするには、のぐさんのをどう変えればいいのでしょうか？
どーか、よろしくお願いします～ (T_T)

saka 1999/12/28(火) 03:34:56
こんなのでは?
<HTML>
<HEAD>
<script language="JavaScript">

</script>
<TITLE>- test</TITLE>
</HEAD>
<BODY>
<div style="background-image:url(image/botan4.gif);background-repeat:no-repeat;">
<a href="top.htm"
    onmouseout ="setImage(document.img1, 'image/botan4.gif')"
    onmouseover="setImage(document.img1, 'image/botans.gif')"><img
    src="image/botan4.gif" border="0" width="100" height="100"
    name="img1"></a>
</div>
</BODY>
</HTML>

A要素の中にstyleを記入するとNNでは動かなく成るようなのでこんな様です。
テーブル中に使うとNNでは、変な表示になる可能性が有ります。(試していませんです。)

困ったちゃん (T_T) 1999/12/28(火) 09:20:26
sakaさん、ありがとうございます！
実は、テーブル使ってます・・・ (T_T)。
そこで、こうしてみたのですが↓
<td width="150" bgcolor="#FFFFFF"><p align="center"
        style="background-image:url(image/botan4.gif);background-repeat:no-repeat;"><a
        href="top.htm"
        onmouseout="setImage(document.img1, 'image/botan4.gif')"
        onmouseover="setImage(document.img1, 'image/botans.gif')"><img
        src="image/botan4.gif" border="0" width="100"
        height="100" name="img1"></a></p>
        </td>

botan4.gifがセルのレフトに配置されてしまい、botans.gif（センターに表示される）と表示がずれてしまいまうんです・・・ (T_T)。
botan4.gifもセンターに表示
させるには、どーすればいーのでしょーか？

あと、なぜかNNでは正常に表示されています（きれいに重なります）。

どーか、どーかよろしくお願いします・・・(T_T) (T_T)・・・

のぐ 1999/12/28(火) 11:26:45
P の背景位置を決めてあげる。
<p align="center" style="background-image:url(image/botan4.gif);
background-repeat:no-repeat;
background-position:center center;">

saka 1999/12/28(火) 11:33:42
背景画像と表示画像を中央に持ってくるには..
<p style="background-image:url(image/botan4.gif);
          background-repeat:no-repeat;
          background-position:center;
          text-align:center">
で良いです。

きたむら 1999/12/28(火) 13:29:48
なるほどー。テーブルやスタイルシートで、ある範囲に限って背景画像とすればいいんですね。
＃じつは前の書き込みのあと、NN4.04でレイヤーを使って実現しようとして挫折しました。

ただNN4だと、例によってスタイルシートがへっぽこなせいで、背景付きのPやDIVは周囲に妙なすきまが空きます。
テーブルを入れ子にする方法で背景画像をつけてもらえると、NN4ユーザーとしてはうれしいです。

↓(NN4とIE5で確認)

<td width="150" bgcolor="#FFFFFF" align="center">
  <table border=0 cellspacing=0 cellpadding=0 width=100 height=100>
    <tr><td background="image/botan4.gif"><a href="top.htm"
    onmouseout="setImage(document.img1, 'image/botan4.gif')"
    onmouseover="setImage(document.img1, 'image/botans.gif')"><img
    src="image/botan4.gif" border="0" width="100"
    height="100" name="img1"></a></td></tr>
  </table></td>

通りすがり1号 1999/12/28(火) 18:44:31
前回言ったことを全部書くとこんな感じになります。
前回紹介したページのソースからほとんど変わっていません。
ですから著作権は前に紹介したページの作者にあると思います。

なお、切り替える画像はback.gifとfront.gifになります。

<html>
<head>
<title>mouseovertest</title>
<script language="JavaScript">
//--オブジェクトを返します
function getLAYOJ(layName){
if(document.layers)return document.layers[layName];
if(document.all) return document.all(layName);
}
//--レイヤ－を表示する
function showLAYER(oj){
if(document.layers)oj.visibility='show';
if(document.all)oj.style.visibility='visible';
}
//--レイヤ－を非表示にする
function hideLAYER(oj){
if(document.layers)oj.visibility='hide';
if(document.all)oj.style.visibility='hidden';
}
//--layNameで指定したオブジェクトにEventが発生したかを調べます
function eventtStart(layName){
getLAYOJ(layName).onmouseover=mouseoverFunc;
getLAYOJ(layName).onmouseout =mouseoutFunc;
if(document.layers) getLAYOJ(layName).captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);
}
function mouseoverFunc(e){
//--マウスが触った時の処理をここに書く
showLAYER(getLAYOJ('front'));
}
function mouseoutFunc(e){
//--マウスが離れた時の処理をここに書く
hideLAYER(getLAYOJ('front'));
}
</script>
<style type="text/css">
.test {
position: absolute;
left: 200px;
top: 110px;
width: 100;
height: 100;
}

#back {
/*background-color: #ff8888;*/
}

#front {
/*background-color: #8888ff;*/
visibility: hidden;
}
</style>
</head>
<body onLoad="eventtStart('back')">

mouseoverのテスト

<div class="test" id="back"><img src="back.gif"></div>
<div class="test" id="front"><img src="front.gif"></div>

</body>
</html>

>ただNN4だと、例によってスタイルシートがへっぽこなせいで、
>背景付きのPやDIVは周囲に妙なすきまが空きます。

PやDIVはブロック要素ですが、NNの場合は上下に自動的に改行を含めます。
これは間違っているのではなく、解釈の違いによるものです。
CSS2では改行の有無を明示できるようになるらしいです。

また、レイヤーの空白サイズについての考察が以下のページに載っています。
http://www.din.or.jp/~hagi3/JavaScript/JSTips/NGW/Affairs2.htm

たこ 1999/12/28(火) 20:28:51
＞PやDIVはブロック要素ですが、NNの場合は上下に自動的に改行を含め＞ます。
＞これは間違っているのではなく、解釈の違いによるものです。

何をどう解釈してんだ？

＞http://www.din.or.jp/~hagi3/JavaScript/JSTips/NGW/Affairs2.htm

考察？ぎゃはは。

通りすがり1号 1999/12/28(火) 21:44:14
<H1>～<H6>要素の自動改行と混同していたようです。
すみませんでした。

>PやDIVはブロック要素ですが、NNの場合は上下に自動的に改行を含めます。
>これは間違っているのではなく、解釈の違いによるものです。
>CSS2では改行の有無を明示できるようになるらしいです。

困ったちゃん (T_T) 1999/12/29(水) 00:14:42
[[解決]]
多くのご返答、ありがとうございました!
sakaさんので、うまく行きました！
NNでも、IEでもきれいに透過GIFが重なってます！(^o^)

私も早くみなさんのように、質問に返答出来るようになりたいです。
またなにかあったら、どーかよろしくお願い致します。(^o^)！
ありがとうございました <(_ _)>

[上に] [前に] [次に]