現在javascriptを用いてHP作成に取り組んでいる者です。
今回はそのjavascriptでのリンクのはりかたに
わからないところがあるためご質問させていただきます。
自分のHPはフレームを左25、右75の二つにわけていて、現在、左のフレームの方にjavascriptを使用し
プルダウンメニューからのリンクを多くはっています。
希望としてはプルダウンメニューからあるサイトを
選んだときに、その選択したサイトが別ウインドウにでブラウザに表示されるといった仕様にしたいのですが、現実は別ウインドウが開かず、自分のHP上の左フレーム内でのちっさな範囲内のみでしか表示されません。
これではせっかくリンク先へ飛んでも
そのサイトが極小の範囲でしか表示されないので
開いたページの文章が読みにくく、リンクをつけている意味がまったくなくなってしまいます。

javascriptで
HTMLのタグのような<a href=リンク先 target="blank">
といったリンク先のページを別ウインドウに表示させる機能と同じような機能はありませんでしょうか。

お分かりの方がおられましたらよろしくお願いします。

A 回答 (6件)

参考URLはリンク先ごとに表示させるフレームや別ウィンドウを指定できるサンプルです。



参考URL:http://wws.cside.com/factory/tips/tips_b9.html
    • good
    • 0

動作確認していませんが以下に変更すれば別ウィンドウで表示されると思います



function movepage(){
var target=document.formda.pulldown.value;
window.open(target,"sub","width=800,height=600,scrollbars=yes,location=yes,menubar=yes");
}
    • good
    • 0

target="blank"→"_blank"


じゃないの?
javascriptからは、
window.open
    • good
    • 0

window.openでは駄目ですか



<html>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" CHARSET="Shift_JIS">
<TITLE></TITLE>
<script language="JavaScript">
<!--
function link(url){
window.open(url,"sub","width=800,height=600,scrollbars=yes,location=yes,menubar=yes");
}
// -->
</script>
</HEAD>
<body>
<a href="JavaScript:link('http://www.goo.ne.jp/');">goo</a>
    • good
    • 0

> target="blank">


> ではなく
> target="表示するフレーム名"
> に変えてみては?

え?
JavaScript で、という質問だと思いますが?

--w-- さん、とりあえず、現在どのような JavaScript でリンクを貼っているのか、ソースを提示してください。

この回答への補足

<html>
<script language="JavaScript"><!--
function movepage(){
var target=document.formda.pulldown.value;
document.location=target;
}
//--></script>
<body link="#008000" vlink="#ff0000" alink=""00ffff">
<center>
<a href="kansou/kansou.html" target="blank">コラテラル</a><br>
★★★<br>
<a href="kansou/mashinisuto.html" target="blank">マシニスト</a><br>
★★★★<br>

<a href ="kansou/nashonaru.html" target="blank">ナショナルトレジャー</a><br>
★★★☆
</center>
<hr/>
<font color ="green">
<font size="1">日記はこちらから</font><br>
</font>
<a href="http://plaza.rakuten.co.jp/*****/"target="top">マイブログ</a>
<hr>
<h3>リンク<h3>
<form name="formda">
<select name="pulldown">
<option value="http://movie.maeda-y.com/">前田有一映画批評</option>
<option value="http://www.ne.jp/asahi/hp/mastervision/">マスター</option>
</select>
<input type="button" value="GO" onClick="movepage()">
</form>
</body>
</html>

現在このようなリンクをはっています
どこを修正すれば違う別ウインドウを表示できるでしょうか。
よろしくお願いします

補足日時:2005/04/11 19:35
    • good
    • 0

target="blank">


ではなく
target="表示するフレーム名"
に変えてみては?
    • good
    • 0

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

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

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

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

QCSSとJavascript(jQuery)の使い分け方

こんにちは。
CSS、Javascript(jQuery含む)を覚えたての初心者です。

CSSファイルはHTMLの装飾、JavaScriptはHTMLで作ったページに「動き」をもった内容を表示できます。
しかし、Javascriptファイルでは、jQueryファイルと一緒に使い、例えば
$("function(){});").css("color","red"); などを使うことで
CSSファイルと同じように、文字を大きくしたり背景に色をつけたりすることができます。

