ロールオーバー、クリック時のIEの点線

このQ&Aのポイント
  • HPでロールオーバーを使用していますが、IEでクリック時に点線が表示されますが、きれいな長方形でなく、後ろのほうが少し押しつぶされたようにカールして表示されます。これを直す方法があるのでしょうか?
  • 使用スクリプトは下記のものです。 <script language="JavaScript"><!-- myGifCnt = 4; // ボタン画像の総数をセットします myGifTbl = new Array( // ボタン画像テーブルを作成 "1-1.jpg", // [0] TOPiのボタン(暗) "lycos-t.jpg", // [1] Topiのボタン(明) "1-2.jpg", // [2] bbsのボタン(暗) "lycos-b.jpg", // [3] bbsのボタン(明)          ); mySrcTbl = new Array( myGifCnt ); // 画像データをメモリに読み込むテーブル定義 for (i=0; i<myGifCnt; i++){ // 画像データ数分ループする mySrcTbl[i] = new Image(); // 画像バッファ生成 mySrcTbl[i].src = myGifTbl[i]; // メモリに画像データを取り込む } function myChange( myBtnNo , myTblNo ){ // 画像変更関数 document.images["myBtn"+myBtnNo].src = mySrcTbl[myTblNo].src; } // --></script> <a href="index0.html"target="new" onmouseover="myChange(0,1);" onmouseout="myChange(0,0);"><img src="1-1.jpg" width="149" height="17"name="myBtn0"BORDER="0"> </a> <a href="index1.html"target="new" onmouseover="myChange(1,3);" onmouseout="myChange(1,2);"><img src="1-2.jpg" width="149" height="17"name="myBtn1"BORDER="0"> </a>
回答を見る
  • ベストアンサー

ロールオーバー、クリック時のIEの点線

HPでロールオーバーを使用していますが、 IEでクリック時に点線が表示されますが、 きれいな長方形でなく、 後ろのほうが少し押しつぶされたようにカールして表示されます。 これを直す方法があるのでしょうか? 宜しくお願いします。 使用スクリプトは下記のものです。 <script language="JavaScript"><!-- myGifCnt = 4; // ボタン画像の総数をセットします myGifTbl = new Array( // ボタン画像テーブルを作成 "1-1.jpg", // [0] TOPiのボタン(暗) "lycos-t.jpg", // [1] Topiのボタン(明) "1-2.jpg", // [2] bbsのボタン(暗) "lycos-b.jpg", // [3] bbsのボタン(明)          ); mySrcTbl = new Array( myGifCnt ); // 画像データをメモリに読み込むテーブル定義 for (i=0; i<myGifCnt; i++){ // 画像データ数分ループする mySrcTbl[i] = new Image(); // 画像バッファ生成 mySrcTbl[i].src = myGifTbl[i]; // メモリに画像データを取り込む } function myChange( myBtnNo , myTblNo ){ // 画像変更関数 document.images["myBtn"+myBtnNo].src = mySrcTbl[myTblNo].src; } // --></script> <a href="index0.html"target="new" onmouseover="myChange(0,1);" onmouseout="myChange(0,0);"><img src="1-1.jpg" width="149" height="17"name="myBtn0"BORDER="0"> </a> <a href="index1.html"target="new" onmouseover="myChange(1,3);" onmouseout="myChange(1,2);"><img src="1-2.jpg" width="149" height="17"name="myBtn1"BORDER="0"> </a>

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

  • ベストアンサー
noname#3345
noname#3345
回答No.1

<a href="">タグの書き方はこの通りですよね? 改行位置が違うと言うことはありませんか? <a href=""><img=""></a>までの部分の改行を、書くタグの<>の前後でしていまうと、画像の後ろに「_」のような物が付いてしまうことがあります。 <a href="index1.html"target="new" onmouseover="myChange(1,3);" onmouseout="myChange(1,2);"><img src="1-2.jpg" width="149" height="17" name="myBtn1"BORDER="0"></a> としてみたら、いかがでしょうか?

tinara
質問者

お礼

早速のご返答、ありがとうごうございました。 Prynneさんのお答えのとうりでした。 </a>を改行せずに訂正したところ、きれいに表示されました。 きわめて初歩的なミスであることを痛感しています。

