アプリでもっと教えて！goo

アプリ版：「スタンプのみでお礼する」機能のリリースについて

画像マウスオーバーで説明文を表示したい。

締切済

質問者：justman
質問日時：2005/07/21 16:46
回答数：9件

ウェブ制作の納期がせまっているにも関わらず、知識不足で
技術的に対応できません。コーディング方法を教えて頂けま
すでしょうか。
-------------------------------------
| |
| 空間 |
| |
-------------------------------------
[会社概要]　[English Instructor]　[中国語講座]
1 2 3

1つの空間と3つの画像がある。

ページ読み込み時は「空間」に5行の企業メッセージが表示。
＊背景はブルー、文字色はホワイト

[会社概要]画像をマウスオーバーすると「空間」に3行の会社概要文が表示。
マウスをはずすと5行の企業メッセージに戻る。
＊背景はブルー文字色はホワイト

[English Instructor]画像をマウスオーバーすると「空間」に3行の英語文が表示。
マウスをはずすと5行の企業メッセージに戻る。
URL01（仮）にリンク。
＊背景はブルー、文字色はホワイト

[中国語講座]画像をマウスオーバーすると「空間」に3行の英語文が表示。
マウスをはずすと5行の企業メッセージに戻る。
URL02（仮）にリンク。
＊背景はブルー、文字色はホワイト

この質問への回答は締め切られました。

質問の本文を隠す

回答 (9件)

最新から表示
回答順に表示

No.1

回答者： taseki
回答日時：2005/07/21 17:16

サンプルコードです。

「URL01（仮）にリンク」というのが、mouseoverで表示されるメッセージの中なのかボタンなのかが判らなかったのですが、mouseover時だけリンクテキストが表示されても意味がないのでは（マウスではクリックできない）。
-----------------------
<html>
<head>
<style type="text/css">
#divInfo a { color: #C0FFC0; }
</style>
<script type="text/javascript">

</script>
</head>
<body onload="InfoChange(0)">
<div style="color:#FFFFFF;background-color:#0000FF;height:100px;" id="divInfo"></div>
<a href="url0.html" onmouseover="InfoChange(1)" onmouseout="InfoChange(0)">会社概要</a>，
<a href="url1.html" onmouseover="InfoChange(2)" onmouseout="InfoChange(0)">English Instructor</a>，
<a href="url2.html" onmouseover="InfoChange(3)" onmouseout="InfoChange(0)">中国語講座</a>
</body>
</html>

- 0
- 件

この回答へのお礼

tasekiさん

早速のお返事ありがとうございます。
たいぶ、わかってきました。

ただ、僕の勉強不足のためまだ解決していません。
頂いたコードをそのままコピペして使用したのですが、
マウスオーバーしても青部分に文字が現れません。。

補足説明して頂けますでしょうか。

もしかして、以下を細工するのですか？
function InfoChange(InfoID) {
divInfo.innerHTML = InfoText[InfoID];
}

お礼日時：2005/07/21 17:32

No.2

回答者： taseki
回答日時：2005/07/21 18:07

> 頂いたコードをそのままコピペして使用したのですが、

> マウスオーバーしても青部分に文字が現れません。。

<html>から</html>まで全行をコピーして貼り付けても、動きませんか？
私の環境では問題なく動きます。
スクリプト（アクティブコンテンツ）をブロックするように設定していませんか？

この回答への補足

使用osはmac os10.4で
使用ブラウザはsafariです。

セキュリティにてjavaScriptは有効になっています。

tasekiさんはwinですか？

補足日時：2005/07/21 18:18

- 0
- 件

No.3

回答者： taseki
回答日時：2005/07/21 18:34

safariでしたか。

というかサンプルコードはあまり環境のこと考えていませんでした。
以下の行

divInfo.innerHTML = InfoText[InfoID];

という部分を、

document.getElementById("divInfo").innerHTML = InfoText[InfoID];

に変えてみてください。

この回答への補足

ご連絡遅くなりました。
ご返信ありがとうございます！

けど。。

まだ動きません。
ちなみに、友人のwinのfirefoxでも文字が出て来ません。。

なぜでしょう。

根本的に僕がなにかまちがっているのか。

<html>
<head>
<style type="text/css">
#divInfo a { color: #C0FFC0; }
</style>
<script type="text/javascript">

