• ベストアンサー

マウスオンの画像の切り替え

マウスオンで画像が切り替わるというJAVAソースですが、 違う位置に画像を表示させるというやり方を教えてください。 そのようなサイトをみてソースをみるのですが、 JAVAプログラムは全然知らないので、見ても どこがどうなっているのか、さっぱりわかりません。 本当に初心者とも言えないのですが、 何とか気の長い方、教えてください。

  • Java
  • 回答数2
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
noname#86982
noname#86982
回答No.2

HTMLタグについてはどのくらいご存知か分からないですが、<DIV>タグなんかは使ってみてはいかがでしょう? NNだと<LAYER>タグだったかな。 それらを使うと画面中任意の場所に画像が出せるのですが、javascriptを使って出したり消したりもできます。 良さげなものがあったので、参考にしてください。

参考URL:
http://www.justnet.ne.jp/javascript/sample/b08/index.htm

その他の回答 (1)

noname#86982
noname#86982
回答No.1

JAVAソースということですが、SCRIPTの方でしょうか?APPLETでしょうか? やりたいことは、 画像ボタンの上にマウスを乗せると他の場所に画像が表示されるというものでいいのでしょうか? この他の場所というのは、新しくウィンドウを開くのか、同じページ内で開きたいのか、そこのところもう少し詳しくお願いします。 あとアドバイスとして、JAVAまったくの初心者なら、同じようなことをしているサイトを見るより、検索サイトで「JAVA 初心者」とでもキーワードをうち、基礎から解説してくれているところで、少し勉強してみてはいかがでしょうか?

shizuku
質問者

お礼

さっそくのご回答をありかどうございます。 教えていただきたいことは JAVASCRIPTでおっしゃる通り、画像ボタンの上にマウスを乗せると他の場所に画像が表示されるというもの、そして、同じページ内で開きたいのです。 前に少し勉強して、同じ位置で画像を切り替えることは できたのですが、その応用がきかないんです。。。 そのときは、以下のように設置しました。 (長いまんまのせます、すみません) よろしくお願いします。 <script language="javascript"> <!---------------------------------------- if(navigator.appVersion.charAt(0) >= 3) { var img = new Array(); img[0] = new Image(); img[0].src = "reki-cg/0.gif"; img[1] = new Image(); img[1].src = "reki-cg/1.gif"; img[2] = new Image(); img[2].src = "reki-cg/2.gif"; img[3] = new Image(); img[3].src = "reki-cg/3.gif"; img[4] = new Image(); img[4].src = "reki-cg/4.gif"; img[5] = new Image(); img[5].src = "reki-cg/5.gif"; img[6] = new Image(); img[6].src = "reki-cg/6.gif"; img[7] = new Image(); img[7].src = "reki-cg/7.gif"; img[8] = new Image(); img[8].src = "reki-cg/8.jpg"; img[9] = new Image(); img[9].src = "reki-cg/9.jpg"; img[10] = new Image(); img[10].src = "reki-cg/10.jpg"; img[11] = new Image(); img[11].src = "reki-cg/11.jpg"; img[12] = new Image(); img[12].src = "reki-cg/12.jpg"; img[13] = new Image(); img[13].src = "reki-cg/13.jpg"; img[14] = new Image(); img[14].src = "reki-cg/14.jpg"; } function change_image(nam,num) { if(navigator.appVersion.charAt(0) >= 3) { document.images[nam].src = img[num].src; } } //----------------------------------------> </script> <base target="_self"> </head> <body background="reki-cg/bg.gif"> <div align="center"> <center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="left"><table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="bottom" align="left"><img src="reki-cg/reki-01.gif" width="57" height="37"></td> <td valign="bottom" align="left"><img src="reki-cg/reki-02.gif" WIDTH="224" HEIGHT="18"></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="left"><img src="reki-cg/reki-03.gif" WIDTH="57" HEIGHT="19"></td> <td valign="top" align="left"><img src="../../anime-02.gif" width="19" height="19" align="absmiddle"><img src="../../anime.gif" alt="anime.gif (846 バイト)" align="absmiddle" WIDTH="21" HEIGHT="10"><img src="../../anime-02.gif" width="19" height="19" align="center"></td> <td valign="top" align="left"><img src="reki-cg/reki-04.gif" WIDTH="161" HEIGHT="19"></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="left"><img src="reki-cg/reki-05.gif" WIDTH="281" HEIGHT="4"></td> </tr> </table> </td> </tr> </table> </center> </div> <table border="0" cellspacing="0" cellpadding="0" height="25"> <tr> <td width="100%"><img src="../../ichioshi/cg/back-back.gif" width="12" height="25"></td> </tr> </table> <div align="center"> <center> <table border="0" cellspacing="10" cellpadding="10"> <tr> <td width="70"><a href="kura.htm" onMouseOver="change_image('card1',8)" onMouseOut="change_image('card1',1)"> <img src="reki-cg/1.gif" name="card1" img border="0" width="61" height="61"></a></td> <td width="70"><a href="kitain.htm" onMouseOver="change_image('card2',9)" onMouseOut="change_image('card2',2)"><img src="reki-cg/2.gif" name="card2" img border="0" width="61" height="61"></a></td> <td width="70"><a href="tousyo.htm" onMouseOver="change_image('card3',10)" onMouseOut="change_image('card3',3)"><img src="reki-cg/3.gif" name="card3" img border="0" width="61" height="61"></a></td> </center> <td width="300" rowspan="3"> <p align="right"><img border="0" src="reki-cg/ph1.jpg" align="right" width="267" height="204"></td> </tr> <center> <tr> <td width="70"> <p align="center"><font color="#FFFFFF">Kawagoe</font></p> </td> <td width="70"><a href="shiro.htm" onMouseOver="change_image('card4',11)" onMouseOut="change_image('card4',4)"><img src="reki-cg/4.gif" name="card4" img border="0" width="61" height="61"></a></td> <td width="70"> <p align="center"><font color="#FFFFFF">History</font></p> </td> </tr> <tr> <td width="70"> <a href="rakan.htm" onMouseOver="change_image('card5',12)" onMouseOut="change_image('card5',5)"> <img src="reki-cg/5.gif" name="card5" img border="0" width="61" height="61"></a></td> <td width="70"> <a href="hikawa.htm" onMouseOver="change_image('card6',13)" onMouseOut="change_image('card6',6)"> <img src="reki-cg/6.gif" name="card6" img border="0" width="61" height="61"></a></td> <td width="70"> <a href="miyoshino.htm" onMouseOver="change_image('card7',14)" onMouseOut="change_image('card7',7)"> <img src="reki-cg/7.gif" name="card7" img border="0" width="61" height="61"></a></td> </tr> </table> </center> </div>

