ハテナでも質問させていただきましたが、まだ回答が得られないため、
こちらでも質問させていただきたく思います。
http://q.hatena.ne.jp/1242894447 ※急ぎのため、申し訳ございません。)

下記URLのソースを利用して、フォントサイズ変更ボタンを作っていますが、
Iframeの中の文字サイズ変更がうまくいきません。
http://htmldwarf.hanameiro.net/tools/FontSizeCha …
当方、ジャバスクリプト超初心者ですが、大変困ってます。
わかりやすく教えていただければ大変うれしく思います。
お手数ですが、どうぞ宜しくお願い致します。

「フォントサイズ変更ボタンについて」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (10件)

まだお読みでしょうか。



ご要望としては
「親ページのボタンを押すと、親ページとインラインフレーム内の文字サイズが変わり、親ページで選択したサイズ画像ボタンがアクティブ状態になる」
ということでしょうか。

こんな感じでいかがですか。
http://htmldwarf.hanameiro.net/tools/IframeSampl …

ファイル一式を
http://htmldwarf.hanameiro.net/tools/IframeSampl …
にアップしましたので設置方法はそちらでご確認ください。

参考URL:http://htmldwarf.hanameiro.net/tools/IframeSampl …
    • good
    • 0

#3です。

 ついき。
たいしょうが、しにあなら、やっぱりさいしょからおおきいもじに
すべきじゃないかな~
わかいやつは、じぶんでちいさくできるかもしれないんだから。
    • good
    • 0
この回答へのお礼

そうですね!
今回はデザインを始める前から仕様が決まってしまってたので、
次回以降は可能な限り提案してみることにします。
ありがとうございました。

お礼日時:2009/05/25 12:55

#3です。

なにかのさんこうになるかもしれないじょ。ばぶぅ!
がぞうは、bottan_image_small_0.pngのすうじを0から2まで
よういしてちょ!
iframeのもじのへんこうは、fujillin さんのものをしゃくようしたじょ!
もんだいがあるなら、かれにといあわせしてちょ!
こまかいところに、みすがいっぱいあるかもしれないじょ!
まぁ~ぷろなようですから、こまかいところは、じぶんでなおしてね!
ばぶぅ~!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<title>TEST</title>
<style type="text/css">
 #size_list { list-style-type:none; margin:0; padding:0; text-align:right; }
 #size_list li { display:inline; }
 #size_list li img { border:0px none; }
</style>
<ul id="size_list">
 <li><img src="bottan_image_small_0.png" alt="小"></li>
 <li><img src="bottan_image_midium_0.png" alt="中"></li>
 <li><img src="bottan_image_large_0.png" alt="大"></li>
</li>

<script type="text/javascript">
//実行時には、全角空白文字は、半角に変換して下さい。
//@cc_on @set @F = (@_jscript_version >= 5.5)

var _HOVER_COLOR = '#888';
var _CLICK_COLOR = '#d88';

var M0, M1, M2;

/*@if(@F) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
 'load', function () {
  /*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
   'load', arguments.callee, false);
  var size = getCookie('fsize') || 1;
  M2 = document.getElementById('size_list').getElementsByTagName('IMG');
  M0 = M2[size];
  test0(null, 1, M0);
  
  document.getElementById('size_list')./*@if(@F) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/
   'click', test0, false);
  document./*@if(@F) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/
   'mouseover', test1, false);
 }, false);

/*@if(@F) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
 'unload', function () {
  /*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
   'unload', arguments.callee, false);

  document.getElementById('size_list')./*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
   'click', test0, false);
  document./*@if(@F) detachEvent('on'+ @else@*/ removeEventListener (/*@end@*/
   'mouseover', test1, false);
  
 }, false);


function test0 (evt, f, e) {
 if (!f) {
  e = evt./*@if(@F) srcElement @else@*/ target /*@end@*/;
  if ('IMG' != e.tagName) return;
  if (M0) {
   M0.src = M0.src.replace(/_\d\.png$/, '_0.png');
   M0.style.backgroundColor = '';
   M0 = null;
  }
 }
 e.src = e.src.replace(/_\d\.png$/, '_2.png');
 e.style.backgroundColor = _CLICK_COLOR;
 M0 = e;
 if ('小' == e.alt) set('small');
 if ('中' == e.alt) set('medium');
 if ('大' == e.alt) set('large');
}