関連するQ&A

  • ロールオーバー?????

    java初心者につきご迷惑お掛けします。 実は↓のような機能をホームページに付けたいのですが、上手くいかず悩んでいます。 ロールオーバーと呼ぶのでしょうか? 大きなメイン画像が1つあり、隣に小さなサブ画像が数個並んでいて、そのそれぞれのサブ画像にカーソルを持っていくと、メイン画像がそのサブ画面の画像に切り替わっていくというものです。 更には、その1セット(メイン画像×1、サブ画像数個)を、上から下へと複数設置したいと考えております。 web上で見つけた↓ソースを使って試したのですが、単独の場合は上手くいくのですが、複数を設置すると、どの部分のサブ画像を押しても、最後に設置した部分のメイン画像が変わるだけで、後はまったくの機能しません。 それぞれがきちんと機能するようにしたいのですが、どのようにすればよいでしょうか? <script language="JavaScript"> <!-- function change(fname){ document.images['CHANGE'].src=fname; } function restore(){ document.images['CHANGE'].src="メイン画像.jpg"; } //--> </script> <img name="CHANGE" img src="メイン画像.jpg"><br> <span onmouseover="change('サブ画像1.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像1.jpg"></span> <span onmouseover="change('サブ画像2.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像2.jpg"></span> <span onmouseover="change('サブ画像3.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像3.jpg"></span> <span onmouseover="change('サブ画像4.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像4.jpg"></span>

  • 画像クリックでウインドウを閉じたいのですが・・・

    こんにちは。JavaScriptはwebサイトから頂いて コピーして使うだけの理解力です。どうぞよろしくお願いします。 フォトアルバムを作っていまして、画像をクリックするごとに 画像が入れ替わるところまではできたのですが、 それですと延々と続いてしまいますので、最後の画像で小窓ごと 閉じてしまいたいのですが、どのようなタグになりますでしょうか? HEADに <SCRIPT LANGUAGE="JavaScript"> <!--// img = new Array("http://www5b.biglobe.ne.jp/○○.jpg","http://www5b.biglobe.ne.jp/○○2.jpg","http://www5b.biglobe.ne.jp/○○3.jpg"); i=0; function myChange(){ i++; i %=img.length; document.my_imgchange.src = img[i]; } // --> </SCRIPT> bodyに <a href="JavaScript:myChange()"><img src="http://www5b.biglobe.ne.jp/○○.jpg" border="0" name="my_imgchange"> と入れています。 例えば3枚目の画像をクリックした時に、また1枚目の画像に戻るのではなくて、 小窓ごと閉じてしまうにはどのようなタグをどこへ埋め込めばよろしいでしょうか? 色々試してみましたがうまくいきませんでした。 どなたか力をお貸しください。どうぞよろしくお願い致します。

  • ロールオーバーを立てに並べると隙間があいてします

    ホームページのロールオーバーイメージを 立てに並べたところ どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか? ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。

  • IE5でonmouseoverがうまく行きません。

    画像にマウスが触れた時にその画像を 替えたいのですが,NNではうまく行き, IE5では画像は変化せずうまく行きません。 IE5は次のエラーメッセージがでます。 ページでエラーが発生しました。 -> オブジェクトを指定してください。 よろしくお願いします。 <HTML><HEAD><title></title> <script language="javascript"> <!--- img = new Array(); for (i = 0; i <= 1; i++) {  imag[i] = new Image() ;  imag[i].src = "on_" + i + ".gif"; } function On(n) {   document.images['menu'+n].src = imag[n].src; } function Off(n) {   document.images['menu'+n].src = "off_" + n + ".gif"; } //---> </script></head> <BODY> <a href="xxx.html" TARGET="MAIN" onMouseOver="On(0)" onMouseOut="Off(0)"> <img src="off_0.gif" name="menu0" border="0"></a> <a href="yyy.html" TARGET="MAIN" onMouseOver="On(1)" onMouseOut="Off(1)"> <img src="off_1.gif" name="menu1" border="0"></a> </BODY></HTML>

  • オンマウスでの拡大画像の位置指定

    サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか?ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか?どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>

    • 締切済み
    • CSS
  • javascriptを使って画像のランダム表示とロールオーバーをセット

    javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1~5まで、ロールオーバー用の画像がa~eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら1に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

  • マウスオーバー時に画像切り替え

    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>&nbsp;Profile &nbsp;<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 このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか? 画像は全てアップロードしました。

  • リモートロールオーバーで画像と一緒にテキストも切り替える方法

    初投稿です。 当方ジャバスクリプト初心者です。 Dreamweaverで画像(メイン画像が1枚、サムネイル画像が30枚ほどあります)のリモートロールオーバーをやったのですが、同時にテキスト(説明文5行ほど)も一緒に表示・切り替えする方法が知りたいです。 ジャバスクリプトで出来るのですか? 全く検討もつかないので、どうか宜しくお願いします。 ■以下現状のhtmlです。尚、練習用なのでスタイルシートは真っ白です。■ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/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];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('img/l_mitudera.jpg','img/l_aigou.jpg','img/l_jyuzo.jpg','img/l_kyobashi.jpg','img/l_noda.jpg')"> <img src="img/l_mitudera.jpg" width="300" height="260" name="main"><br /><br /> <img src="img/s_mitudera.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_mitudera.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_aigou.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_aigou.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_jyuzo.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_jyuzo.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_kyobashi.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_kyobashi.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_noda.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_noda.jpg',1)" onmouseout="MM_swapImgRestore()" /> </body> </html>

  • javascriptで画像をテーブルに出力する方法

    javascriptで定期的に入れ替えている画像をテーブルに出力(表示)する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </html>

  • 複数画像にクリッカブルマップ

    当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。 添付の画像のように、 ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ(ロールオーバーも可能) を設置したいのですがうまく動きません。。 ■javascript (動かず) if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML <!--ひとつめの画像--> <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map> <!--ふたつめの画像--> <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。

専門家に質問してみよう