</script>
</head>
<body onload="InfoChange(0)">
<div style="color:#FFFFFF;background-color:#0000FF;height:100px;" id="divInfo"></div>
<a href="url0.html" onmouseover="InfoChange(1)" onmouseout="InfoChange(0)">会社概要</a>，
<a href="url1.html" onmouseover="InfoChange(2)" onmouseout="InfoChange(0)">English Instructor</a>，
<a href="url2.html" onmouseover="InfoChange(3)" onmouseout="InfoChange(0)">中国語講座</a>
</body>
</html>

これをそのままコピペでいいのですよね？

補足日時：2005/07/22 21:19

- 0
- 件

No.4

回答者： taseki
回答日時：2005/07/22 21:42

私の環境では以下のコードで動くのですが…もしかしてsafariのバージョンのせい？

IEでは動きますか？
--------------------
<html>
<head>
<style type="text/css">
#divInfo a { color: #C0FFC0; }
</style>
<script type="text/javascript">

</script>
</head>
<body onload="InfoChange(0)">
<div style="color:#FFFFFF;background-color:#0000FF;height:100px;" id="divInfo"></div>
<a href="url0.html" onmouseover="InfoChange(1)" onmouseout="InfoChange(0)">会社概要</a>，
<a href="url1.html" onmouseover="InfoChange(2)" onmouseout="InfoChange(0)">English Instructor</a>，
<a href="url2.html" onmouseover="InfoChange(3)" onmouseout="InfoChange(0)">中国語講座</a>
</body>
</html>

この回答への補足

あの。。
winのIEでも動作しません。

これは、何か根本的におかしいですね。
僕が勘違いしてますか。

補足日時：2005/07/23 10:27

- 0
- 件

No.5

回答者： N_A_O
回答日時：2005/07/23 14:50

横レスで御免ね。

前にLayerでのアドバイスしようと思ってたら削除されてて、で今回のtasekiさんの方が良いので。
前質問の削除前の資料(そのままじゃないよ)に、tasekiさんのスクリプトで動作確認済。FF、IE、NN、Safari。
動作しないのは、コピーペーストする時のSafari又はテキストエディターの設定じゃないかな。
LINKを見たら、IEは動作する。FF、NN、Safariは動作しないのでソースをみたら\が無かったり他の文字にになってる。IEはちゃんとある。何故だか解らない。
それから、divInfo.innerHTML = InfoText[InfoID];　は、NNはダメみたい。

下記参照。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>ああああセンター</TITLE>
<META HTTP-EQUIV="Content-Language" CONTENT="ja">
<META HTTP-EQUIV="Content-STYLE-TYPE" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META NAME="Author-Corporate" CONTENT="いいいいいは健康トラベラー">
<META NAME="Keywords" CONTENT=",,,,,,,">
<META NAME="Description" CONTENT="">
<META NAME="Author" CONTENT="周防大島のううううは島スタイル編集長">
<SCRIPT SRC="js/obc01.js" TYPE="text/javascript"></SCRIPT>
<LINK REL="index" HREF="index.html">
<LINK REL="made" HREF="mailto:k-kkkkkk@glova.co.jp">
</HEAD>

<script type="text/javascript">
//"　Keep all content on ONE line　この間改行不可一行で全角スペース可。"
var InfoText = new Array(
"株式会社ああああセンター(以降OOO －Oooooooo Bbbbbbbbbbbb Cccccc Co.,Ltd.)は、<br>英語による「グローバルなコミュニケーション能力の開発」「人間としての<br>アイデンティティの確立」をテーマに掲げ、１９７８年３月に設立いたしました。<br>現在では、ABCメソッド（OOOが開発した英語力養成の手法）が評価され、<br>英語戦略を要する大手企業０００社から導入頂いております。",
"株式会社ああああセンター Oooooooo Bbbbbbbbbbbb Cccccc Co.,Ltd<br>〒000-0000 東京都あいう区えおか0-0-0<br>Tel : 03-0000-0000（代表）　Fax : 03-0000-0000　URL = http://www.abc-de.jp<br>設立：1900年3月10日　代表者：あいうえ",
"OOO-English is looking for motivated and skilled English language<font color=\"#0000ff\">＿＿＿＿.</font><br>instructors to fill various positions throughout Japan. If you're interested<font color=\"#0000ff\">＿＿</font><br>in challenging and rewarding teaching positions, register with OOO-English<font color=\"#0000ff\">.</font><br>now.<br>＊http://www.eeeeeeeeeee/OOO-Englishinstructor",
"OOO-English is looking for motivated and skilled English language<br>instructors to fill various positions throughout Japan. If you're interested<br>in challenging and rewarding teaching positions, register with OOO-English<br>now.<br>＊http://www.ccccccc.jp/boshu");

