締切済み

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

2005/07/21 16:46

ウェブ制作の納期がせまっているにも関わらず、知識不足で技術的に対応できません。コーディング方法を教えて頂けますでしょうか。 ------------------------------------- | | | 空間 | | | ------------------------------------- [会社概要]　[English Instructor]　[中国語講座] 1 2 3 1つの空間と3つの画像がある。ページ読み込み時は「空間」に5行の企業メッセージが表示。＊背景はブルー、文字色はホワイト [会社概要]画像をマウスオーバーすると「空間」に3行の会社概要文が表示。マウスをはずすと5行の企業メッセージに戻る。＊背景はブルー文字色はホワイト [English Instructor]画像をマウスオーバーすると「空間」に3行の英語文が表示。マウスをはずすと5行の企業メッセージに戻る。 URL01（仮）にリンク。＊背景はブルー、文字色はホワイト [中国語講座]画像をマウスオーバーすると「空間」に3行の英語文が表示。マウスをはずすと5行の企業メッセージに戻る。 URL02（仮）にリンク。＊背景はブルー、文字色はホワイト

周防大島の大野圭司は島おこし日本代表へ！（@justman）
お礼率48% (18/37)

JavaScript
回答数9
ありがとう数29

みんなの回答 （9）
専門家の回答

みんなの回答

clenai
ベストアンサー率36% (4/11)

2005/07/23 19:05 回答No.9

こんばんは。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>

質問者

お礼 2005/07/25 23:43

clenaiさん問題解決しました！どうもありがとうございます。これで一安心です～

taseki
ベストアンサー率66% (155/233)

2005/07/23 17:46 回答No.8

あくまでも推測ですが…。 ------------- 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>

質問者

お礼 2005/07/25 23:45

tasekiさん色々とお手数をおかけしましたが、コーディングの問題解決しました！何度もご丁寧にありがとうございました！

taseki
ベストアンサー率66% (155/233)

2005/07/23 17:32 回答No.7

話題が外れてしまって申し訳ないんですが。私のほうでは、safari（今は手元にないのでバージョンは未確認）でもNNでも問題ないんですよね…。で、ANo.4 の捕捉欄でjustmanさんが載せているリンクは、確かにエラーになります。ソースを見ると「￥」円サインが、なぜか化けています。 ANo.3の捕捉欄のソースもよく見ると、この問題の部分がスラッシュ？になっている？？ jamslotさんのおっしゃるようにエスケープ自体をやめると問題ないようですね。考えられるのは、N_A_Oさんのおっしゃるように、ここのページからエディターにコピーするときが怪しい気がします。 justmanさんがコピー貼り付けたエディタの画面を良く見ていただいて、「3行の英語文」の後方にある「￥」がどうなっているか、確認していただけないでしょうか。ちなみに、document.getElementById、document.all、などはブラウザならびにバージョンによって使えないものもあります。 document.getElementById あたりは最近のものなら無難かなというあたりかと思います。

jamslot
ベストアンサー率29% (14/48)

2005/07/23 14:56 回答No.6

こんにちは！私も試してみましたよ 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"> とかの文字コードを記述した方がよいと思いますよ！頑張って下さいね～

N_A_O
ベストアンサー率66% (37/56)

2005/07/23 14:50 回答No.5

横レスで御免ね。前に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>

taseki
ベストアンサー率66% (155/233)

2005/07/22 21:42 回答No.4

私の環境では以下のコードで動くのですが…もしかして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>

質問者

補足 2005/07/23 10:27

あの。。 winのIEでも動作しません。これは、何か根本的におかしいですね。僕が勘違いしてますか。

taseki
ベストアンサー率66% (155/233)

2005/07/21 18:34 回答No.3

safariでしたか。というかサンプルコードはあまり環境のこと考えていませんでした。以下の行 divInfo.innerHTML = InfoText[InfoID]; という部分を、 document.getElementById("divInfo").innerHTML = InfoText[InfoID]; に変えてみてください。

質問者

補足 2005/07/22 21:19

ご連絡遅くなりました。ご返信ありがとうございます！けど。。まだ動きません。ちなみに、友人の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> これをそのままコピペでいいのですよね？

taseki
ベストアンサー率66% (155/233)

2005/07/21 18:07 回答No.2

> 頂いたコードをそのままコピペして使用したのですが、 > マウスオーバーしても青部分に文字が現れません。。 <html>から</html>まで全行をコピーして貼り付けても、動きませんか？私の環境では問題なく動きます。スクリプト（アクティブコンテンツ）をブロックするように設定していませんか？

質問者

補足 2005/07/21 18:18

使用osはmac os10.4で使用ブラウザはsafariです。セキュリティにてjavaScriptは有効になっています。 tasekiさんはwinですか？

taseki
ベストアンサー率66% (155/233)

2005/07/21 17:16 回答No.1

サンプルコードです。「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>

質問者

お礼 2005/07/21 17:32

tasekiさん早速のお返事ありがとうございます。たいぶ、わかってきました。ただ、僕の勉強不足のためまだ解決していません。頂いたコードをそのままコピペして使用したのですが、マウスオーバーしても青部分に文字が現れません。。補足説明して頂けますでしょうか。もしかして、以下を細工するのですか？ function InfoChange(InfoID) { divInfo.innerHTML = InfoText[InfoID]; }