これでは極論を言ってしまえば、$("function(){});").css("color","red");  をつかった.jsファイルを作りこむことでCSSが不要になってしまいます。しかし、CSSはどのウェブページでも必ず使われているものです。

JavaScript(とjQuery)を使ってホームページを作っている方は、
CSSとJavaScript(とjQuery)との使い分けを どのようにしているのでしょうか?

宜しくお願い致しますm(_ _)m

こんにちは。
CSS、Javascript(jQuery含む)を覚えたての初心者です。

CSSファイルはHTMLの装飾、JavaScriptはHTMLで作ったページに「動き」をもった内容を表示できます。
しかし、Javascriptファイルでは、jQueryファイルと一緒に使い、例えば
$("function(){});").css("color","red"); などを使うことで
CSSファイルと同じように、文字を大きくしたり背景に色をつけたりすることができます。

これでは極論を言ってしまえば、$("function(){});").css("color","red");  をつかった.jsファイルを作り...続きを読む

Aベストアンサー

CSS と JavaScript の使い分けはあなた自身が答えを書いてるじゃないですか、
> CSSファイルはHTMLの装飾、JavaScriptはHTMLで作ったページに「動き」をもった内容を表示
と。

確かに JavaScript で CSS を操作することは可能です。しかしそれは JavaScript での何らかの処理の結果をユーザーに通知するためのもので、処理によって変化しない箇所や初期状態の装飾を設定するものではありません(ただし初期状態としての要素の不可視化は例外:JavaScript を切った状態では不可視な要素へのアクセスができなくなるため)。

また、実際の表示の際 JavaScript で装飾を行うと、まずブラウザのデフォルトの装飾がページに施され、そののちに JavaScript による装飾変更が行われるため二度手間になります。それに対して CSS による装飾を行うと、ブラウザのデフォルトの装飾方法を CSS が修正してそれをページに適用するだけで済みます。

Qjavascriptを外部ファイルにて2つ作成する際、リンク先としてh

javascriptを外部ファイルにて2つ作成する際、リンク先としてhtmlファイルに<script type="text/javascript" src="#"></script>をそれぞれリンク先を変えて2つ記述すると、二番目に記載したjsファイルしか作動しません。対処方法を教えてください。

Aベストアンサー

No3です。

>おっしゃる通り、jsの二つのファイルの両方ともに入ってます。
>この場合どう対処すればいいのでしょうか?
window.onloadで記述されている処理内容が上書きされてしまうために、後のものしか実行されていないというのが直接の原因です。

運がよければ、それを回避するだけでなんとかなりますが…
1)window.onloadの内容をまとめて一つにするか、それぞれをfunction A()、function B()みたいにしておいて、改めてwindow.onload = function(){ A(); B(); } のように定義しなおす。
2)それぞれを個別の外部ファイルとして単独実行することもあるのであれば、以下の質問文で行なっているような方法で、前に定義されているonload処理の内容を保全するような仕組みに書き換える。
 http://oshiete.goo.ne.jp/qa/6170326.html

仮に、このようなやり方でwindow.onloadの競合は回避できたとしても、No2様がご指摘のように重複している名前があると、そちらが原因で動かない(又は誤動作する)ことも考えられます。(ご使用のスクリプトの内容が不明なのでわかりません)

さらには、No4様がご指摘のような事態(No2様のご指摘の複雑形)ですと、スクリプトの内容を理解できない限り回避は無理でしょう。
(内容が理解できても、面倒かもしれません)

No3です。

>おっしゃる通り、jsの二つのファイルの両方ともに入ってます。
>この場合どう対処すればいいのでしょうか?
window.onloadで記述されている処理内容が上書きされてしまうために、後のものしか実行されていないというのが直接の原因です。

運がよければ、それを回避するだけでなんとかなりますが…
1)window.onloadの内容をまとめて一つにするか、それぞれをfunction A()、function B()みたいにしておいて、改めてwindow.onload = function(){ A(); B(); } のように定義しなおす。
2)それぞれを個...続きを読む