function test1 (evt) {
 var e = evt./*@if(@F) srcElement @else@*/ target /*@end@*/;
 if (M1) {
  M1.style.backgroundColor = (M1 == M0) ? _CLICK_COLOR: '';
  M1.src = (M1 == M0) ? M1.src.replace(/_\d\.png$/, '_2.png'): M1.src.replace(/_\d\.png$/, '_0.png');
  M1 = null;
 }
 if ('IMG' != e.tagName) return;
 var p = (function(o,i) { return o ? o.id == i ? o: arguments.callee(o.parentNode, i): null;})(e,'size_list');
 if (!p) return;
 e.style.backgroundColor = _HOVER_COLOR;
 e.src = e.src.replace(/_\d\.png$/, '_1.png');
 M1 = e;
}

function set(s) {
 var frames = document.getElementsByTagName('IFRAME');
 var cnt = 0;
 setCookie('fsize', {small:0, medium:1, large:2}[s], 30);
 setFont(document,s);
 while (frames[cnt++])
  setFont((frame[i].contentDocument)? frame[i].contentDocument:frame[i].contentWindow.document,s);
}

function setFont(obj,siz) {
 obj.getElementsByTagName('BODY')[0].style.fontSize = siz;
}

function getCookie( name ) {
name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' );
var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
return value ? decodeURIComponent( value[1] ) : '';
}

function setCookie ( name, value, day, path, domain ) {
 return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
  '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() +
  '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +
  ( domain ? 'domain=' + encodeURI ( domain ) + '; ': '');
}

</script>
    • good
    • 0
この回答へのお礼

バブーさま
レス遅くなって誠に申し訳ありません!
ご回答大変ありがとうございました。
イメージどおりでとてもすばらしいです。
ちょっとどころか、だいぶ参考になりました。
ただ、同一ページのiframe内フォントサイズが変えられず、
そこだけ、困っております。
お時間ございましたら、教えていただければ大変うれしく思います。
どうぞ宜しくお願い致します。

お礼日時:2009/05/25 12:52

#3です。


>あなたの伝えたいことは何ですか?という質問ですが、この質問への回答としてはふさわしくないと思います。

言葉足らずだったことを深くお詫びします。

誤:あなたの伝えたいことは何ですか?
訂:そのページで伝えたいことは何ですか?
とすればまだ良かったですね。


askaaska様、フォローありがとうございます。
キャラ的に、私に「様」は、必要ありません。
なんなら、呼び捨てで!^^;
    • good
    • 0

再度、No2です。



調べたり、考えたりするのが面倒な場合は、参考に挙げられているサイトの方法は閲覧可能ですので、その方法を参考にすればよいのでは?

あまりよく見てないけど、そのサイトでは
ロールオーバーはjavascript(どうやらDreamWeaverみたい)で実現しているようですね。
(大、中、小の文字もボタンと合わせて画像になっていて入れ替えている)
    • good
    • 0

No2です。



[ 質問文 ]
>Iframeの中の文字サイズ変更がうまくいきません。

[ 補足文 ]
>大の画像だけ色が変わるということができません。
>「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。
>、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、
>教えていただけると非常に助かります。

サイズ変更が出来ているのかいないのかよくわかんない上に何を知りたいのでしょうか?
ボタンデザインの変更であれば(マウスオーバーで変わる機能)、「ロールオーバー」をキーに検索すればうじゃうじゃ見つかるはずです。
機能的には、文字サイズの変更とはまったく別物の内容になります。
方法的には2通りあって、CSSで行うかjavascriptで行うかのどちらかで実現しているものが多いと思います。

この掲示板で回答するよりも、検索した方がより多くの詳細情報が簡単に入手できるでしょう。
ちなみに、No2の回答は[ 質問文 ]に対する回答なので、当然ながら[ 補足 ]の回答にはなっていません。
    • good
    • 0

> あなたの伝えたいことは何ですか?という質問ですが、この質問への回答としてはふさわしくないと思います。


#3様は、もっと別のアプローチ方法があるのではないか
と、そう言っているのよ。
目的を達成するための手段が目的になってしまうことは良くあることだから
そこを気にしてくれたのよ。
一応、補足させていただくわ。

