• 締切済み

こんなJavaScript探してます！

はじめまして。 早速ですが、下記のようなジャバスプリクトを探しています。 ------------------------------------------- ┌──────────┐　 │　　　　　　　　　　　　　　　 │ │　　　　Ａ　　　　　　　　　　 │ └──────────┘　←４枚とも画像です。 ┌─┐┌─┐┌─┐ │ １││２ ││３ │　 └─┘└─┘└─┘　　 １の画像にマウスオンすると、１とＡの画像が別の画像が表示され（すり替えられ）尚且つ１をクリックで別ページにジャンプ。 １※　１・２・３ともリンク先は異なる ２※　マウスオーバー時に表示される画像は1とAとでは異なる ３※　２・３も同様の機能がある ------------------------------------------- 探してみたところ http://bunjin.com/java/change_img0.htmlが近いように思えますが、 このスプリクトを応用してできるでしょうか？ JavaScriptでなくても、こんな方法で出来る等、お教え頂ければ幸いです！ 宜しくお願い致します。

みんなの回答

回答No.1

マウスオンというのがどういう状態かわかりませんが、 カーソルを重ねる（マウスオーバー）という意味なら、以下のように書けると思います。 <a href="1.html" onmouseover="chng_img(0,0)">画像1</a> <a href="2.html" onmouseover="chng_img(0,1)">画像2</a> <a href="3.html" onmouseover="chng_img(0,2)">画像3</a>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 簡単なJavaScriptなんですが

    セル内にボタン（menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver３で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>

  • javascriptの記述について

    私は今javascriptを独学で勉強をしていて、勉強した範囲内で自分で作成してみようと思いjavascriptのプログラムを 書いています。 やりたいこととしては メイン画像があり、その下に三つボタンを作成し、 その三つのボタンのどれか一つにマウスを持っいくとメイン画像が切り替わるという javascriptを作成しています。 またその三つのボタンにはそれぞれメイン画像が切り替わるようにイベントをだしています。 html側 <body> <div id="image"> <img src="image/main-image.jpg" /> </div> <div id="bottonbox"> <div id="botton1"> <img src="image/staff01.png" /> </div> <div id="botton2"> <img src="image/staff01.png" /> </div> <div id="botton3"> <img src="image/staff01.png" /> </div> </body> javascript window.addEventListener('load',photo_change,false); function photo_change(event){ var elem = document.getElementById('botton1'); elem.addEventListener('mouseover',botton1,false); elem.document.getElementById('botton2'); elem.addEventListener('mouseover',botton2,false); elem.document.getElementById('botton3'); elem.addEventListener('mouseover',botton3,false); } function botton1(event){ var img_change = document.getElementById('image'); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } ※botton2,3はsrc=画像名だけが違うだけで、botton1関数と同じの為、省略します。 これを実行すると、もともとあるメイン画像がremoveされず、下に新しい画像が表示されてしまいます。 ブレークポイントをつけてトレースしたのですが、どうやらimg_change.removeChild(img_change.firstChild); でremoveされていないらしくなぜか二回目にremoveされます。 ですので、試しに function botton1(event){ var img_change = document.getElementById('image'); //removeChild二回やってみる img_change.removeChild(img_change.firstChild); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } こうするともともとあったメイン画像がremoveされ、botton1にマウスを載せた時に 表示させようとしていた画像がちゃんと表示されます。 ですが、なぜ一回のimg_change.removeChild(img_change.firstChild);では メイン画像をremoveできないのでしょうか。 どなたかわかる方おしえていただけますでしょうか。 また、どこが悪いのか、など解説も付け加えていただけると幸いです。

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

    非常に初歩的な事で申し訳ありません。 サイトのメニュー部分の画像をJavaScriptでマウスオーバー時に切替たいのですが、うまくいきません。 IE6とOpera9ではすべて表示できたのですが、Firefox1.5では一部の画像だけ切り替えられませんでした。 原因が分からず困っています。 function chImg(img, str){ document.images[img].src = str;} よろしくお願いします。

  • フレームをまたいでサブメニューを表示（JavaScriptで）

    http://www.milonic.com/menu/frames/ のようなことがしてみたいのですが、どのようにしたらいいのでしょうか？ また、JavaScriptで、（ａ）という画像にマウスオーバーしたら（ｂ）という画像を動かす、ということができますが、このとき画像は、cssを使って位置指定で行いますよね？ 元の（ｂ）という画像を<img>で書くときも stype="position:… と指定しておかないとダメみたいですが、この指定をしない方法なんてあるのでしょうか？ それと（Ａ）という画像にマウスーオーバーしたら、今まで表示されていなかった（Ｂ）という画像を、指定の位置に表示、ということをするにはどうしたらいいのでしょうか？ 質問が多くなってしまいましたが、どれかひとつでも答えていただければ幸いです。 よろしくお願いいたします。

  • Javascriptのマウスオーバーについて

    Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考：http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを　同じページ内で　いくつも表示させるのは可能ですか？？（上記参考ＵＲＬでたとえると、大きな画像１つと小さな画像４つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか？？） もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。

  • JavaScriptを埋め込むには？

    こんにちは。よろしくお願いします。 現在、JavaScriptの使用が禁止されているスペースで、HPを作成していますが どうしてもポップアップを使いたいので、JavaScriptの使用が可能なスペースで 画像をクリックするとリンク先にジャンプし、ポップアップが表示されるように作成しました。 そのURLを、JavaScript使用禁止のページの画像に埋め込んだところ 当たり前ですが、JavaScriptが埋め込まれた画像が表示され その画像をクリックしないと、リンク先ジャンプ＆ポップアップ表示されません。 JavaScript禁止ページの画像クリック→リンク先ジャンプ＆ポップアップとするには どのように作成すれば良いでしょうか？ JavaScriptに関して、全くの初心者なもので、分かりづらい説明ですが どうぞ、よろしくお願いいたします。

  • JavaScript超初心者の質問です。初心者というよりほとんど使った事がありません。

    JavaScriptの事は全く知りません。 現在ビルダーを使ったHPを作成中です。 そこで自分のやりたい事があるのですが、それを調べていく内にJavaScriptだったら、それが可能かもという結論に達しました。 でも使い方が全くわからなくて、それでここで質問しました。 マウスオンで別の画像を表示させるという事なのですが、タダ単に表示させるのではなくて、日本地図の北海道の上にマウスを置くと北海道の人口、人工密度、男女比、年齢別比、などを別の画像で表示させたいのです。 一枚の画像の中で、マウスオンの場所をいくつも設定する事は可能なのでしょうか？ また可能であれば方法を教えて頂けませんでしょうか？ 座標を設定するみたいな事は以前何かで見たことがあるのですが、やり方が全くわかりません。 わかりにくい質問の仕方ですが、どなたかよろしくお願い致します。

  • JavaScriptでリンクを設定したい

    JavaScript超初心者です。 サイトで画像やテキストリンクが1ページにとても多く、 リンクアドレスも同一のものが数か所あります。 JavaScriptでリンクを設定すれば、リンクだらけにならないと聞いたので 使ってみようと思ったのですが、上手くいきません。 http://www.openspc2.org/reibun/javascript/link/020/ こちらのサイトを参考にやってみたのですが、 テキストリンク1カ所はできました。 でも、画像リンクはnullと表示されて画像も表示されなくなり、 2個目のテキストリンクはリンクになりません。 <a href="./aaa.html"><img src="./img/aaa.jpg" /></a> <a href="./aaa.html">あああ</a> <a href="./bbb.html"><img src="./img/bbb.jpg" /></a> <a href="./bbb.html">いいい</a> <a href="./aaa.html"><img src="./img/ccc.jpg" /></a> <a href="./aaa.html">ううう</a> このように表示されているリンクを JavaScriptでリンクを設定するにはどうしたらよいでしょうか？ よろしくお願いします！

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

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

  • ランダム表示

    某サイトで　このようなスプリクトを手に入れたのですが 設置した際に　横310Ｘ縦190と言う　表示画像サイズの指定の仕方が わかりません　いろいろ　試したのですが　素人のため　なかなか　うまくいきません　下のスプリクトにどこにどのようなタグを入れていいのか教えてください 　皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する