JavaScript初心者なのですが、学校の宿題でわからないことがあって質問します。マウスをテキストにロールオーバーするたびにメッセージサイクルを2つではなく、3つにしたいのですが。わかりにくい説明ですみません。よろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (2件)

惜しかったのですね。


napuaさんが、補足でおっしゃっているように、Array(配列)を使えばできると思います。
下のような感じですか? (JavaScriptの部分だけ書きなおしました)

<SCRIPT LANGUAGE="JavaScript">
//配列オブジェクトの作成です
msg = new Array("おはよう","こんにちは","こんばんは");
i = 0;

function myPara_onmouseout()
{
myPara.innerText = "Wow that feels good!!!";
myPara.style.color = "Red"
}

//変更してみました
function myPara_onmouseover()
{
myPara.innerText = msg[i];
i++;
if(i==msg.length){
i=0;
}
myPara.style.color = "Black";
}

</SCRIPT>
</HEAD>

でもこれってIEでしか動かないんですが良いですか?
(NNで同じことをしようとすると結構面倒くさそう?)

というわけで、がんばって下さい。
文法的な部分は参考URLを見ると詳しく載ってます。

参考URL:http://tohoho.wakusei.ne.jp/js/index.htm
    • good
    • 0
この回答へのお礼

お礼が遅くなって大変申し訳ありませんでした。
kana-tanさんが書き込んでくださったとうりに、もう一度コードを書き直してみたのですが、IEで動けばいいのですが、どうもうまくいきませんでした。もう少し勉強してやり直してみます。
どうもありがとうございました。

お礼日時:2001/11/26 19:36

質問の内容がさっぱりわからないので、想像で補って書いてみました。


こういうことですか?
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
msg = new Array("おはよう","こんにちは","こんばんは");
i = 0;
function msgChange(){
status=msg[i==msg.length?i=0:i++];
}
</SCRIPT>
</HEAD>

<BODY>
<A HREF="javascript:void(0)"
onMouseOut ="status='Hello';return true"
onMouseOver ="msgChange();return true" >ようこそ</A>
</BODY>
</HTML>

(もしかすると
 onMouseOut ="status=msgChange();return true"
の方が、近いのかな~?)

全然、回答もつかないようなので参考までに。

この回答への補足

kana-tanさん、コメントが遅くなってすみませんでした。
私の説明がほんとにわかりにくいのに、回答ありがとうございます。初心者で、ほんとうに何もわかっていなくて、説明もままならない状態でして・・・それで、実際にコードをここに書き込む事にしました。これで、質問がわかりやすくなるといいのですが。kana-tanさんの書き込んでくださったコードでいうと、ステイタスバーではなく、'ようこそ’の部分のテキストが直接”おはよう”、”こんにちは”、”こんばんわ”に変わるようにしたいのですが・・・私の書き込んだコードだと、
myPara.innerText = "Roll your mouse over mytext"
の””内の部分のテキストが2種類ではなく3種類にしたいのです。kana-tanさんが書き込んでくださったように、arrayを使えばよいのでしょうか。本当にわかりにくい質問で申し訳ありませんでした。

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>

function myPara_onmouseout()
{
myPara.innerText = "Roll your mouse over my text";
myPara.style.color = "Black"
}

function myPara_onmouseover()
{
myPara.innerText = "Wow that feels good!!!";
myPara.style.color = "Red"
}

</SCRIPT>
</HEAD>

<BODY>
<P ID="myPara"
onmouseout="return myPara_onmouseout()"
onmouseover="return myPara_onmouseover()">
Roll your mouse over my text
</P>
</BODY>
</HTML>

補足日時:2001/11/18 19:43
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q画像ロールオーバーからテキストと背景のロールオーバーへ

リンクメニューの部分ですが、現在画像でロールオーバーさせている(背景色と文字色が変化する)のですが、そのリンク部分の文字はテキストにするようにとの指示がありました。
画像ではなくテキストにした場合に背景色と文字色が変化するにはどうすればよいでしょうか?
下記左メニュー部分です。
http://www8.ocn.ne.jp/~soken-33/kono/
よろしくお願いいたします。

Aベストアンサー

すみません、ちょっと説明不足でしたね。
幅を指定すれば解決すると思います。

.xxx a {
color:#xxx;
background:#xxx;
display:block;
width:(枠の横幅)px;
height:(枠の縦幅)px;
}

.xxx a:hover {
color:#xxx;
background:#xxx;
}


枠の大きさが違うリンクが何種類かあったようなので、
種類の数だけ上記のCSSを記述します。
それを、class="xxx"で適用させます。

Q画像のロールオーバーとアクティブページでの画像ロールオーバーについて

javascriptでの画像のロールオーバーについて質問させてください。

現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。

このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ(アクティブページ)のメニュー画像をロールオーバー(ロールオーバーをオンマウス状態に)させる方法が見つかりません。

あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・

どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

Aベストアンサー

回答がないみたいなので…

ご質問が一般論なので、回答も一般論になりますが、
ロールオーバー自体は同じことをやっているので、メニューが何個存在しようともと同じ方法で対処可能です。

どの様なページ構成なのか不明ですが、グローバルとアクティブのメニューが同じドキュメント内にあるのか、あるいは別ドキュメント(フレームなどで)あるのかで少し違ってきます。

別ドキュメントの場合はそれぞれのドキュメントで、単独にロールオーバーを考えればよいので簡単ですね。

同じドキュメント内でロールオーバーのアクションが同じなら(画像を入れ替えるだけとか同じ機能という意味)、ロールオーバーのスクリプトを多少修正して(スクリプトによっては修正不要)、複数のメニューに対応できるようにしてあげれるだけで可能なはず。
(どのメニューでのアクションか識別できるようにすれば良い)

それすら面倒くさければ、同じfunctionを名前を変えて設置して対象の識別子などが重複しないようにしてあげるだけでも可能です。
(まったく同じ内容のスクリプトを複数個おくのが恥ずかしくなければですが。)

アクションが違う場合は、それを包含するスクリプトにするか、別々の機能としてスクリプトを作成するか、どちらでも対応可能ですし、具体的なアクションの違い方によって、どっちを選択するかきまるでしょう。

回答がないみたいなので…

ご質問が一般論なので、回答も一般論になりますが、
ロールオーバー自体は同じことをやっているので、メニューが何個存在しようともと同じ方法で対処可能です。

どの様なページ構成なのか不明ですが、グローバルとアクティブのメニューが同じドキュメント内にあるのか、あるいは別ドキュメント(フレームなどで)あるのかで少し違ってきます。

別ドキュメントの場合はそれぞれのドキュメントで、単独にロールオーバーを考えればよいので簡単ですね。

同じドキュメント内でロ...続きを読む

Q【javascript】ロールオーバーと画像自動切換えがバッティングし

【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。

javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。
ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。
ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。

≪ロールオーバー≫
function initRollovers() {
if (!document.getElementById) return

var aPreLoad = new Array();
var sTempSrc;
var aImages = document.getElementsByTagName('img');

for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '_o'+ftype);

aImages[i].setAttribute('hsrc', hsrc);

aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;

aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}

aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}


≪画像切り替え≫
window.onload = function(){
var num = 1;
setInterval(function(){
document.getElementById('link' + num).style.display = 'none';
num = document.getElementById('link' + (num+1))? ++num : 1;
document.getElementById('link' + num).style.display = 'block';
},7500);
}

【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。

javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。
ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。
ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。

≪ロールオーバー≫
function initRollovers() {
if (!document.get...続きを読む

Aベストアンサー

全体がどのような記述をしているのか不明ですが、ご提示の通りだとすれば、initRollovers()が実行されていないので、ロールオーバーの設定がされていないということでは?

≪画像切り替え≫のwindow.onloadの最後に( } の手前)に1行追加して
 initRollovers();
を入れてあげればよさそうですが…

>他ページでは出来ているので
そのページはどこかでinitRollovers()を呼び出すようになっていると思うのですが…

QJavaScriptでの画像ロールオーバーについて教えて下さい。

非常に初歩的な事で申し訳ありません。
サイトのメニュー部分の画像をJavaScriptでマウスオーバー時に切替たいのですが、うまくいきません。
IE6とOpera9ではすべて表示できたのですが、Firefox1.5では一部の画像だけ切り替えられませんでした。
原因が分からず困っています。

function chImg(img, str){
document.images[img].src = str;}

よろしくお願いします。

Aベストアンサー

UPされたものを拝見しました。
文法上特におかしいところはありません。

マウスオーバーが効かないのは
製品案内のボタンひとつのみかと思います。

検討の結果imgタグの item というid名が良くないようです。
確かにjavascriptではitem()というオブジェクトがあります。
Ff、NNともに動きませんのでGeckoでは予約語なのかもしれません。

ともかく item を止めて、別のIDに変更してみてください。



.

QJavaScriptのロールオーバーに関わるスクリプトを外部に置きたい。

JavaScriptのロールオーバーに関わるスクリプトを
外部に置きたいと考えています。
このページのほかに、より良いと思われる記述方法はないでしょうか。いくつかサンプルがあればうれしいです。

オブジェクト指向JavaScript
http://web.paulownia.jp/script/rollover.html

Aベストアンサー

ロールオーバーに限ったサンプルではありませんが、参考URLの「イベントハンドラをHTMLから分離する」の各記事は参考になるかと思います。

参考URL:http://allabout.co.jp/career/javascript/library/mlibrary6.htm


人気Q&Aランキング

おすすめ情報