今、ホームページビルダーを使ってホームページの作り直しをしています。
それで、ページ上の普通の文字(ロゴなどではないと言う意味)の上に、マウスを当てると、文字の色が変わるようにしたいのです。それをクリックすると、リンクする設定になっている文字に対してです。
いったい、それは、どのようなことをしたらそうなるのでしょうか?素人には無理でしょうか?
自分なりに、それはスクリプトなのではないかな、と考え、それを説明している無料サイトなども見ているのですが、「文字の色を変える」などというのは見つからず、今ひとつ分かりません。
もし、よければどなたか、教えてください。

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

A 回答 (4件)

 


  hover のスタイルシートでの色指定は、すでに答えが出ています。しかし、次のようなヴァリエーションがあります:
 
  1)
--------------------------------------
 
</HEAD>

<style type="text/css">
<!--

A:active {text-decoration: none; color: #ff0000}
A:hover {text-decoration: none; color: #0000ff}

.pink-text {text-decoration: none; color: #ffa0e0}
.sky-text {text-decoration: none; color: #c0c0ff}
.green-text {text-decoration: none; color: #007000}

-->
</style>

 …………

<a href="Test001.html">Test001</a><br>
<a href="Test002.html" class="pink-text">Test002</a><br>
<a href="Test003.html" class="sky-text">Test003</a><br>
<a href="Test004.html" class="green-text">Test004</a><br>

  これは、何かといいますと、Link の色や、Visited の色は指定していないので、Test001 のリンクは、デフォルトの青が「リンク」で、赤紫が「訪問済み」の色になりますが、Test002, Test003, Test004 のリンクは、ピンク、空色、緑という風に、色指定ができます。リンクの文字を、普通の <font color="#">で色指定すると、リンクの色指定や、スタイルシートでの hover 色の指定は有効になりません。上のように、スタイルシートで、特定のリンクを色指定すると、文字に自由な色を付けることができ、しかも、hover 色が有効になります。
 
  しかし、上の方法だと、Link や Visited の色指定はできません。それも好みの色にしようとすると、次のようにします:
 
  2)
----------------------------------------
 
</HEAD>

<style type="text/css">
<!--

A:active {text-decoration: none; color: #ff0000}
A:hover {text-decoration: none; color: #0000ff}

.pink-text {text-decoration: none; color: #ffa0e0}
.sky-text {text-decoration: none; color: #c0c0ff}
.green-text {text-decoration: none; color: #007000}

-->
</style>

<BODY Link="#7040ee" Vlink="#009090">

 …………

<a href="Test001.html">Test001</a><br>
<a href="Test002.html" class="pink-text">Test002</a><br>
<a href="Test003.html" class="sky-text">Test003</a><br>
<a href="Test004.html" class="green-text">Test004</a><br>

 …………

</BODY>

  このように、スタイルシートでは、リンク、Vリンクの色指定はせず、<BODY>タグのなかで、リンク、訪問済みリンクの色指定をすると、この指定の色にリンクや訪問済みリンクの色が指定されます。無論、この場合も、スタイルシートで色指定した文字は、リンクであっても、色は指定通りです。そして、hover は有効です。(実際にコピーして確認してみられると分かります。これは、通常のリンクの色指定と、スタイルシートでの色指定などの優先順位の違いを利用しています。ブラウザーにより、あるいは説明通りに表示されない可能性がありますが、スタイルシートの hover 指定が可能な場合、上の方法も可能なはずです)。
 
    • good
    • 0
この回答へのお礼

本当にありがとうございました。
色の設定もできました。
ただ、test1からtest4までの記述があり、ホームページ作成サイト上に
出てきますよね。それは、なんのために出すのでしょうか?
これで、確認しみて必要なくなったら消す、というものか、または、これをコピーして張り付けて文字を打ち直して使う物か、と想像はしいています。
本当にHP初心者なもので、1つやると、また1つ疑問が出て来るという状態です。

お礼日時:2001/11/21 07:51

下の方に補足致します。


私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。

HTMLソースを開くと、あれこれ書いてあると思いますので、
</TITLE>の後に、
<STYLE TYPE="text/css">
<!--
A:link { color: blue;}
A:hover { color: red;}
-->
</STYLE>
を貼り付ければ、リンクを張っている部分が青に、カーソルをあわせた時が赤になるようになっています。
{color:○○○;}
○○○の部分にカラーネーム(redや、blueなど)または、カラーコード(#ff0000や、#0000ffなど)を入れることで色の指定が出来ますので、好きな色に指定し直してくださいませ。

#>NIGHT2000さん。
勝手にソースをコピーして書かせていただきました。
    • good
    • 0
この回答へのお礼

ありがとうございました。
文字の色が変わるようになりました。

お礼日時:2001/11/21 07:52

下で回答した者です^^;


勢いあまって、リンクのアンダーラインまで操作してしまいました。

以下のソースで充分です。

<HTML>
<HEAD>
<TITLE>色替えテスト</TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: blue;}
A:hover { color: red;}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<A HREF="test1.html">test1</A><br>
<A HREF="test2.html">test2</A><br>
<A HREF="test3.html">test3</A><br>
<A HREF="test4.html">test4</A><br>

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

すみません、少しやってみたら、できました。
ありがとうございました。

お礼日時:2001/11/16 20:59

こんな感じですね^^



重要なのは、<STYLE TYPE="text/css">と</STYLE>で囲まれた部分です。ここで、リンクにマウスカーソルがのったときの色の指定などを行っています。
カラーのblueとかredとかを変更すれば、いろいろ試せますよ^^

<HTML>
<HEAD>
<TITLE>色替えテスト</TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: blue; text-decoration: none; }
A:hover { color: red; text-decoration: underline; }
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<A HREF="test1.html">test1</A><br>
<A HREF="test2.html">test2</A><br>
<A HREF="test3.html">test3</A><br>
<A HREF="test4.html">test4</A><br>

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

ありがとうございました。
ところで、すみませんが、これをどこに書くのでしょう?
(ほんっとに、申し訳ありません、恥ずかしい限りです)
(1)HTMLソースを開いてそこに、直接書き込む
(2)スクリプトを設定したいところをドラッグして<挿入>→<スクリプト>を開いて書き込む
この2つあたりがそうではないか?と見当つけてるんですが……?
まったく初心者なんですけど、仕事上HP作成しなければならず、しかも、
よせばいいのにスクリプトに興味を持ってしまいましって。近くに誰も分かる人がいないのです。

お礼日時:2001/11/16 20:16

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

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

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

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

Qgooの無料ホームページへアップした画像を、簡単ホームページに・・・

gooの無料ホームページへアップした画像を、簡単ホームページに・・・
gooの無料ホームページへアップした画像を、
簡単ホームページや別のところでリンクして使う方法がわからないのですが、どなたか教えていただけないでしょうか?
無料HPの方でアップロードした画像をリンクで持ってくる場合、
画像のURLはどうすれば取得出来るのですか?他の無料日記などに、
<img src=・・・・・>のタグで貼る場合に、
・・・・・に入れるURLがわからなくて困っています。
それともこのやり方ではなく、他のやり方でないとダメなのでしょうか?
毎度稚拙な説明&質問ですみません。
出来たら素人向けの説明でお願いします(^^;

Aベストアンサー

『goo』さんの無料HPは『xHoops!』さんに移転してるはずですが、
移転は完了してますか?

アップロードした画像ファイルのURLは、
TOPページの『index.html』と同じ階層なら、
http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
となります(多分?)、タグで書くと

<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
" border="0" width="横" height="縦" alt="画像コメント">

ってな感じになります。もっと簡単にするなら
<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子">
です。

無料日記に画像を貼り付ける場合は、タグの使用が許可されてる場合だけです
基本のタグは、同じと考えて良いと思います。が・・・タグの書き方等は

『beepのホームページを素敵にしよう』
http://www.soma.or.jp/~beep-pc/

『牛飼いとアイコンの部屋』
http://www.ushikai.com/
ここの2つはシンプルで解りやすいでしょう。
もう少し詳しく書いたほうが良いですか?


          X1turboの友達 hiro。

『goo』さんの無料HPは『xHoops!』さんに移転してるはずですが、
移転は完了してますか?

アップロードした画像ファイルのURLは、
TOPページの『index.html』と同じ階層なら、
http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
となります(多分?)、タグで書くと

<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
" border="0" width="横" height="縦" alt="画像コメント">

ってな感じになります。もっと簡単にするなら
<img src="http://users.hoops.ne.jp/ユーザーID/フ...続きを読む

QJavaScriptで背景や文字色を色→色へ自動で変える方法

JavaScriptで背景や文字色を色→色へ自動で変える方法


例えば、赤から青へ、青になったらまた赤に色が徐々に変わり、自動的にループしてくれるようなものを探しています。

検索したところcolortweenというjsを発見したのですが、どうやって使えばいいのかわかりません。


ご回答よろしくお願い致します。

Aベストアンサー

<div id="square22" style="width:50px;height:50px;background-color:#FF0000;">
<input type="button" value="stop" onclick="colorTween.stop();">
</div>

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
<script type="text/javascript">
var object = document.getElementById('square22').style;
var property = 'backgroundColor';
var easing = Tween.regularEaseIn;
var startColor = 'FF0000';
var endColor = '0000FF';
var duration = 5;

var colorTween = new ColorTween(object, property, easing, startColor, endColor, duration);
colorTween.onMotionFinished = colorTween.yoyo;
colorTween.start();
</script>


JAVASCRIPT MOTION TWEEN
http://jstween.blogspot.com/
Tween.js ColorTween.jsファイル配布元。
英語だけどサンプルは豊富だし、なんとかなるんじゃないだろか。

JavaScript/Library/Effects/JSTween - アークウェブシステム開発SandBox
http://www.ark-web.jp/sandbox/wiki/278.html
メソッドなどの解説。
日本語だけど、ある程度の知識を有する者を対象に書かれてます。(社内向けかも)


ちなみに、かなりCPUを喰いますね。私の環境でループ処理するときつい。

<div id="square22" style="width:50px;height:50px;background-color:#FF0000;">
<input type="button" value="stop" onclick="colorTween.stop();">
</div>

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
<script type="text/javascript">
var object = document.getElementById('square22').style;
var property = 'backgroundColor';
var easing = Tween.regularEaseIn;
var startColor = 'FF0000';
var endColor = '0000FF';
var...続きを読む

Q無料ホームページに画像ファイルは載せれるのでしょうか?

gooやyahooの無料ホームページに画像ファイルやPDFファイルを載せることは可能でしょうか?

目的は、「教えてgoo」で行う数学の質問をホームページに記載するためです。(特殊な数式を、キーボードで打てないので、手書きして、ホームページにのせるためです。)

Aベストアンサー

YAHOOのジオシティーズにHPを作れば
画像でもpdfファイルでも載せられますよ。

Qページ上での文字の拡大について

http://oshiete1.goo.ne.jp/qa520022.html
コチラのページを参考にさせていただき、
文字の拡大・縮小ボタンをつくることができました。
できれば元に戻すボタンがほしいと思っています。
ソースをおしえていただけますでしょうか。
宜しくお願い致します。

Aベストアンサー

こんにちは

どれを参考にされてるのか分からなかったのでとりあえず簡単なの作ってみました

<style type="text/css">
.btn {
width:100px;
}
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + eval(val);
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
}
//--></script>

<input type="button" class="btn" value="縮小" onclick="sizech('-20')">
<input type="button" class="btn" value="default" onclick="sizech('0')">
<input type="button" class="btn" value="拡大" onclick="sizech('+20')">

※Operaは80%以下のサイズにはなりません(パーセンテージは減ってますけど)
font-sizeを指定していない特定の要素やpx指定した要素は変更できません(ボタン内の文字も拡大するなら .btn{font-size:100%;}のようにパーセント指定で追加します)

要は元に戻すボタンを押したときにサイズを100%に変更するという条件をスクリプト内に追加していくようになると思います

No.6なら
function fsCh(i){
n+=i;
if(i=="0") n=3;
・・・・
<input type="button" value="元に戻す" onClick="fsCh(0)">

No.3なら
function sizechange(pm,pmper) {
・・・・
pmper = new Number(pmper); //←2箇所あります
if(pmper == "0") { fspre=100; }
・・・・・
<input type="button" onclick="sizechange('b','0')" value="元に戻す">

・・・でおそらくできると思います

こんにちは

どれを参考にされてるのか分からなかったのでとりあえず簡単なの作ってみました

<style type="text/css">
.btn {
width:100px;
}
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + eval(val);
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize...続きを読む

Q画像に直リンク可能な無料レンタルサーバー(ホームページスペース)

レンタル掲示板のトップページに画像を載せたいのですが、例えばyahooで与えられるホームページスペースはアップした画像に外部からの直リンクができないようになっています。

外部からも画像直リンクができるような無料でレンタルできるサーバー(ホームページスペース)をご存知ありませんでしょうか。

宜しくお願い致します。

Aベストアンサー

land.toなら大丈夫です。ここは規約もそれほど厳しくないし、サーバーの対応も誠実で、おすすめです。
http://land.to/

Qお世話になります。今ホームページビルダーとMT5を使ってサイトを作成し

お世話になります。今ホームページビルダーとMT5を使ってサイトを作成し、運営しております。以前はマーキーを使っていたところに、目立たせたいと思い、電光掲示板(ティッカー)を設置しました。なんとかレイアウトを調整し、3種類順番に表示できるようになったのですが、肝心のところ、右から左にうごきません。サイトを検索し変更を加えたものが下記になります。どうか宜しくお願いいたします。
http://www.tcollection.net/home.html
のフラッシュの直下のテキスト部分です。
<style type="text/css">
<!--
#msgBx{
position :relative;
top :-23px;
left :198px;
font-size :15px;
padding :5 0 0 10;
color :navy;
background-color :#fffff;
height :25px;
width :599px;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = scrMsg;
var JSTKcnt = 0;
var JSTKstpX = 10; //停止座標
var JSTKstpTime = 200; //停止時間
var JSTKposLeft = 600; //開始座標
var JSTKtime;
var JSTKi = 0; //配列変数

var JSTKlist = new Array(); //流すメッセージの配列
JSTKlist[0]="☆新人「佐々木 あまね」さん 『限定!!最大4,000円OFFプレゼント』実施中!!";
JSTKlist[1]="☆新人「天咲 ちひろ」さん『限定!!最大4,000円OFFプレゼント』実施中!!";
JSTKlist[2]="☆新人「森下 みき」さん 『限定!!最大4,000円OFFプレゼント』実施中!!";

var JSTKurl=new Array(); //メッセージに対応したリンク先URL
JSTKurl[0]="http://www.tcollection.net/companion/sasakiamane.html";
JSTKurl[1]="http://www.tcollection.net/companion/amasakitihiro.html";
JSTKurl[2]="http://www.tcollection.net/companion/morisitamiki.html";


function scrMsg(){
document.getElementById('msgBx').innerHTML = msgTxt();
JSTKcnt++;
if(JSTKcnt > JSTKstpTime){
JSTKcnt = 0;
JSTKi++;
if(JSTKi==JSTKlist.JSTKlength){i=0;}
}
setTimer();
}

function msgTxt() {
var trg = 'target="_blank"';
var drift = "";
var speed = 15; //テキストの流れる速さ
var posX = JSTKposLeft-JSTKcnt*speed; //テキストの X座標

  if (posX < JSTKstpX){ posX = JSTKstpX;}//posX が stpX(停止座標)になったらスクロールを止めます
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
}

function setTimer() {
JSTKtime = setTimeout("scrMsg()",20);
}

// -->
</script>
その下にビルダーで作成したロールオーバーのスクリプトがありますので、参考サイトをもとに「JSTKcnt」のように「cnt」に「JSTK」を付け加えてやりましたら最後に「undefined」というテキストがでるようになりました。どうかよろしくお願いします。

お世話になります。今ホームページビルダーとMT5を使ってサイトを作成し、運営しております。以前はマーキーを使っていたところに、目立たせたいと思い、電光掲示板(ティッカー)を設置しました。なんとかレイアウトを調整し、3種類順番に表示できるようになったのですが、肝心のところ、右から左にうごきません。サイトを検索し変更を加えたものが下記になります。どうか宜しくお願いいたします。
http://www.tcollection.net/home.html
のフラッシュの直下のテキスト部分です。
<style type="text/css">
<!--
...続きを読む

Aベストアンサー

それから、こいつ
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
何のための{}か知らんけど、
drift = '<div style="position:absolute;left:'
+ posX + 'px;'
+'"><a href="' + JSTKurl[JSTKi] + '" '
+ trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >'
+ JSTKlist[JSTKi] + '</a></div>';
return drift;
と、posX + 'px;'を付けた方が、幸せになれる人が多い

さらに
JSTKtime = setTimeout("scrMsg()",20);
は、別にかまわないけど、、
JSTKtime = setTimeout(function(){scrMsg();},20);
と、しとけばあ

それから、こいつ
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
何のための{}か知らんけど、
drift = '<div style="position:absolute;left:'
+ posX + 'px;'
+'"><a href="' + JSTKurl[JSTKi] + '" '
+ trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="se...続きを読む

Q忍者ツールズの無料ホームページにFTPでホームページを転送したのですが画像ファイルが表示されません。

今までFc2のホームページを使っていたのですが調子がどうも悪いので忍者ツールズの無料ホームページに変えたんですがFTPでHPを転送すると画像が表示されません。
いままではFc2の編集機能でアップロードして貼り付けなおしていたんですが忍者のHPにはそれがないので困っています。
ホームページビルダーV9を使って作ったHPをFFFTPで送ったのですがホームページビルダーの製作方法に問題があるのでしょうか?
ビルダーでただ画像の挿入をしただけなんですが・・・。
改善方法がわかる方はできましたら教えていただけないでしょうか。

Aベストアンサー

ビルダーで多いのが画像のパスが絶対パスfile:///C (ドライブ名):/(フォルダ名)/ファイル名」になってる場合です パソコンの画像を呼び出してませんか 

表示されない画像を右クリック プロパティで画像のパスURLを見てください file:///C になってたらソースを書き変えてください 

忍者ツールズはビルダーのFTP転送でも転送できますね

http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F13649256BF700268CDD?opendocument

Qホームページ上にある表を更新

ホームページ上に、下の表のようなものがあったとします。

-----------------
|No| 番号 | 名前 |
-----------------
|01| 数字 | 文字 |
-----------------
|02| 数字 | 文字 |
-----------------
 ----
|送信|
 ----
01、02の”数字・文字”のところのセルには通常
何も無い空白の状態とします。
ここに任意の数字や文字をいれ
送信を押すと、掲示板のようにホームページ
に反映・更新できないものでしょうか。
教えていただきたいのですが・・・・

Aベストアンサー

利用・閲覧者限定であれば一時的なものであれば、可能でしょうが、
更新となるとファイルに書きこむ作業が必要になります。
JavaScriptにはそんな機能はありません。
CGI等を利用すれば可能です。

Qyahooの無料ホームページ公開について

ヤフーのトップページに無料ホームページがあったので、ホームページアドレスを取得して、ホームビルダー10で画像作成して、ヤフーからきたFIPサーバ名
等を入力して、ホームページビルダーから公開したはずいなのに公開されていません。ホームページビルダーはヤフーに合わないのですか?それとも私のやり方でしょうか?(ちなみに私はホームページ初心者です。よろしくお願いします。

Aベストアンサー

転送設定を確認してみてください
FTPツールで転送してみてください

最初にindex.htmlが作られてますから 自分が作成した index.htmlを転送すれば上書きされて アドレスにアクセスすれば 表示されるはずです

ブラウザの更新ボタンも押してみてくださいね!

http://www.setuyaku-city.net/biruda/file_tra/index.html

Qホームページ上での音楽再生に関する質問です。

私は現在初めてホームページ作成を行っている者です。
HTMLとJavaScriptを使ってホームページを作ろうと思い、作業を開始しました。
自宅PCをサーバとして機能させ、また音楽を再生するサイトを作りたいと思っています。

そこで
http://q.hatena.ne.jp/1179831319
こちらのサイトを参考にし、
<html>
<head>
<script type="text/javascript">
soundlist = ['1.mid', '2.mid', '3.mid'] ;
path = './midifiles/' ; // ファイルのあるディレクトリのパス

function soundPlay(n) {
var option = '"' ;
option += ' autostart = "true"' ; // 自動再生
option += ' loop = "true"' ; // ループ再生
option += ' style = "position:absolute;bottom:100%;"' ; // スタイル
document.getElementById('player').innerHTML = '<embed src="' + path + soundlist[n-1] + option + ' />' ;
document.getElementById('stopbutton').disabled = false ;
}

function soundStop() {
document.getElementById('player').innerHTML = '' ;
document.getElementById('stopbutton').disabled = true ;
}
</script>
</head>

<body>
<form>
<button type="button" onclick="soundPlay(1)">音楽1</button>
<button type="button" onclick="soundPlay(2)">音楽2</button>
<button type="button" onclick="soundPlay(3)">音楽3</button>
<button type="button" id="stopbutton" onclick="soundStop()" disabled="true">停止</button>
</form>

<div id="player"></div>
</body>
</html>

基本のコードは上記のままでホームページを作成し、ローカル環境では問題なく動作しました。
しかし、
AnHttpdを使い、No-IP.comでURLを取得し、自宅PCをサーバ化した所までは良かったのですが、
Web上でページにアクセスすると上手く音楽が再生されなくなってしまいました(その他の画像や文字の文体等は問題ありません)。
コマンドプロンプトで確認もしましたが、URLの関連付けも問題なく行われており、ページの表示自体には何の問題もありません。ただ音楽ファイルだけ再生出来なくなりました。
私としてはサーバに指定したフォルダ内にpathに指定したディレクトリを作成し、そこに音楽ファイルを入れておけば、ボタンクリック時にそのファイルが参照され、再生されるものと思っておりました。

メディアプレイヤーなどは表示したくはないので、上記のコードを参考にしていたのですがここにきて行き詰ってしまった次第です。

他にも色々なサイトを巡って調べてみましたが、恥ずかしくも原因がよくわかりませんでした。
もしかしたら既知の方からすれば、非常に簡単な問題なのかもしれませんが、私にとっては頭を悩ませる難解な問題です。

音楽ファイル一つ一つはMatlabで作成した単純な短い正弦波ですので、サイズは300KByte以下です。wavファイルだから駄目なのかもと思いもしましたが、ローカル環境では、mp3,midi,wavのいずれのファイルも再生可能でしたので、それが原因だとは思えません。

ホームページ作成言語や仕組みに関しては素人同然の私ですが、なんとか完成させたいと思っています。些細なことでも結構ですので、何か参考になりそうなことがありましたら、ご教授お願いします。

お早い回答を頂けましたら幸いです。
どなたかよろしくお願いします。

私は現在初めてホームページ作成を行っている者です。
HTMLとJavaScriptを使ってホームページを作ろうと思い、作業を開始しました。
自宅PCをサーバとして機能させ、また音楽を再生するサイトを作りたいと思っています。

そこで
http://q.hatena.ne.jp/1179831319
こちらのサイトを参考にし、
<html>
<head>
<script type="text/javascript">
soundlist = ['1.mid', '2.mid', '3.mid'] ;
path = './midifiles/' ; // ファイルのあるディレクトリのパス

function soundPlay(n) {
var option = '"' ;
option += ' ...続きを読む

Aベストアンサー

はじめまして。

先ずはログファイル見たほうがいいと思います。音楽ファイルが再生できればアクセスログに残り、そうでない現状ではエラーが上がっているはずです。そのエラーの内容から、何かしらの設定のミスを推測していく…、という流れです。

ログに「404 Not Found」が上がっているに1票投じます。

Webサーバーからファイルが見えないので再生ができないんでしょう。
ドキュメントルートの設定があってないか、MIMEの設定の問題かと。
MIMEの設定は参考URLを読んで下さい。

参考URL:http://www012.upp.so-net.ne.jp/cool_r32/myserver/5-7.html


人気Q&Aランキング