- ベストアンサー
マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- hokuto5131
- お礼率30% (7/23)
- ホームページ作成ソフト
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
画像がsweetsホルダーに入っているとして。 多分 福砂屋さんのページかなと思いますが、画像とTHMLファアイルが同じフォルダーに有る事を前提でやってみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> <script type="text/javascript"> <!-- myImageOut = new Image(); myImageOut.src = "IMG_1876.jpg"; myImageOver = new Image(); myImageOver.src = "IMG_1882.jpg"; function myMouseOut() { if ( document.images ) { document.changeImg.src = myImageOut.src; }} function myMouseOver() { if ( document.images ) { document.changeImg.src = myImageOver.src; }} //--> </script> </head> <body> <img border="0" name="changeImg" src="IMG_1876.jpg" onMouseOver="myMouseOver()" onMouseOut="myMouseOut()"> </body> </html>
その他の回答 (3)
- neyon_0
- ベストアンサー率50% (2/4)
下記参考URL 「ホームページできるかな／超初心者さん向きHP作成」 リンクURLの省略ということでしょうか？ 同じ場所かその配下にあるページへは URLの上位部分を省略できます。 貴方のページを例にすると http://sky.geocities.jp/hokuto5131/test.html というページにIMG_1876.jPG をリンクする。 この場合、～/hokuto5131 までを省略して リンク先を /gourmet/sweets/IMG_1876.jPG にするだけでリンクできます。(頭の/は付けた方が良い) つまり、ページと画像を同じ場所(hokuto5131)に置いてしまえば 画像のファイル名(IMG_1876.JPG)だけでリンクできる訳です http://sky.geocities.jp/hokuto5131/test.html http://sky.geocities.jp/hokuto5131/IMG_1876.JPG 自分以外のHPについても、同じ部分までは省略できるので http://sky.geocities.jp/に在るHPならここまでを省略できます すみませんがジオシティーズへのアップロード方法は判りかねます； ※正しくない言葉があるけれど説明の為です
- redhot32
- ベストアンサー率30% (55/179)
<SCRIPT language="JavaScript">から</SCRIPT>までを <HEAD>から</HEAD>内に置いてください。 そして<BODY>タグ以降の表示させたい部分に、 <a href="#" ～を置きます。 テストページのソースで言うなら、 <CENTER>～</CENTER>内のタグを全て消して、 <a href="#" ～のタグを置いてみてください。
お礼
どこにタグを入れたらいいのかよくわかりました。さっきやってみるとできました。丁寧に教えていただきありがとうございました。
- redhot32
- ベストアンサー率30% (55/179)
<HEAD> <TITLE>マウスオーバーで画像変更</TITLE> <SCRIPT language="JavaScript"> <!-- function changeImage(){ document.myimg.src="写真(１)のURL"; } function changeImage2(){ document.myimg.src="写真(２)のURL"; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <a href="#" onMouseover="changeImage()" onMouseOut="changeImage2()"><IMG src="写真(２)のURL" name="myimg" border="0"></a> </CENTER> </BODY> これで出来ると思います。
補足
回答ありがとうございます。やってみましたが、画像は入れ替わりませんでした。 ソースにコピペし、画像のURLを手直ししたのですが、<a href="#" ～の部分をソースの何処に入れて、今あるソースのその部分を削除すればいいのですか？ 自分でももう一度やってみますが・・・。よろしくお願いします。
お礼
先に投稿したいただいたれredhot32さんのやり方でもできましたが、私がしたかったのはyokohamamさんのような感じもものでした。丁寧に教えていただきありがとうございました。