QFireFox3.6を使っていますが、javascript:void(

FireFox3.6を使っていますが、javascript:void(0);というリンクを開けようとしてもリンク先へ飛ばさないんです。どうしてでしょうか。

FireFox3.6でアメーバブログを書き込む場合、顔文字を入れるボタンを押してもなんの反応もなくリンク先へ飛ばさないんです。顔文字やアフィリエイトのボタンをクリックするとステータスバーにjavascript:void(0); が表示されています。

IEエンジンのブラウザの場合は異常なしですが。

ちなみに、javascriptは有効にしてますし、ポップアップウィンドウもブロックしていません。
プラグインの問題でしょうか。

あともう一つ気になる点がございます。

Flashplayerはもう最新版をインストールしたのにも関わらず、ブログを開くと写真通りに表示されます。
こちらも前の問題と関係あるでしょうか。


一気にたくさん質問してしまって申し訳ございません、ご回答をお待ちしております。

Aベストアンサー

・Javascript
adblock,NoScriptといったJavascriptを制限する拡張機能があります。
それらを使っているなら、その設定も変えてください。
アメブロは使ってないので、それ以上はよくわかりません

・Flash
メニューの
ツール > アドオン
でアドオンマネージャが表示されます。「プラグイン」というアイコンがあるので、クリックすると現在インストールされているプラグインの一覧が表示されます。

その中にFlashがあるか、無効化されていないか確認してください。

たしか、IE用と別にFirefox用をインストールする必要があったと思います。インストールされていない場合は、『Firefoxで』Adobeのフラッシュのダウンロードページをアクセスしてください。

Qリンク先のJavaScriptを実行するリンク

a.htmには以下のようなJavaScriptが記載されています。

<a href="javascript:c_click(1)">test</a>

a.htmの中にはclick内の数字が1~50程度のリンクがあり、
数字に応じて異なるJavaScriptが実行されるページです。



b.htmからa.htmの上記の<a href="javascript:c_click(1)">test</a>が実行されるリンクを作ることは可能なのでしょうか。

たとえば、b.htmに以下のようなHTMLを記述することを想定しています。

<a href="a.htmのjavascript:c_click(1)">test</a>

Aベストアンサー

要件が以下の通りとします。

1. b.htm のリンクを押す
2. 遷移先または子画面として a.htm が開く
3. b.htm から渡された引数をもとに、関数 c_click が実行される
4. これ以降で、両者のやり取りは無い

この場合なら、a.htm の URL に引数を付けて実行が一番簡単です。
ブラウザによるキャッシュが利くので、即応性を求めないならこれが一番でしょう。

/* --- b.htm --- */
<a href="a.htm?q=1">画面遷移で開く</a>
<a href="a.htm?q=1" name=nameA>新しいタブで開く</a>

/* --- a.htm --- */
<script>(function(){
var s = window.location.search;
if (s && s.length > 1) {
var ps = s.substr(1).split('&');
ps.forEach(function(p){
var kv = p.split('=');
if (kv[0] == 'q') c_click(unescape(kv[1])); // c_click('1') を実現
});
}
})();</script>

もし開いた後でもやり取りがしたい場合は、ポップアップ形式の window.open なら可能ですが、最近の潮流ではセキュリティー観点から面倒なことになるのでお勧めしません。

要件が以下の通りとします。

1. b.htm のリンクを押す
2. 遷移先または子画面として a.htm が開く
3. b.htm から渡された引数をもとに、関数 c_click が実行される
4. これ以降で、両者のやり取りは無い

この場合なら、a.htm の URL に引数を付けて実行が一番簡単です。
ブラウザによるキャッシュが利くので、即応性を求めないならこれが一番でしょう。

/* --- b.htm --- */
<a href="a.htm?q=1">画面遷移で開く</a>
<a href="a.htm?q=1" name=nameA>新しいタブで開く</a>

/* --- a.htm --- */
<script>(func...続きを読む

Qjavascriptのアラートを画面の中に表示させるには?

お世話になっております。javascriptを見よう見まねでクイズ問題を作成しようと挑戦しています。
問題を解いた結果を、alertで表示させていますが
これをアラートではなく、WEB画面の中に表示させるのには
どうしたらいいのでしょうか?

例)
alert(tm + "秒でクリア!!");
mondaisuu =mondaisuu +1
if (miss>0) {ruiseki=ruiseki+1}
alert(ruiseki +"回ミス"+"で問題数は"+mondaisuu)

↑の2つのアラートを、画面の下の方に分けて表示させたい。

Aベストアンサー

「回答する」ボタンを押すと、二箇所に文言を表示させる具体的な例

<script>
function 結果表示(id, message) { document.getElementById(id).textContent = message; }
function 回答() {
結果表示('アラートっぽい枠', '次の問題にいきましょう!');
結果表示('告知っぽい枠', '1回ミスで問題数は2');
}
</script>
<style>
#アラートっぽい枠 { font-size:150%; text-align:center; border:thick solid red; border-radius:1em; }
#告知っぽい枠 { font-size:100%; text-align:center; border:thick solid darkred; border-radius:1ex; }
</style>

<p id="アラートっぽい枠"></p>
<p id="告知っぽい枠"></p>

<button onclick="回答()">回答する</button>

「回答する」ボタンを押すと、二箇所に文言を表示させる具体的な例

<script>
function 結果表示(id, message) { document.getElementById(id).textContent = message; }
function 回答() {
結果表示('アラートっぽい枠', '次の問題にいきましょう!');
結果表示('告知っぽい枠', '1回ミスで問題数は2');
}
</script>
<style>
#アラートっぽい枠 { font-size:150%; text-align:center; border:thick solid red; border-radius:1em; }
#告知っぽい枠 { font-size:100%; text-align:center; border:thick solid d...続きを読む

Qリンク先のURLを記述せずに、Javascriptでランダムリンクを貼

リンク先のURLを記述せずに、Javascriptでランダムリンクを貼る方法をさがしています。

いまWEBサイトを作っていて、
ランダムリンクのページを追加するときに、
簡単な方法はないのか探しています。

ちょっとこれでは意味がわからないと思うので、
説明させてください。

いま作っているサイトの問題点は、
ランダムリンクで飛んだページに、
ランダムリンクのボタンがあるので、
ページを増やすごとに、それぞれのhtmlを書き換えなければならないところです。


いま書いてあるのは、このような体裁です。


────────────────────────────────────────

★javascript

<script language="JavaScript"><!--
myCnt = 6; // リンク先の数
myTable = new Array( // リンク先の登録
"page1.html",
"page2.html",
"page3.html",
"page4.html",
"page5.html",
);

function myRndLink(){ // 適当に選んでリンクする関数
myRnd = Math.floor(Math.random()*myCnt); // 0~(myLine-1)の乱数を求める
location.href = myTable[myRnd]; // リンクする
}
// --></script>

★ボタン↓
<input type="image" img src="randam.jpg" "onclick="myRndLink()">


────────────────────────────────────────


それぞれのpage内にランダムリンクがありますので、
page6を追加する場合、上のpage1~5それぞれのhtmlに、
「page6」を追加して記述せねばなりません。
pageを増やすごとに、労力がかかるのは、ちょっとしんどいです。

自分が考えた打開策は、


 (1)指定したフォルダの中からランダムリンクするような方法


これであれば、新しく作ったページをフォルダ内に入れるだけなので簡単かと。


 (2)あるファイル名(例えば、page)を含むものからランダムリンクするような方法


これであれば、新しく作ったページの名前を「page●●」にするだけなので簡単かと。


javaはまったく読むことができないので、
親切な方のサイトからコピペして使っていますが、
上のような方法は可能なのでしょうか?
検索しても出てきませんでした。

みなさん、よろしければ知恵をお貸しください。
よろしくおねがいします。

リンク先のURLを記述せずに、Javascriptでランダムリンクを貼る方法をさがしています。

いまWEBサイトを作っていて、
ランダムリンクのページを追加するときに、
簡単な方法はないのか探しています。

ちょっとこれでは意味がわからないと思うので、
説明させてください。

いま作っているサイトの問題点は、
ランダムリンクで飛んだページに、
ランダムリンクのボタンがあるので、
ページを増やすごとに、それぞれのhtmlを書き換えなければならないところです。


いま書いてあるのは、このような体裁です。


─...続きを読む

Aベストアンサー

Javascriptを外部ファイルにする

myTable = new Array(
"page1.html",
"page2.html",
"page3.html",
"page4.html",
"page5.html");

function myRndLink(){
myRnd = Math.floor(Math.random()*myTable.length);
location.href = myTable[myRnd];
}

以下はscript.jsで保存した場合。

各HTMLファイルの<head></head>内に
<script language="JavaScript" src="script.js"></script>
を追記。

<head>
<script language="JavaScript" src="script.js"></script>
<title>???</title>
</head>

こんな感じ。

編集は外部ファイルにしたJavascriptファイルのみで済む。

Qフォームで送信ボタンを押した際に、Javascriptに入力した値が渡

フォームで送信ボタンを押した際に、Javascriptに入力した値が渡せない

タイトルそのままです。
ボタンを押したらJavascriptでフォームの値をとりたいのです

今は、

最初に取り込ませたいJavasprictをhead内に指定しておき、
<script language="JavaScript" src="/js/mc.js" type="text/javascript"></script>

本文中のformタグではは下文のようにしてあります。
<form id="form" name="ffform" action="#" method="post">

送信用のボタンは画像で書き換えていて、ボタンを押すと、Javascriptの方で関数checkformを動かすようにしたいのです
<input type="image" src="./img/submit.png" alt="送信" onclick="checkform()">

実際に押してみても、ただ何も変化がなく、どうすればいいか困っています。どなたか教えてください
actionのところにJavascriptを指定したら、Jsそのものを開いてしまいますし、cgiを置こうにも、今あるcgiは Javasprictからさらに値を渡す為にあるcgiだけなのです・・・・・・

フォームで送信ボタンを押した際に、Javascriptに入力した値が渡せない

タイトルそのままです。
ボタンを押したらJavascriptでフォームの値をとりたいのです

今は、

最初に取り込ませたいJavasprictをhead内に指定しておき、
<script language="JavaScript" src="/js/mc.js" type="text/javascript"></script>

本文中のformタグではは下文のようにしてあります。
<form id="form" name="ffform" action="#" method="post">

送信用のボタンは画像で書き換えていて、ボタンを押すと、Javascriptの方で関数check...続きを読む

Aベストアンサー

とりあえず、/js/mc.js の内容を、alert("OK"); の1行だけにして、
画像をクリックしてOKが表示されれば、HTMLは大丈夫と言うことです。

mc.js があなたの希望通り動いてないだけ。

QJavascriptで毎週月曜日深夜0:00にテキストリンクのリンク先を変更したい

ウェブページにレシピを掲載しています。

週5回日替わりでメニューを載せていますが、
毎週、「お手軽20分レシピ」などとテーマわけをして、
紹介しており、そのテーマに沿った一口メモをポップアップウィンドウで表示させらるようテキストリンクをはっています。

現在このリンク先のURLは手動で修正していますが、面倒ですし、できれば深夜0:00にJavascriptで自動修正したいと思います。

が、Javascriptのなかに<a>タグをどのように張り込めばいいのかわかりません。非常に基本的な質問で心ぐるしいのですが、ネットで検索をかけても、同様の機能を使うユーザは多くないようで、ページが見つかりません…。ご教示ください。

Aベストアンサー

補足読みました。
前回(#8)のスクリプトをそのまま生かしたい場合は、

document.write(" target=_blank>今日のレシピ</a>");

この行を、

document.write(" target=recipe onClick=window.open('','recipe','width=400,height=300')>今日のレシピ</a>");

こうすれば、希望通りの動作が得られるのではないかと思います。 こうすると、リンクタグ内に追加したJavaScriptでブランクのウィンドウを開き、そのウィンドウにリンクで指定したページを読み出すようになるはずです。

ただ、こうするよりも、関数でウィンドウを開く動作を指定しておいて、その関数をリンクから呼び出す方が、スマートなソースになると思います。
この場合は、head内のスクリプトは、以下のようにします。

<script type="text/javascript">
<!--
rcp = new Array();
rcp[1]="****1.html";
//~ 中略 ~
rcp[30]="****30.html";
rcp[31]="";

function TDR(){
al=new Date();
dd=al.getDate();
window.open(rcp[dd],"recipe","scrollbars=1,resizable=1,width=400,height=300");
}
// -->
</script>

この関数を呼び出すリンクについては、

<a href="#" onClick="TDR(); return false;">今日のレシピ</a>

これでよいはずです。 あとは、はじめに定義しているrcp[]という配列に、順次その日付のときに表示させたいHTMLファイルのURLを記述すれば、動作してくれると思います。
こちらの方が簡素で良いと思います。

これでいかがでしょうか?

補足読みました。
前回(#8)のスクリプトをそのまま生かしたい場合は、

document.write(" target=_blank>今日のレシピ</a>");

この行を、

document.write(" target=recipe onClick=window.open('','recipe','width=400,height=300')>今日のレシピ</a>");

こうすれば、希望通りの動作が得られるのではないかと思います。 こうすると、リンクタグ内に追加したJavaScriptでブランクのウィンドウを開き、そのウィンドウにリンクで指定したページを読み出すようになるはずです。

ただ、こうするよりも...続きを読む

QJavascriptとJqueryを混在し記述

JavascriptとJqueryが混在したスクリプトファイル(.js)の書き方について質問です。

Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが
気になるので質問させてください。

通常、javascriptの書き方として、スクリプトやその関数定義を1つのjsファイルに書くと思いますが、
Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後(要素を特定できるようにするため)に実行したい場合の
スクリプトを

$(function(){
//Jquryや通常のjavascript
});

の中にこのように書けばいいって話ですよね?
つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね?

===== script.js ======

//(1)Javaスクリプト ←jsファイルが読み込まれたら実行するスクリプト

//関数定義
function test(){
//Javaスクリプト
}

//(2)Jquery ←ページが全て読み込まれた後で実行するスクリプト
$(function(){
//Jqueryスクリプト
//Javaスクリプト

});


初歩的なことかもしれませんがすいません。

JavascriptとJqueryが混在したスクリプトファイル(.js)の書き方について質問です。

Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが
気になるので質問させてください。

通常、javascriptの書き方として、スクリプトやその関数定義を1つのjsファイルに書くと思いますが、
Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後(要素を特定できるようにするため)に実行したい場合の
スクリプトを

$(function(){
//Jquryや通常のjavascript
});

の中...続きを読む

Aベストアンサー

こんにちは。

はい、その認識で大丈夫です。
jQueryが混在というか、jQueryというライブラリの機能を使えるようになっているのです。
なのでJavaScriptとjQueryとわけることに違和感があります。

QJavascriptを用いてリアルタイムソルフェージュ

ウェブページにて音源と譜面を用いた簡単な
リアルタイムソルフェージュ(読譜訓練)なる
セクションを設置したいと思っています。

つまり,譜面がスクロールしているバックで
音源が同時再生されマウス操作など必要なく
画面を見ていれば良い,あるいは楽器を
手に合奏も可能,ということです。


条件として,以下三つのボタンを配置。

 ・譜面のみ右から左へスクロールさせるボタン
 ・音源のみ再生するボタン
 ・譜面スクロール開始と同時に音源再生
  される(テンポまたは読譜力を考慮し
  譜面のスクロール速度調整)ボタン


この場合譜面は横長に繋ぎ合わせた画像と
して保存し,タイマーで順次流れていくような
発想が出来ます。

しかしながら,当方作成するにあたって
最低限のHTMLとCSSの知識しかなく
Javascript等動的な役割を持たせる言語は
希薄な為どなたかのご意見を賜りたいと思います。
あるいは,参考となるページから組み合わせて
ヒントなどを得られればとも思います。

何卒,宜しくお願い致します。

ウェブページにて音源と譜面を用いた簡単な
リアルタイムソルフェージュ(読譜訓練)なる
セクションを設置したいと思っています。

つまり,譜面がスクロールしているバックで
音源が同時再生されマウス操作など必要なく
画面を見ていれば良い,あるいは楽器を
手に合奏も可能,ということです。


条件として,以下三つのボタンを配置。

 ・譜面のみ右から左へスクロールさせるボタン
 ・音源のみ再生するボタン
 ・譜面スクロール開始と同時に音源再生
  される(テンポまたは読譜力を考...続きを読む

Aベストアンサー

レスがつきませんね~。
たたき台に!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>dokodemo kanntann?</title>
<style>
ul { list-style-type: none; }
ul,li { margin:0px; padding:0px; }
ul li img { width:640px; height:80px; margin:20px 0px;}
#score2 { display:none;border:2px red solid; padding:16px; position:absolute; top:260px; left:30px; width:560px; background-color:#fff; height:140px;}
#score3 { margin-top:16px; border:1px #555 solid; overflow:hidden; position:relative;}
#score4 { border:1px #555 solid; height:100px; }
#score4 img { floar:left; width:640px; height:80px; margin:0px; padding:0px; }
</style>

<div>
<h3>椅子の上でボニョボニョ</h3>
<p><input type="button" id="bt0" value="Open"></p>
<ul id="SCORELIST">
<li><img src="gakufu00.gif" alt="gakufu00"></li>
<li><img src="gakufu01.gif" alt="gakufu01"></li>
<li><img src="gakufu02.gif" alt="gakufu02"></li>
<li><img src="gakufu03.gif" alt="gakufu03"></li>
<li><img src="gakufu04.gif" alt="gakufu04"></li>
</ul>
</div>
<div id="score2">
<div>
<input type="button" id="bt1" value="|<">
<input type="button" id="bt2" value="<<">
<input type="button" id="bt3" value="■">
<input type="button" id="bt4" value=">">
<input type="button" id="bt5" value=">>">
<input type="button" id="bt6" value=">|">
</div>
<div id="score3">
<div id="score4">

</div>
</div>
</div>


<script type="text/javascript">
//@cc_on
var x = 0, w = 0;
var timerId = null;
var tempo = 50;

addEvent(window, 'load', function (){
var i = 0, c, o, imgs = document.getElementById('SCORELIST').getElementsByTagName('img');
while (o = imgs[i++]) {
w += o.offsetWidth;
document.getElementById('score4').appendChild(o.cloneNode());
}
document.getElementById('score4').style.width = w + 'px';
document.getElementById('score4').style.marginLeft = '0px';
});
addEvent(document.body, 'click', function (evt) {
var o, s;

o = evt.target || evt.srcElement;
if (o.tagName != 'INPUT' || !o.id ) return;
switch (o.id) {
case 'bt0':
s = document.getElementById('score2').style;
s.display = (s.display == 'none' || s.display == '')? 'block': 'none';
break;
case 'bt1':
if (timerId) clearInterval(timerId);
timerId = null;
x = 0;
document.getElementById('score4').style.marginLeft = '0px';
break;
case 'bt2':
if (timerId) {
clearInterval(timerId);
tempo +=5;
if (tempo>200) tempo = 10;
timerId = setInterval(move0, tempo);
}
break;
case 'bt3':
if (timerId) clearInterval(timerId);
timerId = null;
break;
case 'bt4':
if (!timerId) {
timerId = setInterval(move0, tempo);
}
break;
case 'bt5':
if (timerId) {
clearInterval(timerId);
tempo -=5;
if (tempo<10) tempo = 10;
timerId = setInterval(move0, tempo);
}
break;
}
});
function move0() {
document.getElementById('score4').style.marginLeft = -x + 'px';
x+=4;
if (w < x) { clearInterval(timerId); timerId = null; }

}

function addEvent(obj, evt, eventHandler) {
obj./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, false);
}

</script>

レスがつきませんね~。
たたき台に!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>dokodemo kanntann?</title>
<style>
ul { list-style-type: none; }
ul,li { margin:0px; padding:0px; }
ul li img { width:640px; height:80px; margin:20px 0px;}
#score2 { display:none;border:2px red solid; padding:16px; position:absolute; top:260px; left:30px; width:560px; background-color:#fff; height:140px;}
#score3 { margin-top:16px; border:1px #555 solid; overflow:hid...続きを読む


人気Q&Aランキング

おすすめ情報