- ベストアンサー
アイフレームを固定する
個人サイトを運営しているのですが、 文章の中で、説明の必要な用語に解説を付けたいと思っています。 自分のイメージでは、ページ上部に100×400位のアイフレームを設置し、用語をクリックするとそこに解説が表示される様にしたいのですが、そうすると下にスクロールした時にフレームが消えてしまいます。 なのでこのアイフレームを固定にしたいのですが、方法はありますか？ 無ければサイドに用語集のフレームを作り、ページ内リンクで飛べる様にしようと思いますが、デザイン的にはアイフレームで一つずつ表示される様にしたいのです。 説明が分かりにくくてすみません。 もしよろしければ回答お願いします。
- matutakeumeko
- お礼率58% (24/41)
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>文章の中で、説明の必要な用語に解説を付けたいと 用語に解説を付けるなら、ポップアップメッセージを使用するのが分かりやすいと思います。 フレームよりjavascript方が見やすいかな... <!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>用語の解説</TITLE> <STYLE type="text/css"> <!-- /* ここで表示されるスタイルを指定 */ .spanstyle { position:absolute; visibility:hidden; color:#000; /* フォント色 */ font-size:10pt; /* フォントサイズ */ /* font-weight:bold; 太字にする */ border:1px gray solid; /* 枠線の太さ 色 形状 */ padding:5px; background-color:white; /* 背景色 */ z-index:100; /* センタリングはネスケで表示位置が大幅にずれます */ } /* 影のスタイル*/ .syadow { position:absolute; visibility:hidden; color:gray; /* フォント色 */ font-size:10pt; border:1px gray solid; /* 枠線の太さ 色 形状 */ padding:5px; background-color:gray; /* 背景色 */ z-index:90; /* z-indexはspanstyleより必ず小さく */ } } --> </style> <SCRIPT type="text/javascript" language="JavaScript"> <!-- var message = new Array(); // メッセージの内容 message[0] = 'Ａタグ' message[1] = 'ＳＰＡＮタグ' message[2] = '右端や下端の近くでも<br>見にくくなる事はない' //--> </SCRIPT> <!-- 下記のメインJavaScriptを外部読み出しにすることをおすすめ --> <SCRIPT type="text/javascript" language="JavaScript"> <!-- var sep_x = 0; var sep_y = 20; var mess_w = new Array(); var mess_h = new Array(); // 影モードの設定 ---------------------- // alphaModeはIEでの影モードです。 // trueで有効、7,7は横ずれ位置、縦ずれ位置、40は透明度（小さいほど薄い0～100） // 「true」は有効、「false」は無効 var alphaMode = new Array(true,7,7,40); //IE-only var syadowStyleMode = true; //影のスタイルを別指定する var syadowStyleName = "syadow"; //別指定する場合のclass名 // 透明度変化設定 ---------------------- var alphaMotion = true; // Alpha変化モード var alphaStep = 10; // 透明度変化ステップ var alphaIntv = 50; // 透明度変化スピード // --------------------------------------------------- var alphaFlag = true; var alphaTimerID = 0; var opacityLevel = new Array(); opacityLevel[0] = (alphaMotion)?0:100; opacityLevel[1] = (alphaMotion)?0:alphaMode[3]; opacityLevel[2] = 0; opacityLevel[3] = 0; var id1,id2; // --------------------------------------------------- var messTimerID=0; var disp_flg = 0; var flg= 0; var NN6flg = 0; // NN6対策用 var ms = 0; var ms2= 0; var x = 0; var y = 0; var winSize = new Array(); var mac = (navigator.userAgent.indexOf('Mac')>=0); var opera = (navigator.userAgent.indexOf('Opera')>=0); var op6 = (navigator.userAgent.indexOf('Opera 6')>=0)||(navigator.userAgent.indexOf('Opera/6')>=0); var op7 = (navigator.userAgent.indexOf('Opera 7')>=0)||(navigator.userAgent.indexOf('Opera/7')>=0); var ie5 = (navigator.appVersion.indexOf('MSIE 5')>=0)||(navigator.appVersion.indexOf('MSIE 6')>=0)||(navigator.appVersion.indexOf('MSIE 7')>=0); var ie4 = (navigator.appVersion.indexOf('MSIE 4')>=0); // 下記はMac&Operaはfilterをサポートしていない alphaMode[0] = (mac||opera)?false:alphaMode[0]; alphaMotion = (mac||opera)?false:alphaMotion // Windowサイズを取得 function getWinsize(){ winSize[0] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerWidth : document.body.clientWidth; winSize[1] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerHeight : document.body.clientHeight; } // レイヤーサイズの取得 function getLaysize(num){ var wh = new Array(); if (document.all && !op7){ var thisspan = document.all("span"+num); wh[0] = ((ie4)||(ie5))?thisspan.offsetWidth :thisspan.style.pixelWidth; wh[1] = ((ie4)||(ie5))?thisspan.offsetHeight:thisspan.style.pixelHeight; } if (document.layers){ var thisspan = eval("document.span"+num); wh[0] = thisspan.clip.width; wh[1] = thisspan.clip.height; } if ((!document.all && document.getElementById) || op7){ var thisspan = document.getElementById("span"+num); wh[0] = thisspan.offsetWidth; wh[1] = thisspan.offsetHeight; } return wh; } // マウス座標位置取得 function handlerMM(e){ x = (document.all&&!opera) ? document.body.scrollLeft+event.clientX : (op6)?event.clientX : e.pageX; y = (document.all&&!opera) ? document.body.scrollTop+event.clientY : (op6)?event.clientY : e.pageY; flg=1; if(disp_flg ==1){ mdisp(ms2);}else{mdel(ms2);} } // メッセージの表示 function mdisp(ms){ disp_flg = 1; if (flg==1 && document.all && !op6){ if(ie4){ messize = getLaysize(ms); mess_w[ms] = messize[0]; mess_h[ms] = messize[1]; } x =(winSize[0]<x+sep_x+mess_w[ms]+10-document.body.scrollLeft)?winSize[0]-mess_w[ms]-10+document.body.scrollLeft:x+sep_x; y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-20:y+sep_y; var thisspan = document.all("span"+ms).style; thisspan.posLeft=x; thisspan.posTop =y; thisspan.pixelWidth = mess_w[ms]; thisspan.pixelHeight = mess_h[ms]; thisspan.visibility="visible"; if(alphaMode[0]&&ie5){ thisspan = document.all("syadow"+ms).style; thisspan.posLeft=x+alphaMode[1]; thisspan.posTop =y+alphaMode[2]; thisspan.pixelWidth = mess_w[ms]; thisspan.pixelHeight = mess_h[ms]; thisspan.zIndex = 90; thisspan.visibility="visible"; } if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);} } if (flg==1 && document.layers){ x =(winSize[0]<x+sep_x+mess_w[ms]+20-pageXOffset)?winSize[0]-mess_w[ms]-20+pageXOffset:x+sep_x; y =(winSize[1]<y+sep_y+mess_h[ms]-pageYOffset+15)?y-mess_h[ms]-15:y+sep_y; var thisspan = eval("document.span"+ms); thisspan.left=x; thisspan.top=y; thisspan.clip.width = mess_w[ms]; thisspan.clip.height = mess_h[ms]; thisspan.visibility="visible" } if (flg==1 && !document.all && document.getElementById && !op6){ if(NN6flg==0){ //NN6対策 for(i=0;i<message.length;i++){ messize = getLaysize(i); mess_w[i] = messize[0]; mess_h[i] = messize[1]; } NN6flg=1; } x =(winSize[0]<x+sep_x+mess_w[ms]+30-scrollX)?winSize[0]-mess_w[ms]-30+scrollX:x+sep_x; y =(winSize[1]<y+sep_y+mess_h[ms]-scrollY+15)?y-mess_h[ms]-20:y+sep_y; var thisspan = document.getElementById("span"+ms); thisspan.style.left=x; thisspan.style.top =y; thisspan.style.width = mess_w[ms]; thisspan.style.height = mess_h[ms]; thisspan.style.visibility="visible" if(alphaMode[0]&&ie5){ thisspan = document.getElementById("syadow"+ms); thisspan.style.left=x+alphaMode[1]; thisspan.style.top =y+alphaMode[2]; thisspan.style.width = mess_w[ms]; thisspan.style.height = mess_h[ms]; thisspan.style.zIndex = 90; thisspan.style.visibility="visible"; } if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);} } if (flg==1 && op6){ if(NN6flg==0){ for(i=0;i<message.length;i++){ messize = getLaysize(i); mess_w[i] = messize[0]; mess_h[i] = messize[1]; } NN6flg=1; } x =(winSize[0]<x+sep_x+mess_w[ms]-document.body.scrollLeft)?winSize[0]-mess_w[ms]+document.body.scrollLeft:x+sep_x; y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-10:y+sep_y; var thisspan = document.getElementById("span"+ms); thisspan.style.left=x; thisspan.style.top =y; thisspan.style.width = mess_w[ms]; thisspan.style.height = mess_h[ms]; thisspan.style.visibility="visible" } ms2=ms; } // メッセージの非表示 function mdel(ms){ disp_flg = 0; if(alphaMotion&&ie5){opacityClear(ms);} if (document.all){ var thisspan = document.all("span"+ms).style; thisspan.visibility="hidden"; if(alphaMode[0]&&ie5){ thisspan = document.all("syadow"+ms).style; thisspan.visibility="hidden"; } } if (document.layers){ var thisspan = eval("document.span"+ms); thisspan.visibility="hidden"; } if (!document.all && document.getElementById){ var thisspan = document.getElementById("span"+ms).style; thisspan.visibility="hidden"; if(alphaMode[0]&&ie5){ thisspan = document.getElementById("syadow"+ms).style; thisspan.visibility="hidden"; } } ms2=ms; } // --------------------------------------------------- function opacityChange(ms){ id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms); id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms); opacityLevel[2] += alphaStep; if(opacityLevel[2]>100){opacityLevel[2]=100;alphaFlag=false;} opacityLevel[3] = Math.round(opacityLevel[2]*alphaMode[3]/100); id1.filters.Alpha.opacity=opacityLevel[2]; id2.filters.Alpha.opacity=opacityLevel[3]; if(alphaFlag){alphaTimerID = setTimeout("opacityChange("+ms+")",alphaIntv);} } function opacityClear(ms){ id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms); id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms); opacityLevel[2] = 0; opacityLevel[3] = 0; id1.filters.Alpha.opacity=opacityLevel[2]; id2.filters.Alpha.opacity=opacityLevel[3]; clearTimeout(alphaTimerID); alphaFlag=true; } function NN_reload(){ if (document.layers){location.reload();}else{getWinsize();} } // メッセージの先読み for (i=0;i<message.length;i++){ document.write("<div id='span"+i+"' class='spanstyle' style='position:absolute;filter:Alpha(opacity="+opacityLevel[0]+")'"); if(ie4){document.writeln(" style='width:10px;'><table><tr><td nowrap");} document.write(">"); document.writeln(message[i]); if(ie4){document.writeln("</td></tr></table>");} document.writeln("</div>"); if(alphaMode[0]&&ie5){ syadowcss = (syadowStyleMode)?syadowStyleName:"spanstyle"; document.write("<div id='syadow"+i+"' class='"+syadowcss+"' style='position:absolute;filter:Alpha(opacity="+opacityLevel[1]+");'>"); document.writeln(message[i]); document.writeln("</div>"); } var messize = new Array(); if(document.all || document.layers){ messize = getLaysize(i); mess_w[i] = messize[0]; mess_h[i] = messize[1]; } } // マウスイベント if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } if (!document.all && document.getElementById && !op6 && !op7){ window.onmousemove = handlerMM; window.captureEvents(Event.MOUSEMOVE); }else{ document.onmousemove = handlerMM; } window.onresize = NN_reload; getWinsize(); //--> </SCRIPT> </HEAD> <BODY> <p align="center"> 説明<br> <p> <!-- （ ）内番号とmessage[ ]の番号を合わせる事。 --> <a href="#" style="text-decoration:none" onMouseover="mdisp(0)" onMouseout="mdel(0)">Aタグ</a>の部分<br> <small> Aタグはネスケ及びMac版IEでは表示されません。 </small><br><br> <span style="color:red;text-decoration:none" onMouseover="mdisp(1)" onMouseout="mdel(1)">SPANタグ</span>の部分<br> <small> SPANタグもネスケで表示されません。 <br><br> ※Aタグ、SPANタグでスタイル指定は可能 </small> <br><br> <div align="right"> <a href="#" onMouseover="mdisp(2)" onMouseout="mdel(2)">右端や下端の近くでも、見にくくなる事はない</a> </div> <br><br> </BODY> </HTML>
その他の回答 (3)
- itomizu
- ベストアンサー率47% (8/17)
No.1です。 No.3の方の回答見て思いましたけど、 title要素を使うとツールチップ表示ができます。 これは非常に簡単。 <html> <body> <div title="ツールチップ表示">この文の上にマウスを乗せてみよう</div> </body> </html>
- BlueRay
- ベストアンサー率45% (204/453)
レイヤーを使用すると言うのは如何でしょうか？ 参考ですけど、コピペして見てください。 <HTML> <HEAD> <STYLE> <!-- BODY { margin:0px, 0px; scrollbar:none; overflow:hidden } .layer { margin:0px, 0px; font-size:16px; font-weight:bold; text-align:center; vertical-align:bottom; position:absolute; } --> </STYLE> </HEAD> <BODY> <!-- --> <IFRAME WIDTH="100%" HEIGHT="100%" SRC="http://www.yahoo.co.jp/"></IFRAME> <!-- --> <DIV ID="layTEST" CLASS="layer"> <IFRAME WIDTH="100%" HEIGHT="100%" SRC="http://www.google.com/"></IFRAME> </DIV> <SCRIPT LANGUAGE="javascript"> <!-- var scrX = document.body.clientWidth; var scrY = document.body.clientHeight; //メッセージ表示。 var lay = document.all("layTEST"); lay.style.posLeft = scrX * .1; lay.style.posTop = scrY * .1; lay.style.width = scrX * .8; lay.style.height = scrY * .2; //--> </SCRIPT> </BODY> </HTML>
- itomizu
- ベストアンサー率47% (8/17)
アイフレームってインラインフレーム<iframe>のことですよね。 で、背景画像のbgproperties=fixedと同じ動きをiframeで実現したいってことでいいのかな？ iframeを固定にするにはフレーム分割してそのフレームにiframeを入れて、スクロールできないようにするって方法がありますが、満足得られる手段ではないですよね。 他の方法はちょっと思いつきません。