function InfoChange(InfoID) {
document.getElementById("divInfo").innerHTML = InfoText[InfoID];
}
-->
</script>

<BODY BGCOLOR="#000000" BACKGROUND="img/bg.gf" TEXT="#ffffff" LINK="#ffffff" ALINK="#ffffff" VLINK="#ffffff" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" onload="InfoChange(0)">
<A NAME="top"></A>


<DIV ALIGN="center">
<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#ffffff" SUMMARY="">
<TR><TD BGCOLOR="#ffffff"><IMG SRC="img/space.gif" WIDTH="1" HEIGHT="50" BORDER="0" ALT=""></TD></TR>
<TR><TD><IMG SRC="img/top_header.gif" WIDTH="750" HEIGHT="112" BORDER="0" ALT=""></TD></TR>
</TABLE>

<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#ffffff" SUMMARY="">
<TR><TD VALIGN="top"><A HREF="http://www.eeeeeeeeeee.com" onMouseover="imgChange('btn01','img02')" onMouseout="imgChange('btn01','img01')"><IMG SRC="img/menu_english_01.jpg" WIDTH="259" HEIGHT="294" BORDER="0" NAME="btn01" ALT="英会話研修、非集合研修、通訳教育"></A></TD>
<TD VALIGN="top"><A HREF="http://www.ccccccc.jp" onMouseover="imgChange('btn02','img03')" onMouseout="imgChange('btn02','img04')"><IMG SRC="img/menu_china_02.jpg" WIDTH="239" HEIGHT="294" BORDER="0" NAME="btn02" ALT="中国語研修、日中ビジネスセミナー、翻訳・通訳"></A></TD>
<TD VALIGN="top"><A HREF="http://www.eeeeeeeeeee.com/iiiiii-kkkkkkhtml" onMouseover="imgChange('btn03','img05')" onMouseout="imgChange('btn03','img06')"><IMG SRC="img/menu_inter_02.jpg" WIDTH="252" HEIGHT="294" BORDER="0" NAME="btn03" ALT="異文化間コミュニケーション、研修
異文化対応能力検定（ICAPS）"></A></TD></TR>
<TR><TD COLSPAN="3" BGCOLOR="#0C429B" ALIGN="center" VALIGN="middle" HEIGHT="200">

<div style="color:#FFFFFF;background-color:#0C429B;height:100px;" id="divInfo"></div>
</TD></TR>
</TABLE>

<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#ffffff" SUMMARY="">
<TR><TD><IMG SRC="img/menu01.jpg" WIDTH="250" HEIGHT="20" BORDER="0" ALT="会社概要" onmouseover="InfoChange(1)" onmouseout="InfoChange(0)"></TD>
<TD><A HREF="http://www.eeeeeeeeeee/OOO-Englishinstructor"><IMG SRC="img/menu02.jpg" WIDTH="250" HEIGHT="20" BORDER="0" ALT="English Instructor" onmouseover="InfoChange(2)" onmouseout="InfoChange(0)"></A></TD>
<TD><A HREF="http://www.ccccccc.jp/boshu"><IMG SRC="img/menu03.jpg" WIDTH="250" HEIGHT="20" BORDER="0" ALT="中国語講座" onmouseover="InfoChange(3)" onmouseout="InfoChange(0)"></A></TD></TR>
</TABLE>

</DIV>
</DIV>
</BODY>
</HTML>

- 0
- 件

No.6

回答者： jamslot
回答日時：2005/07/23 14:56

こんにちは！私も試してみましたよ

Mac8.6 IE5.1では問題ないようですが、MacX Safariだと確かに動かないようですね。

下記の所を訂正すると動くようになりましたよ
元
"～3行の英語文～<br>～3行の英語文～<a href=\"url1\">URL1</a><br>……",
"～3行の英語文～<br>～3行の英語文～<a href=\"url2\">URL2</a><br>……",

訂正
"～3行の英語文～<br>～3行の英語文～<a href='url1'>URL1</a><br>……",
"～3行の英語文～<br>～3行の英語文～<a href='url2'>URL2</a><br>……",

どうやらエスケープがうまく認識できないようですね。\"の部分を全て'（シングル）に変更すれば作動すると思います。
あと蛇足ですが、サファリのデフォルト設定では文字化けするようですので<head></head>内に
<META http-equiv="content-type" content="text/html; charset=Shift_jis">
とかの文字コードを記述した方がよいと思いますよ！
頑張って下さいね～