で、本題。
改めてhttp://q.hatena.ne.jp/1242894447を読んだのだけど
この文章からだと
文字サイズの変更がなければロールオーバーは実現できた
という認識で正しいかしら?
もし、それすら・・・と言う場合は教えるのが困難になるわ。
そっちはできていると言うのなら
実現したコードを見せてもらえるかしら。
そのほうが教えやすいのよ。
    • good
    • 0

こんなことを言っては気を悪くするかもしれませんが、


考え方の一つとして聞いてください。
あなたの伝えたいことは何ですか?
デザインですか?情報ですか?
昨今のブラウザならワンクリックで(数クリック)で、
文字の大きさを変えられる時代です。
もうそのような機能は、ユーザーに任せてよいのではないでしょうか?

この回答への補足

私も文字サイズ変更ボタンはあまり好きじゃないし、
おっしゃることの意味は理解できますが、
ブラウザの文字サイズ変更機能の使用方法がわからない可能性のある、
シニア層がメインユーザーのサイトである上、
クライアントから、どうしてもという要望があった為、
設置は避けられない状況です。
(個人的にも、現在の制作しているサイトには設置が必要だと思います。)
あなたの伝えたいことは何ですか?という質問ですが、この質問への回答としてはふさわしくないと思います。

補足日時:2009/05/22 12:26
    • good
    • 0

HTMLの中身が不明なので、どううまくいかないのか想像できないけど…



それぞれの方法がわかっていれば、単純に両方やればいいだけのはず。
自身のドキュメントと、iframeのドキュメントのフォントサイズを変えればいいのでは?

prototypeはよく知らないので、ベタのサンプルで原理のみ…
(prototypeを利用して書き換えればもっと簡単になるはず)
<html>
<head>
<style type="text/css">
.font div {float:left; width:50px; font-size:medium;}
hr {clear:left;}
</style>

<script type="text/javascript">
function set(s) {
setFont(document,s);
var frame = document.getElementsByTagName('IFRAME');
for (var i=0; i<frame.length; i++){
var doc = (frame[i].contentDocument)?
frame[i].contentDocument:frame[i].contentWindow.document;
setFont(doc,s);
}}
function setFont(obj,siz) {
obj.getElementsByTagName('BODY')[0].style.fontSize = siz;
}
</script>
</head>

<body>
<div class="font">
<div onclick="set('small')">小</div>
<div onclick="set('medium')">中</div>
<div onclick="set('large')">大</div>
</div>
<hr />
<p /><iframe src="test.html"></iframe>
<p />テストの文字列
<p /><iframe src="test.html"></iframe>
</body>
</html>
    • good
    • 0
この回答へのお礼