shizuku
質問者

補足

関連するQ&A

  • マウスオンで画面中央に別の画像を表示する方法

    マウスが文字や画像の上にきた時(マウスオン)に、lightboxのように、画面の中央に別の画像を表示させるには、どうやればいいのか教えてください。 javaの関連記事を検索していますが、元の画像の位置が基準となっているものばかりです。 現在は、lightboxでしていますが、これは、クリックする必要があるので、マウスオンでやりたいと思っています。よろしくお願いします

  • 【javascript】マウスオンで画像表示を変更させる。

    【javascript】マウスオンで画像表示を変更させる。 マウスオンで画像の切り替えはできますが、 http://www.hotpepper.jp/ フームーの写真ギャラリーように切り替え時にぼかしたいのですが、 これは簡単な事でしょうか? そういったタグを紹介しているサイト等ご存知でしょうか?

  • ☆滑らかな画像切り替え☆

    私はJava Scriptに関しては全くの素人です。 現在Java及びVisual C++を勉強中です。 今回滑らかに画像を表示するスライドショーやノベルゲームに似たものを作っているのですが、Javaで行っているとどうしても画像の表示が遅く、断続的に見えてしまうため連続に見せるにはどうすれば良いか調べたところ、Java Scriptに行き着きました。 しかしながら、Java ScriptはJavaとは別物だということもあって一から勉強することを少々ためらっています。(学校の授業の都合もあり。。。) どうしても連続で見せるにはJava Scriptが必要なら、やってみようと思いますがいまだ私の持ちえる情報が少なく決断に至っておりません。 以上の点を踏まえた上で、Javaでも構わないのではないか?もしくはJava Scriptに変えるべきだという意見等ありましたら、回答をいただけるとありがたいです。

  • マウスオンで画像を切り替える(パズルのな画像の組み合わせ)

    マウスオンで画像を切り替える(パズルのな画像の組み合わせ) 添付画像のようにパズルのような複数の画像の組み合わせを フラッシュを使わずにマウスオンで切り替える事はできますか? イメージマップでできるのなら一番嬉しいのですが。 参考になりそうなサイトでもかまいませんので教えてください。

    • ベストアンサー
    • HTML
  • マウスオンで画像を切り替える(パズルのな画像の組み合わせ)

    マウスオンで画像を切り替える(パズルのな画像の組み合わせ) 添付画像のようにパズルのような複数の画像の組み合わせを フラッシュを使わずにマウスオンで切り替える事はできますか? イメージマップでできるのなら一番嬉しいのですが。 参考になりそうなサイトでもかまいませんので教えてください。

    • ベストアンサー
    • HTML
  • javaを使ってマウスオンでの画像切替について

    javaを使って、ある1つの画像にマウスを乗せると、 他の場所にある画像2つが同時に入れ替わるという事を行いたいのですが どうしても上手くいきません。 例えば・・・ ┌─────┐ │◇画像A◇ │ └─────┘ ┌─────┐ │○画像B○ │ └─────┘ ┌─────┐ │☆画像C☆ │ └─────┘ とあるとしたら、 画像Aにマウスを乗せた場合、画像Cと画像Dが 他の画像になるようにしたいのです。 ┌─────┐ │◇画像A◇ │←これにマウスオン └─────┘ ┏━━━━━┓ ┃●画像B● ┃ ┗━━━━━┛←画像Bと画像Cが ┏━━━━━┓←同時に他の画像に変わる ┃★画像C★ ┃ ┗━━━━━┛ 画像Aはマウスを乗せても変化は無いままで、 画像Bと画像Cは異なる画像です。 マウスを画像Aから放したら、元の画像に戻るようにしたいと考えています。 さらに、同ページ内に複数使用したいのです。      ~~~~~~~~~~~~~~~~~~~~~ if (document.images) { var img0 = new Image(); img0.src = "○画像B○"; var img1 = new Image(); img1.src = "●画像B●"; function On(name) { if (document.images) { document.images['ネーム'].src = eval(name + '.src');}} function Off() { if (document.images) { document.images['ネーム'].src = img0.src;}} を応用して、どうにかならないかな…と思ったのですが、 どうにもなりませんでした。 もしかしたら、応用のやり方が間違えているのかもしれません。 あまり詳しくないので・・・。 どこを探してもサンプル等見つからず、困っています。 どなたか教えて下さい。どうぞ宜しくお願いします。

  • gooブログで「マウスオン」がうまく出来ません

    ブログで新規投稿するのですが、「マウスオン」がうまく出来ません。 gooブログの編集画面「TEXTエディター」でタグを書いて、プレビューではうまく動作するのですが、 一度、下書きで「投稿」すると、マウスオンのタグが消えてしまって<img>だけになってしまいます。 もちろん完成で投稿してもダメです。 タグは次の通りです。 <img src="はじめの画像のURL"onmouseover"this.src='次の画像のURL'"onmouseout="this.src='はじめの画像のURL'"> 過去に投稿してマウスオンの成功実績のあるタグとまったく同じものをコピーして何度も実験しますが、同じく消えてしまいます。 パソコンに問題があるのでしょうか? 過去に成功したときはWinMeでしたが、現在は買い換えたWinXpです。 よくわかりませんが、XPとかJavaとかインターネットオプションの設定等が動作を制限しているのでしょうか? ブラウザをIEとFirefoxでも試してみましたが、同じく消えてしまいます。 カスタムテンプレートから既成のテンプレートに変えても同じです。 このような現象の原因について、どなたかお判りになりましたら教えてくださいませ。

  • Classファイル → Javaソースプログラム

    どーも、こんにちは。プログラミング初心者です。 現在Javaを使ってプログラムをしています。 JavaはJavaソースをコンパイルするとClassファイルが生成されるじゃないですか? では逆に、ClassファイルからもとのJavaソースプログラムに変換する(?)、取り戻すことはできないのでしょうか??? もしかして無理なのかもしれませんが、これが出来ないとどうしていいか分かりません。 どうしても、ソースプログラムが見たいClassファイルがあるのです。 そんな状態なので困っています。 どなたか少しでもご存知の方は、ご一報ヨロシクお願いします!!

    • ベストアンサー
    • Java
  • オンマウスで画像表示+表示した画像にリンク

    オンマウスで画像表示+表示した画像にリンク はじめまして。 今サイトを作っています。 ↓このサイトの中央部分に大きな画像とその上に タブが並んでいるのがお分かりになりますでしょうか?(参考サイト) http://www.rakuten.ne.jp/gold/han-world/ タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。 こういうものとジャバスクリプトで同じ風にしたいです。 (参考サイトはフラッシュで作成されています) タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが 大きな画像にリンクさせるほうほうがよくわかりませんでした。 どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。 どうぞお力をお貸しください 宜しくお願いいたします!

  • なぜ画像が見れないのか?

    仲間が送ってくれるANFYで作成したスライドが見れません。音声の再生はできるのですが、画像が白地のままです。 コンソルの内容をみるとこんな表示です。 java.lang.OutOfMemoryError: Java heap space at AnFade.init(AnFade.java) at sun.applet.AppletPanel.run(Unknown Source) at java.lang.Thread.run(Unknown Source) どのようにすれば、見れるようになるのでしょうか。 お願いします。