• ベストアンサー

リンクにマウスポインタをおくと画像切り替え

リンクにマウスポインタをおくと画像を切り替えるソース(以下)をfreeのJavaScriptサイトからもってきて解読しています。よろしくお願いします。 <質問> ・gotolink=urlは、varなしの変数でChangeimage関数の引数urlを代入している? window.location=gotolink、var gotolink="#"との関係は? ・var gotolink="#"の#の意味は? ・this.hrefとあるが、thisは何を指す? ・"javascript:warp()"の意味は? ・<script></script>、<script language="JavaScript1.1"></script>はscript定義が2つに分割されているが正しい記述か? ---スクリプト--- <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif") </script> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <p><a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a></p> ☆中略☆ <a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a> </td> </tr> </table>

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

  • ベストアンサー
  • pussyfoot
  • ベストアンサー率28% (39/138)
回答No.3

昨日、速攻で回答したはずですけど、書き込めてないですねぇ。 それはさておき、質問に番号が振ってないので答えにくいので、勝手に上から順に回答します。 1.しています。#は初期値をセットしているだけです。スクリプトが読み込みが終わる前にクリックされてもリンクへ飛べなくなってます。 2.Aタグでリンク先を明記しない時に#を使います。 3.自分自身です。つまりthis.herf="b2.htm"です。 4.スクリプトを呼び出しているだけです。 5.正しい。 以上。これ以上は答えにくいので本の購入をお勧めします。ただ、この手のスクリプトは日本にサイトにもたくさんあると思います。

その他の回答 (2)

  • shigatsu
  • ベストアンサー率26% (511/1924)
回答No.2

じゃこちらをお勧めします。>参考URL

参考URL:
http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM
  • shigatsu
  • ベストアンサー率26% (511/1924)
回答No.1

そういうのって、そのスクリプトの作者に聞いた方がいいんじゃないでしょうかね? お礼や感想を添えてメールすれば、相手も喜ぶと思いますけど。

rituritu
質問者

補足

これは海外サイト(企業?)からもってきたソースです。英語がわからないのでメールで尋ねることができないのです。 あと、困り度ですが「暇な時に回答ください」で登録しましたが、これは間違いで、本当は「すぐに回答が欲しいです」が正解です。 困り度を確認しないで送信ボタンを押さなかったのです・・・。 よろしくお願いします。

関連するQ&A

  • 画像を変えるスクリプト

    <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか? 普通にsrcプロパティを変更するだけではだめなのでしょうか?例えばdocument.images[i].src="img"+j+".gif"のようにしてiとjを変えるような 感じです。

  • 画像クリックで画像変化を1ページに複数表示

    どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか? 4つ画像を用意して、2つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>

  • メニュー(マウス通過・クリックで絵の替わる物)のことで質問です。

    えーと、すいません。 メニューの件で質問です。 マウス通過・クリックで絵の替わるジャバスクリプトを作ってメニューを作ったんですけど、 その際にまだ読み込んでいないファイルを読み込むようにする物がDreamweaverにありましたのでそれも一緒に入れました。 でもなぜか、 Web上に上げると、 メニューの絵が表示されますけれど、 マウス通過・クリックしますと次に出てくるはずの絵が出てこないのです。 (IEで見ると×マークが出てきます。) 作った物ですが、 こんなかんじです。 <body> <script language="JavaScript"> function winImage1(){ document.win1.src="×××.gif"; //これにさわったら、 } function winImage2(){ document.win2.src="×××.gif"; //これに替わる } //--> </script> <a href="index.htm" onMouseOut=winImage2() onMouseOver=winImage1() target="_parent"> <img border=0 name=××× src="×××.gif" alt="×××"></a> <body> を作りましたが、 なかなか見れません。 あと、Dreamweaver上にありました、先にこのファイルを読み込みなさいと指示をするジャバスクリプトものせておきます。 <head> <script language="JavaScript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </head> <body onLoad="MM_preloadImages(×××.gif,×××.gif・・・)"> </script> </body> です。 あと、使っているアプリケーションは、『Dreamweaver4』です。 どうかよろしくお願いします。

  • ロールオーバー時の画像切り替えについて

    複数の画像ボタンを配置し、 ロールオーバーするとある位置に配置している画像を切り替えるようにしているのですが、 現状だとロールアウト後に初めの画像、初期値に戻ってしまうので 一番最後にロールオーバーした画像でストップさせたいと思っています。 現状、下記スクリプトを設置しているのですが お分かりの方が追われましたらご教授頂けないでしょうか。 どうぞ宜しくお願いします! MultiRollover = function(_listener) { this.listener_id = _listener; this.target_id = ""; this.sources = []; } MultiRollover.prototype = { addTarget: function(_target) { this.target_id = _target; }, addSource: function() { for(var i=0; i<arguments.length; i++) { this.sources.push(arguments[i]); } }, create: function() { var listener = document.getElementById(this.listener_id); if(document.getElementById(this.target_id)) { var out_target = document.getElementById(this.target_id); var over_targets = out_target.getElementsByTagName("a"); } for(var i=0; i<over_targets.length; i++) { var over_target = over_targets[i]; var src = this.sources[i]; var callback = (function(_src) { return function() { this.src = _src; }; })(src); this.observe(over_target, "mouseover", listener, callback); (new Image).src = src; src = this.sources[0]; callback = function() { this.src = src; }; this.observe(over_target, "mouseout", listener, callback); } }, observe: function(_el, _func, _listener, _callback) { if(_el.addEventListener) { _el.addEventListener(_func, function(e) { _callback.call(_listener, e); }, false); } else if(_el.attachEvent) { _el.attachEvent("on"+_func, function(e) { _callback.call(_listener, e); }); } } }

  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか? 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方

    いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか? 1、ウインドウに「閉じる」ボタンを付けたい 2、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>

  • マウスオーバーで画像の切替でタイマーをつけるには?

    <html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか? 教えてください。よろしくお願いいたします。

  • オンマウスで画像を変えたい。

    オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像1URl" onmouseover="this.src='画像2URl';" onmouseout="this.src='画像1URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。

    • ベストアンサー
    • HTML
  • input type="image"でマウスクリック画像変更がうまくいかない

    input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScript自動画像切替にリンクの貼り方

    初めて質問させていただきます。宜しくお願いします。 現在、楽天ショップページを製作しております。JavaScriptでゆっくりと画像を切り替える以下のソースをネットで調べました。さらに実用的にするため、各画像にそれぞれ異なるリンクを貼りたいのですが、どのように追記すれば良いのでしょうか? 色々試したのですが全く解決せず困っています。宜しくお願いいたします。 [以下ソース] <script type="text/javascript"> var imgs = new Array(); imgs[0] = "画像URL1"; imgs[1] = "画像URL2"; imgs[2] = "画像URL3"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <img src="画像URL1" style="filter:blendTrans(duration=2);">

専門家に質問してみよう