- 0
- 件

No.7

回答者： taseki
回答日時：2005/07/23 17:32

話題が外れてしまって申し訳ないんですが。

私のほうでは、safari（今は手元にないのでバージョンは未確認）でもNNでも問題ないんですよね…。
で、ANo.4 の捕捉欄でjustmanさんが載せているリンクは、確かにエラーになります。ソースを見ると「￥」円サインが、なぜか化けています。
ANo.3の捕捉欄のソースもよく見ると、この問題の部分がスラッシュ？になっている？？
jamslotさんのおっしゃるようにエスケープ自体をやめると問題ないようですね。

考えられるのは、N_A_Oさんのおっしゃるように、ここのページからエディターにコピーするときが怪しい気がします。
justmanさんがコピー貼り付けたエディタの画面を良く見ていただいて、「3行の英語文」の後方にある「￥」がどうなっているか、確認していただけないでしょうか。

ちなみに、document.getElementById、document.all、などはブラウザならびにバージョンによって使えないものもあります。
document.getElementById
あたりは最近のものなら無難かなというあたりかと思います。

- 0
- 件

No.8

回答者： taseki
回答日時：2005/07/23 17:46

あくまでも推測ですが…。

-------------
justmanさんがお使いのエディターでは、このページ（あるいはWebページ）からコピー貼り付けすると、なぜか「￥」が化ける。もしかしたら制御文字として扱われるのか、あるいは他の問題か。
そしてその化けた文字（おそらく未定義文字）を、ここに投稿しようとすると、自動置き換えでバックスラッシュに変換されて投稿される。
-------------
こんなところでしょうか。
そしてjamslotさんのご報告によると、一部のsafariではエスケープ文字が機能しない。

なので、問題の個所をシングルクォートにすれば、とりあえず動くと思います。
以下で試してみてください。

----------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_jis">
<style type="text/css">
#divInfo a { color: #C0FFC0; }
</style>
<script type="text/javascript">

</script>
</head>
<body onload="InfoChange(0)">
<div style="color:#FFFFFF;background-color:#0000FF;height:100px;" id="divInfo"></div>
<a href="url0.html" onmouseover="InfoChange(1)" onmouseout="InfoChange(0)">会社概要</a>，
<a href="url1.html" onmouseover="InfoChange(2)" onmouseout="InfoChange(0)">English Instructor</a>，
<a href="url2.html" onmouseover="InfoChange(3)" onmouseout="InfoChange(0)">中国語講座</a>
</body>
</html>

- 0
- 件

この回答へのお礼

tasekiさん

色々とお手数をおかけしましたが、
コーディングの問題解決しました！

何度もご丁寧にありがとうございました！

お礼日時：2005/07/25 23:45

No.9

回答者： clenai
回答日時：2005/07/23 19:05

こんばんは。

IEでは正常に動きます。こんな感じでしょうか？<html>
<head>
<style type="text/css">
</style>
<script language="JavaScript">
</script>
</head>
<body onload="h(0)">
<div id="info"style="background-color:blue;color:#ffffff;height:80px;font-size:12px;">

</div><br>

<table><Tr><td>
<div class="link"onmouseover="h(1)"onmouseout="h(0)">
会社概要
</div> </td><Td>
<div class="link"onmouseover="h(2)"onmouseout="h(0)">
English Instructor
</div></td>
<td>
<div class="link"onmouseover="h(3)"onmouseout="h(0)">
中国語講座
</div>
</td>
</tr>
</table>
</body>
</html>

- 0
- 件

この回答へのお礼

clenaiさん

問題解決しました！
どうもありがとうございます。

これで一安心です～

お礼日時：2005/07/25 23:43

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

質問する（無料）

似たような質問が見つかりました

美術・アートデザインについての考察。なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
WordPress（ワードプレス）ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
Google Drive Googleドライブの警告メッセージを消す方法 4 2022/09/21 06:04
HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える？ 2 2023/02/01 12:01
格安スマホ・SIMフリースマホ対処法あれば、教えて下さい。 2 2022/08/13 12:45
Visual Basic（VBA） ExcelのVBAコードについて教えてください。 1 2023/04/21 13:46
Word（ワード） Wordの「背景色を消す方法」教えてください 1 2022/05/15 19:32
日本語時間的背景・空間的背景という言い方 2 2022/05/04 15:18
HTML・CSS htmlです。上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48

関連するカテゴリからQ&Aを探す

ページトップ

おすすめ情報

質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報