ご丁寧にスクリプトまで、誠にありがとうございます。
言葉足らずで大変申し訳ございませんでした。
ハテナで知ったURLを参考に、
ボタンを画像にして(text-indent:-99999、背景画像指定)、
「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。
しかし、例えば「大」サイズ選択時に、「大」の画像だけ色が変わるということができません。
もっと、具体的に言わせていただきますと、
このサイト(http://www.smbc-friend.co.jp/)にあるボタンのような感じで、
且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただけると非常に助かります。
お手数ですが、どうぞ宜しくお願い致します。

お礼日時:2009/05/22 12:11

http://q.hatena.ne.jp/1242894447
の画像にあったHTMLを実行してみたけど
IE7とChromeで
ちゃんと文字サイズの変更は動作したわよ。

どう上手くいかないのかしら。
    • good
    • 0
この回答へのお礼

ご回答と検証、大変ありがとうございます。
言葉足らずで大変申し訳ございませんでした。
より具体的に言わせていただきますと、
このサイト(http://www.smbc-friend.co.jp/)にあるボタンのような感じで、且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただきたいと思っております。
どうぞ宜しくお願い致します。

お礼日時:2009/05/22 12:13

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QOリングのサイズ

Oリングのサイズで質問です。
直径10mmにOリングをはめる場合、何mmを入れればよいでしょうか?
はめる径-1mmではダメですか?
模型用の小型コンプレッサーに使います。

Aベストアンサー

一般的には、はめる径=Oリングの呼び径(P-10)とかに合します。伸ばして使うのはあまり良くありません。

内圧用であれば、溝の外径にOリングの外径を合します。

Qhttp://www.skuare.net/test/horizont

http://www.skuare.net/test/horizontinyscrolling.html
上記のサイト様で使用しているjavascriptを使ってデザインを考えています。

上記のサイト様は、メニューとコンテンツが同じフレーム内(階層)にありますが、
これを、メニューとコンテンツを別々のフレームに入れ(コンテンツ部分はインフレームに入れたいです。)、メニューを常に見える状態にしたいです。
(添付画像参照)

上記の状態までは、問題なくページを作れています。
しかし、色々試してはみたのですが、フレームに入れるとなかなかうまく行かず困っています。
どのように直せば良いでしょうか…

どうぞ宜しくお願い致します。

Aベストアンサー

このjavascriptを使って親からiframeコンテンツ内部をスクロール制御するよう
直すのは結構たいへんそうです。

私なら、iframeコンテンツのhtmlの中に、このjavascriptと、
スクロールナビゲーションリンクのタグを非表示で、そのまんま
設置しておいて、


親にも設置したナビゲーションリンクから、iframe内のナビゲーションリンク
をjavascriptで突っつきます。

QサイズのOの意味は?

S、M、L..というように、サイズのO(オ-)がありますが、これはどういう意味でつけられた物ですか?
例 L・ラージ

Aベストアンサー

 こんばんは。

S:SMALL
M:MEDIUM
L:LARGE
O(LL):OVER LARGE
XO(3L):EXTRA OVER LARGE

 という事で「O」は「オーバーラージ」です。

Qhttp://news.com.com/ みたいなナビゲーションは?

http://news.com.com/ のサイトの上部にあるような、マウスを持っていくとその下にサブメニューがポンポンと出てくるような動きは、どのような仕組みでやっているのでしょうか?
ヒントだけでも教えてください。お願いします。

Aベストアンサー

CSS と JavaScript を組み合わせています。
(CSS や JavaScript を無効にして、動作の違いを確認。)

たぶん、CSS で要素の表示するしないを設定し、
JavaScript でそれを制御しているのでしょう。

Qサイズ表記の『O』について

スポーツ用品の衣服に使われるようなのですが
サイズO(オー)というのは何のオーなのでしょうか?

なぜジャージ等、スポーツ用品に使われるのでしょうか?

ご存知の方、教えてください。

Aベストアンサー

JASPO基準によるサイズ表記で、Lサイズより一つ大きいサイズになります。
スポーツ用品に多いのは、JASPOが日本スポーツ工業協会が定めているので、その業界から浸透していると思われます。
ちなみにOの上はXOと表します。

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む

Q服のサイズ「O」に適応する体型

通販で安くて良いバドミントンのTシャツを見つけたので購入しようかと思っています。
でもそれはサイズがOという大きなサイズしかなく、
私は身長約162cmで体格はどちらかというと細身の為、ちゃんと着れるか不安です。
 背丈は76cm、肩幅は61cmだそうです。
メジャーが家に無いので分かりませんが、肩幅61cmというのは、
性別、どのくらいの身長の方に値するのでしょうか。
どうなのでしょうか。お願いします。

Aベストアンサー

バドミントンのTシャツだと、
ユニセックスのものと、レディースのもので
だいぶサイズに違いがあります。
質問者様は、女性の方ですよね?
うちで先日トマス杯の記念Tシャツ購入したとき
主人が170cmで痩せ型ですが、Mサイズで
ジャストサイズでした。(YONEX製品)
プレーをするのに多少大きいのはかまわないとも
思いますが、さすがにOサイズは大きすぎだと
推測されます。(特にTシャツは)

私が女性で多少太目の160cmで、
レディースのユニホーム(ポロシャツ系)を購入するときは、Oサイズのこともあります。
ユニホームはシルエットが細身のメーカーもあり
すけることも考慮すると、大きめでもいいかと。
でも、ユニセックスだったらTシャツは私でも
Mで、普通に着ています。

参考になれば幸いです。

Qhttp://www.rapty.com/

http://www.rapty.com/

上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。

さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。

これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

Aベストアンサー

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;}

#navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; }
#navi li { padding:2px; padding-left:15px; }
#navi li.active { background-color:#f44; }
#navi li a { display:block; text-decoration:none; }
#navi li img { width:200px; height:70px; _height:69px; border:0; }

#content { list-style:none; margin:0; padding:0; position:relative; }
#content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;}
#content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; }
#content li.active { display:block; }

li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div id="wrapper">
<ul id="navi">
<li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li>
<li><a href="test2.html"><img src="B.jpg" alt="#"></a></li>
<li><a href="test3.html"><img src="C.jpg" alt="#"></a></li>
<li><a href="test4.html"><img src="D.jpg" alt="#"></a></li>
</ul>
<ul id="content">
<li id="mask"></li>
<li class="active">
<a href="test1.html">
content1
<br>ここは画像1枚でもいいし、
<br><strong>文章でもいい。</strong>
<br>ただし、はみ出しても表示されない。
<br><img src="E.jpg" alt="picture" style="margin-top:150px;">
</a>
</li>
<li>
<a href="test2.html">content2</a>
</li>
<li>
<a href="test3.html">content3</a>
</li>
<li>
<a href="test4.html">content4</a>
</li>
</ul>
</div>

<script type="text/javascript">
<!--
(function() {
var u = document.getElementById('navi');
var mask = document.getElementById('mask');
var navs = document.getElementById('navi').getElementsByTagName('LI');
var cnts = document.getElementById('content').getElementsByTagName('LI');
var grovalTid, maskTid, duration = 5000;
try { u.addEventListener("mouseover", func, false);
} catch(e) { u.attachEvent("onmouseover", func); }
grovalTid = setTimeout(change, duration);

function func(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
while (t.nodeName != 'LI') t = t.parentNode;
if (modeSet(t, 0)) return;
fadeIn(t);
}

function fadeIn(e) {
var i, k;
clearTimeout(grovalTid);
if (maskTid) clearInterval(maskTid);
maskTid = setInterval(fade(), 40);
for (i=0; i<navs.length; i++) {
k = e==navs[i]?1:-1;
modeSet(navs[i], k);
if (cnts[i+1]) modeSet(cnts[i+1], k);
}
}

function fade() {
var o = 95;
setOpacity(mask, o);
mask.style.display = 'block';
return function() {
o -= 5;
o = Math.max(o, 0);
setOpacity(mask, o);
if (o > 0) return;
clearInterval(maskTid); maskTid = null;
mask.style.display = 'none';
grovalTid = setTimeout(change, duration);
}
}

function change() {
for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break;
fadeIn(navs[++i % navs.length]);
}

function modeSet(e, n) {
if (n>0) { e.className += ' active';
} else if (n==0) { return e.className.match(/(^|\s)active$/);
} else { e.className = e.className.replace(/(^|\s)active$/, ''); }
}

function setOpacity(e, o) {
e.style.filter = 'alpha(opacity=' + o + ')';
e.style.opacity = o / 100;
}
})();
//-->
</script>
</body>
</html>

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridg...続きを読む

Q洋服のサイズで「O」って何の略ですか?

スポーツウェアとかでよく目にするのですが、サイズで「O」(オー)って何の略なのでしょうか?
「S」ならSMALL、「L」ならLARGEだと思うのですが・・・。

ちょっと気になっただけなので、お分かりになる方、お時間のあるときにでも教えてください。

Aベストアンサー

 Oサイズ=「おおきい」の略・・・というのはウソです(ベタ)。
「ONE」サイズの略です。
 ちなみにXは「EXTRA」の略です。
 だから、XO醤っていうのは・・・ウソです。

Q内のwindow.open

どなたかご伝授ください。
例:
1.htmlの中に<iframe>~</iframe>で、2.htmlを表示したとします。その2.htmlの中には<iframe>~</iframe>で3.htmlを表示させます。
この場合、3.html内のリンクボタンを押した時に別ウィンドウで開かせるwindow.openは、どのhtmlに記述するのでしょ?
1~3.htmlそれぞれに書いてみたんだけど、エラーが出てしまします。

教えて下さい!

Aベストアンサー

targetのことかな?
こちらを参照してください。
http://www.tagindex.com/html_tag/frame/i_target.html

参考URL:http://www.tagindex.com/html_tag/frame/i_target.html


人気Q&Aランキング