画像（もしくはテキスト）の上にカーソルが載ったときにいろいろと表示を変える方法は？

じぇい 1999/05/26(水) 01:29:08
画像などをふんだんに（且つほどほどに）取り入れてかっこいいHPを作ろうと、急に思い立ちました。
Javaスクリプトなどの知識はぜんぜんないのですが（言葉を知っているくらい）、画像の上にカーソルが重なったとき、その画像が変わるのではなく、別の位置の画像が変わるような方法が知りたいのですが、、（わかりにくい表現ですいません）。
あと、同じことをテキストでもやりたいのですが、可能でしょうか？

あと、画像の上にカーソルが重なると、別の場所でテキスト＆画像が表示されたりされなかったり、、ということもやりたいです。
どうやればいいでしょうか？

ちなみに、、かっこいいページを作るのにやはりJavaスクリプトの勉強は必須でしょうか、、？

みんこ [HomePage] 1999/05/26(水) 11:06:03
手前味噌ですがここでやってます。

http://www.incl.ne.jp/~aqua/land/index.html

変化する画像は最初は透明GIF、カーソルをあてる画像は
イメージマップになってますがテキストでもやりかたは同じです。
ちなみにテキストを変更する場合はテキストエリアとか使わないとだめな気が。
でもこの程度のサンプルならとほほさんとこにもありますしJavaScriptサンプルのページなら
絶対おいてあると思います。

＞ちなみに、、かっこいいページを作るのにやはりJavaスクリプトの勉強は必須でしょうか、、？

JavaScriptを使っているのがかっこいいと感じるのならそうでしょうねえ。
使ってなくてもかっこいいページはたくさんありますが。
また、こういう使い方をしたいと思うならやはり勉強は必須かと。
知識ない状態で使ってエラー連発させたりフリーズさせたりしてくれるページも
人によってはかっこいいのかもしれませんが...だめだ、私は嘘はつけない。

Nobu3 1999/05/26(水) 11:30:55
>ちなみに、、かっこいいページを作るのにやはりJavaスクリプトの勉強は必須でしょうか、、？
少なくとも、質問の内容を実行するには必須です。

「その画像」を変更する事ができるのなら、
「this」を他の名前に変更すれば色々できます。
もし「this」でないなら、もっと簡単です。

<img src="hoge.gif" onmouseover="document.img1.src='hoge2.gif'"><img name=img1 src="huga.gif">

一応IE4用です。
NNでは、もっと細かい設定が必要でしょう。
width,height,altなどは省略してますが、指定するようにしましょう。

