個人サイトを運営しているのですが、
文章の中で、説明の必要な用語に解説を付けたいと思っています。
自分のイメージでは、ページ上部に100×400位のアイフレームを設置し、用語をクリックするとそこに解説が表示される様にしたいのですが、そうすると下にスクロールした時にフレームが消えてしまいます。
なのでこのアイフレームを固定にしたいのですが、方法はありますか?
無ければサイドに用語集のフレームを作り、ページ内リンクで飛べる様にしようと思いますが、デザイン的にはアイフレームで一つずつ表示される様にしたいのです。
説明が分かりにくくてすみません。
もしよろしければ回答お願いします。
No.3ベストアンサー
- 回答日時:
>文章の中で、説明の必要な用語に解説を付けたいと
用語に解説を付けるなら、ポップアップメッセージを使用するのが分かりやすいと思います。
フレームより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] = 'Aタグ'
message[1] = 'SPANタグ'
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>
No.4
- 回答日時:
No.1です。
No.3の方の回答見て思いましたけど、
title要素を使うとツールチップ表示ができます。
これは非常に簡単。
<html>
<body>
<div title="ツールチップ表示">この文の上にマウスを乗せてみよう</div>
</body>
</html>
No.2
- 回答日時:
レイヤーを使用すると言うのは如何でしょうか?
参考ですけど、コピペして見てください。
<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>
No.1
- 回答日時:
アイフレームってインラインフレーム<iframe>のことですよね。
で、背景画像のbgproperties=fixedと同じ動きをiframeで実現したいってことでいいのかな?
iframeを固定にするにはフレーム分割してそのフレームにiframeを入れて、スクロールできないようにするって方法がありますが、満足得られる手段ではないですよね。
他の方法はちょっと思いつきません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 大学受験 資格試験などの勉強で過去問題集の解説を理解する時、分からない用語を調べてどうするのが良いですか? 問 3 2023/06/18 17:18
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- 日本語 意味とは何か、どこにあるのか? 16 2022/04/09 11:44
- その他(言語学・言語) ハワイ語を勉強するためのおすすめの教材について 1 2022/11/23 18:51
- C言語・C++・C# C言語初心者 構造体 課題について 2 2023/03/10 19:48
- 日本語 措定文は「は」、指定(同定)文は「が」 1 2022/11/19 18:52
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 英語 総称的意味の「the+過去分詞」が無冠詞複数形で置き換えることができない理由について 5 2022/08/04 10:14
- 英語 描写述語の条件(本来の性質、一時的な属性、又は両方)について 2 2022/07/25 13:41
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フッター上部に謎の隙間
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSS <div>の入れ子が反映さ...
-
チェックボックスの背景色って...
-
Ctrl+F(検索)の窓を出したいの...
-
htmlのstyleのposition:relativ...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
TABLEの高さを固定したいのですが…
-
SafariでもBGMを流す方法という...
-
youtubeをHPに載せたいです。
-
[CSS] 常にフッターは下部に表...
-
3点リーダーの作り方
-
Flickity で画像にリンクを貼る...
-
HTMLですCSSです この画像のよ...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで、リンクURLの一致を確...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報