サムネイルをマウスオーバーした際に手のアイコンに変わる方法
- javascriptでサムネイルをクリックすると同一ページの離れた場所に拡大表示する方法を実装しています。
- しかし、サムネイルをマウスオーバーした際に手のアイコンに変わらず、矢印のアイコンのままです。
- javascriptの制約上、手のアイコンに変えることはできないのでしょうか？
- ベストアンサー
サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。
サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。 javascriptでサムネイルをクリックすると同一ページの離れた場所に拡大表示するという指示をしています。問題なく正常に動いていますが、サムネイルをマウスオーバーした際に手のアイコンに変わってほしいのですが、矢印のアイコンのままです。 javascriptの関係上、不可能なのでしょうか？？ ソースは以下です。 -------------------------------------------------------------------------------- ■拡大表示させる窓 #zoombox ------------------------------------------------------------------------------- ■サムネイル画像 <img src="img/01_s.jpg" width="118" height="80" alt="s01" onClick="showImage(this);"/> -------------------------------------------------------------------------------- ■javascript function showImage(el) { var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg"); document.getElementById("zoombox").innerHTML = '<img src="' + imageSrc + '">'; }
- hellyes
- お礼率90% (9/10)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
CSSで、 cursor:pointer; これだけです。 imgにclassやidを付けて行いましょう。
関連するQ&A
- ロールオーバーで画像を先読みする方法
スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか？ お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }
- ベストアンサー
- JavaScript
- onmouseoverで文章を入れ替える
サムネイルにマウスを移動させると画像が拡大表示されるようにウェブをデザインしました。 テーブルで作りました。 拡大画像の下に文章を入れたいのですが、どのように書けばいいですか？ 現在、下記のようにつくっています 拡大写真の表示 <IMG src="images/album1.jpg" width="400" height="400" name="myBigImage"> 拡大写真の説明 ？？ マウスオーバーさせるサムネイル <A href="javascript:void(0)" onmouseover="myChgPic('images/album1.jpg')"> <IMG src="images/salbum1.jpg" width="100" height="100">
- ベストアンサー
- CSS
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- オンマウスでサムネイル画像のコマ間余白設定について
サムネイル画像にオンマウスにより、拡大画像が表示されるページを作っています。 htmlは勉強中なのですがjavascriptの知識がなくソースを借用しているためカスタマイズ方法がわからずに作業が中断している状態です。 タテに並んでいるサムネイル同士の間に5pxほどの隙間を設けたいのですが、どのようにソースを修正すればよろしいのか、どなたか教えていただけると助かります。 よろしくお願いいたします。 サムネイル画像はsamフォルダに、メイン画像はmainフォルダに入れています。 ページソースを貼り付けておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK href="style.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <center> <table width="710" cellpadding="0" cellspacing="0"> <tbody> <tr> <td bgcolor="#0000ff" height="50" align="center"><b><font color="#ffffff" size="4">メインタイトル</font></b></td> </tr> <tr> <td bgcolor="#0000ff"><font color="#00ffff" size="2"> ↓のサムネイル画像にマウスポインタを合わせて下さい</font></td> </tr> </tbody> </table> </center> <center> <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=0+document.body.scrollTop;//イベントが発生したY位置 } function out() { document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = ''; } //--> </script> <table> <tbody> <tr> <td width="100"> <img src="sum/001.jpg" target="_top" onmouseover="over('main/001','');" onmouseout="out();"><br> <img src="sum/002.jpg" target="_top" onmouseover="over('main/002','');" onmouseout="out();"><br> <img src="sum/003.jpg" target="_top" onmouseover="over('main/003','');" onmouseout="out();"><br> <img src="sum/004.jpg" target="_top" onmouseover="over('main/004','');" onmouseout="out();"><br> <img src="sum/005.jpg" target="_top" onmouseover="over('main/005','');" onmouseout="out();"><br> </td> <td valign="top" width="600"> <table id="field"> <tbody> <tr> <td id="gazou"></td> </tr> <tr> <td id="comment" class="com"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> </body> </html>
- ベストアンサー
- JavaScript
- オンマウスで画像とテキストの指定位置表示について
サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。 TABLEを使い左のTDにサムネイル羅列、右にオンマウス時の拡大画像表示です。 この拡大画像表示の際、画像の下または指定位置に「画像ごとのコメント」を表示したいのですが、当方scriptの知識がなくソースを借用しているためカスタマイズがわかりません。 <script type="text/javascript"> <!-- function over( name ) { var e = document.getElementById( "gazou" ); e.innerHTML = '<img src="' + name + '.JPG">'; e.style.position = "relative"; e.style.top = 000; e.style.left = 000; } function out() { var e = document.getElementById( "gazou" ); e.innerHTML = ''; } //--> </script> ------------------ ※画像（サムネイル表示部分） <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945');" onmouseout="out(light/img/DSC_1310);"> ※拡大画像表示部分に <span id="gazou"></span> を記述してあります。 ----------------------- 書き加える部分について教えていただければと思います。 なお、サムネイルがたくさんあって縦長になると下に移動した場合、画像表示位置が上にかくれてしまうので、サムネイルの移動といっしょに表示位置が常に画面内に入るようにできるとなおいいのですが。 （現在はスクロールしない範囲内のサムネイル数にしています）
- ベストアンサー
- JavaScript
- ランダム画像 & マウスオーバー画像切り替え &
こんにちは。 どうしてもわからない事がありますので質問させて下さい。 下記ソースにてランダム画像切り替えとマウスオーバーにて画像変更を行ってます。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> さらにマウスオーバー時の画像それぞれ個別にリンクを張り さらにそれをインラインフレーム内で表示するのでtarget="_top"の値を付け加えたいです。 そのような事が可能であれば是非ご教授頂ければありがたいです。 みなさま、よろしくお願い致します。
- ベストアンサー
- JavaScript
- サムネイルにマウスオーバーでメイン画像が切替るjs
<script type="text/javascript"> //<![CDATA[ $(function(){ var sets = [], temp = []; $("div.pickupArea div.pickupBox").each(function(i) { temp.push(this); if (i % 4 == 3) { sets.push(temp); temp = []; } }); if (temp.length) sets.push(temp); $.each(sets, function() { $(this).flatHeights(); }); n = 1; timerID = setInterval("anime()", 6000); $("ul.imgNav img:gt(0)").fadeTo(0,0.3); }); function anime() { now = n; before = n == 0 ? 3 : n - 1; n++; thumbN = $("ul.imgNav a:eq(" + now + ") img"); thumbB = $("ul.imgNav a:eq(" + before + ") img"); url = $("ul.imgNav a:eq(" + now + ")").attr("href"); img = "http://xxxxxxxxxxxx/xxxx/images/img_main0" + n; $("div.mainImg a").before("<a href='" + url + "'><img src='" + img + ".jpg' alt='' /></a>"); thumbB.fadeTo(1500,0.3); thumbN.fadeTo(1500,1); $("div.mainImg img:last").fadeOut(1500,function(){ $(this).remove(); $("div.mainImg a:last").remove(); }); if(n == 4){ n = 0; } } //]]> </script> 現在このようなスクリプトが入っており、 サムネイル４枚とメイン画像を（４枚中）１枚分だけ表示しているエリアがあり、メイン画像とサムネイルが自動で切り替わるようになっています。 このｊｓですと、サムネイルにマウスオーバーしてもメイン画像が切り替わらない仕様になっています。 サムネイルにマウスオーバーしても動くjsに改変するにはどこを修正すればよろしいでしょうか？ ご回答よろしくお願いいたします。 これをサムネイルに
- ベストアンサー
- JavaScript
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ベストアンサー
- JavaScript
- マウスオーバー
マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>
- ベストアンサー
- JavaScript
- マウスオーバー時に画像切り替え
JavaScriptで文字（画像）上にマウスポインターをオーバーするともう一つの大きな画像を切り替える、という風にしたくて、以下のようにしました。 <html> <head> <title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rosery de la mort PC profile2</title> <style type="text/css"> <!-- HTML { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } BODY { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } --> </style> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/p1.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/p2.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/p3.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/p4.jpg"; // ポイント時の画像4 var img4 = new Image(); img4.src = "image/p5.jpg"; // ポイント時の画像5 var img5 = new Image(); img5.src = "image/p6.jpg"; // ポイント時の画像6 var img6 = new Image(); img6.src = "image/p7.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center><img height="75" alt="" src="roseblue-i3.gif" width="72" align="baseline" border="0"><font size="7"><font face="Script" color="#ffffff"><em><strong> Profile <img height="75" alt="" src="roseblue-i5.gif" width="72" align="baseline" border="0"></strong></em></font></font></center> <br><br> <center> <img src="yl2.jpg"> <p><img src="image/p1.jpg" alt="start" name="def"></p> <br><br><br> <p> <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> </p> <br><br> </center> </body> </html> 上のようにしたのですが、アップロードしても、画像が全く表示されません。 因みに参考にしたところはここです。 http://www.tagindex.com/javascript/link/change3.html このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか？ 画像は全てアップロードしました。
- ベストアンサー
- JavaScript
お礼
できました！こんな簡単なことだったんですね。勉強になりました。ありがとうございました！！