Nobu3 1999/05/26(水) 11:32:49
あら・・・
ずいぶん長い時間考えてたものですね・・・
かぶってます (^^;;;

じぇい 1999/05/26(水) 20:43:21
>知識ない状態で使ってエラー連発させたりフリーズさせたりしてくれ
>るページも人によってはかっこいいのかもしれませんが...だめだ、
>私は嘘はつけない。

どうせなんでjavaスクリプト勉強します。^^;
いろいろと高度なこともやりたくなってきたんで。

みんこさん、Nobu3さん、どうもありがとうございました。

じぇい 1999/05/26(水) 20:44:09
[[解決]]
解決押すの忘れてました。^^;

みずか [E-Mail] [HomePage] 1999/05/26(水) 23:38:12
もう解決したようですが
ＩＥ用とＮＮ用を書いておきます。
>もし「this」でないなら、もっと簡単です。
thisのほうが簡単だと思ったのは僕だけでしょうか？
<img src="1st.gif" onmouseover="this.src='2nd.gif'" onmouseout="this.src='1st.gif'">
こちらも細かいことはつけてませんので、画像の大きさなどは自分で
つけて下さいな。
ちなみにondblclickやonmousedown,onmouseup,onmousemoveなどもあります。
onmousedown:マウスのボタンを押しているとき。
onmouseup :マウスのぼたんをはなしたとき。
onmouseover:マウスのポインタが上に乗ったとき。
onmouseout :マウスのポインタが領域内から外に出たとき。
onmousemove:マウスのポインタが領域内で動いたとき。
onclick :クリックしたとき
ondblclick :ダブルクリックしたとき。

それでは
NN用と思ったのですが、面倒なので、又次の機会にします。
とにかく上のはIEでしか使えないと言うことを覚えておいて下さい。

Nobu3 1999/05/26(水) 23:50:31
誤解されてるような気がするので・・・一応。

>もし「this」でないなら、もっと簡単です。
というのは
「もし「this」でないなら、もっと簡単に変更できます。」
のつもりだったんですが・・・

「this」の場合だと、「document.img1」などを知らなければ、調べなくてはいけませんしね。
まあ、「this」の意味がわかっていれば、どちらでも大差ないですが・・・。

じぇい 1999/05/27(木) 00:04:42
ふぐ～～、、、。
thisというのは、、一体何でしょう、、、？

解決を押してしまったのですが、最後にひとつだけお聞きしたいです。

javaスクリプトを学習すれば、初めに質問したようなことが、IE3以上NN３以上で可能でしょうか？

IE4以上でないといけない、、などとあまりに制限がついてしまうと、ちょっと問題なので、、。

ちなみにやりたいのは、

あるリンクの画像の上にカーソルを合わせたらら、その右下にある画像がリンクした画像によりころころ変わっていく、、というようなことです。
そして、どこにもカーソルを合わせていないときは、別の画像（TOP用の画像）が表示されて、、というようなことなのですが、、。
同じ位置でカーソルを乗せているか乗せていないかで画像が変わるというのとはまた別のものです（きっと、少し応用すればできるのでしょうが）。（説明わかりにくいですね、、、。^^;）

あと、javaスクリプトを使うことによって極端に重くなってしまう場合もちょっと問題なので、そこらへんも教えていただきたいです。

みんこ 1999/05/27(木) 00:20:30
どこの画像だろうがいくら勉強しようが、画像変更は多分WinIE3は不可能です。
バージョンチェックで２を返すひとなんですもの。
ちなみにMacIE3は可能です。（imagesには対応してません）
ここらへん死ぬ程やりました....できるなら私が教えて欲しい～。

上の質問と同じことを私のページではしているはずですが...
参考にならないならまあいいや。うっちゃっといてください。
あとスクリプト使ったからって別に大して重くはならないと思います。
文字数がいくらか増えるだけなので。（もしかしてJAVA?）
そちらかというと変更する画像などに左右されることが多いかと。

ちなみにthisというのはこの中に↓
＞ <img src="1st.gif" onmouseover="this.src='2nd.gif'" onmouseout="this.src='1st.gif'">
同じ名前の画像（サイズも同じ）を用意してこのタグ使ってみれば
分かると思います。
Nobu3さんのサンプルで「img1」となっているのも同じです。
この場合nameで指定した画像が変化します。
ただ、このサンプルだとマウスがのっかってから次の画像を読み込むので
軽いのでないと結構つらいです。そこでヘッダに画像を指定して
先読みさせてから...というのがうちのスクリプトになるわけです。

じぇい 1999/05/27(木) 00:32:28
>上の質問と同じことを私のページではしているはずですが...
>参考にならないならまあいいや。うっちゃっといてください。

、、、実はソースコードが複雑過ぎて理解できませんでした、、。
なんせjavaすくりぷとのjaの字も知らないもんで…。
もう一回見てきます。^^

あと、、みんこさんのページで行っているやり方はどのブラウザで動作可能でしょうか？、、もうこの際NN4、IE4以上で動けばよしとしときます。^^;

みんこ 1999/05/27(木) 01:12:42
うちのは
Mac....IE3&NN3
Win....IE4&NN3
で動きます（多分）。
バージョンチェックで３以上を返すブラウザ用です。

ソースは....確かにきちゃないから.....（がく。）
スクリプトになっている部分はヘッダの<SCRIPT LANGUAGE="JavaScript"></SCRIPT>で
囲ってある部分と画像（フキダシとペット）の部分だけです。
ここだけ抜き出せばそう難しくはないと思いますが。

まああとはまともなサンプル集のページ見るとか。
みずかさんのCGI勉強ツリーにJavaScriptサイトを紹介しましたので
参考にどうぞ。

じぇい 1999/05/27(木) 02:18:47
どうもありがとうございました。

>Mac....IE3&NN3
>Win....IE4&NN3
それだけで動いてくれれば十分ですね。力を振り絞ってコピー（笑）したいと思います。

>ソースは....確かにきちゃないから.....（がく。）
いえ、、そうではないのですが。。ただ僕の能力が乏しいだけなので。^^;

じぇい 1999/05/27(木) 03:25:42
うう、、できません。。。

http://village.infoweb.ne.jp/~fwnb5232/Hp/index.html

上のページです。スクリプトエラーが出ます。
感覚でやってみたのですが、、どうやらそう単純ではなかったみたいで、、。^^;
（コピーさえもできないとは、、、。--;)

ふじ 1999/05/27(木) 04:11:51
多分、
><html>
>
><head>
><title></title>
>
><!--
>//WinIE3.0とNN2以下対策

</title>の後に <script>が入ってないからじゃないかと。

あと、
> <a href="" onMouseOver="cng(1)";return false;" onMouseOut="no()"; return false;">
これも変です。
onMouseOver="cng(1);return false;"
てな感じでしょう。（セミコロンの前のダブルクォートが余分）

じぇい 1999/05/27(木) 04:19:08
うおぉ――――――！！
できました。どうもありがとうございます。

></title>の後に <script>が入ってないからじゃないかと。

灯台もと暗しとはまさにこのことですね。遠くばかり見つめていました。（笑）
これを機会にjavaスクリプトの勉強をはじめようと思います。
あの（さっき）感動が忘れられません。（うるうる）

本当に皆様どうもありがとうございました。

みずか [E-Mail] [HomePage] 1999/05/29(土) 00:33:19
ｊａｖａｓｃｒｉｐｔでもすばらしいホームページができますが、スタイルシートも便利ですよ。
だが、対応しているブラウザが少ない・・・・・・・。

じぇい 1999/05/29(土) 00:39:10
スタイルシートは今まで、フォントサイズとかカラーとかの指定しかしていませんが、、どのような便利な使い方が、、？
ちなみに対応するブラウザが少ない、、というのは、javaスクリプトよりも、、ですか？

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