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

この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と関連する良く見られている質問

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ホームページ上にある表を更新

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

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

Aベストアンサー

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

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ホームページ上での計算について(JavaScript)

複数の計算式があります。
それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。
CGIではなく、HTMLの中にJavaScriptを埋め込んで作りたいと思っています。

スクリプトの意味はよくわからないまま、とりあえず以下のソースを埋め込んでみました。

HEAD部分に

<SCRIPT LANGUAGE="JavaScript">
function calc(f){
f.z.value=eval(f.x.value)+eval(f.y.value);
}
</SCRIPT>

BODY部分に

<FORM NAME="form1">
<INPUT TYPE="text" SIZE=10 NAME="x">+
<INPUT TYPE="text" SIZE=10 NAME="y">=
<INPUT TYPE="text" SIZE=10 NAME="z"><BR>
<INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR>
</FORM>

これは動きました。
でも、計算式が一つだけです。複数の式を計算させたいのですが……。
同じ感じでコピーしてxyzの文字をかえたりと幼稚な試行錯誤をしてみましたが動きませんでした。
二つ以上の計算式を埋め込むには、どんなスクリプトにすればいいのでしょうか。
たとえば、
「別の空欄に入れたaという値とbという値をかけて、先ほどのxという値を2倍したものを引き、さらに100を足す」
という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。
もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。
よろしくお願い致します。

複数の計算式があります。
それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。
CGIではなく、HTMLの中にJavaScriptを埋め込んで作りたいと思っています。

スクリプトの意味はよくわからないまま、とりあえず以下のソースを埋め込んでみました。

HEAD部分に

<SCRIPT LANGUAGE="JavaScript">
function calc(f){
f.z.value=eval(f.x.value)+eval(f.y.value);
}
</SCRIPT>

BODY部分に

<FORM NAME="form1">
<INPUT TYPE="text" S...続きを読む

Aベストアンサー

ちょっと文意が読み取れていないかもしれないんですが
これでどうでしょうか?

<html>
<head><title></title>
<script language="javascript">
<!--//
function calc(f){
x = Number(f.x.value);
y = Number(f.y.value);
z = x + y;
f.z.value = z;

a = Number(f.a.value);
b = Number(f.b.value);
c = a * b - x * 2 + 100;
f.c.value = c;
}
//-->
</script>
</head>
<body>
<FORM NAME="form1">
a = <INPUT TYPE="text" SIZE=10 NAME="a"><br>
b = <INPUT TYPE="text" SIZE=10 NAME="b"><br>
x = <INPUT TYPE="text" SIZE=10 NAME="x"><br>
y = <INPUT TYPE="text" SIZE=10 NAME="y"><br>
<INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR>
<hr>
z = x + y<br>
z = <INPUT TYPE="text" SIZE=10 NAME="z"><BR>
c = a * b - x * 2 + 100<br>
c = <INPUT TYPE="text" SIZE=10 NAME="c"><br>
</FORM>
</body>
</html>

>このfとかいうのの意味もよくわからなかったんですが…

端的に言うと「f」というのは「this.form」のことです。
(つまりform1のことです)
calcを呼び出す側では「onClick="calc(this.form)"」というふうに、calcの引数に「this.form」を指定していますね。
それからcalc関数の定義では、「function calc(f)」と書いています。
そのため、calc関数の内部では、「this.form」を「f」という記号で表現しても良いことになっています。
つまり、
「function calc(fff)」と記述すれば、
「fff.z.value」と書けるわけです。
もちろん
<FORM NAME="form1">のNAMEパラメータで指定したものを使って
「form1.z.value」でもOKです。

ちょっと文意が読み取れていないかもしれないんですが
これでどうでしょうか?

<html>
<head><title></title>
<script language="javascript">
<!--//
function calc(f){
x = Number(f.x.value);
y = Number(f.y.value);
z = x + y;
f.z.value = z;

a = Number(f.a.value);
b = Number(f.b.value);
c = a * b - x * 2 + 100;
f.c.value = c;
}
//-->
</script>
</head>
<body>
<FORM NAME="form1">
a = <INPUT TYPE="text" SIZE=10 NAME="a"><br>
...続きを読む

Qホームページ上で、必要事項(名前、メールアドレス、など)を入力してもら

ホームページ上で、必要事項(名前、メールアドレス、など)を入力してもらって、すべて入力されたら、別のページにあるファイルをダウンロードできるようにしたいです。

JAVAなど全く初心者な者で、すみません。
ダウンロードページに行って、ダウンロードクリックされたら、前画面のメアドと名前を管理者へ送信も同時にしたいです。
よろしくお願いします。

Aベストアンサー

項目を移動するとき{TAB}キーは、スクリプトを書かないと有効じゃないんですか?
==>
それは、HTMLの記述(tabindex属性)だけでいけます。
<input type="text" tabindex="1">
<input type="text" tabindex="2">
みたいに

超初心者にはエラーのチェック方法もわかりません。
==>
エラーチェックというより、妥当なものかどうかを判定するのですが、
奥が深いです。javascriptでもやってもいんちきされる事があるので
サーバー側でも同じことやる必要がありますが。

名前等パターンの無いものは空白かどうか、長すぎないかどうかをチェックするぐらい。
メルアドとか日付、時間、電話番号、郵便番号みたいな文字列にパターンの
あるものは、正規表現というのを使って、パターンにマッチしてるかどうか
チェックします。(詳しくは自分で調べましょう)
住所の妥当性チェックや正規化は超超困難です。
普通は、県・市・番地・屋号 を別の項目にしちゃいます。
あと、全角・半角のチェックとか、英大文字・小文字のチェックとか
必用に応じて、これもたいていは、正規表現でチェックします。

変なスクリプトコードとかHTMLタグが埋め込まれないかは、サーバー側で
やります。サーバー側で容易にエスケープできます。

項目を移動するとき{TAB}キーは、スクリプトを書かないと有効じゃないんですか?
==>
それは、HTMLの記述(tabindex属性)だけでいけます。
<input type="text" tabindex="1">
<input type="text" tabindex="2">
みたいに

超初心者にはエラーのチェック方法もわかりません。
==>
エラーチェックというより、妥当なものかどうかを判定するのですが、
奥が深いです。javascriptでもやってもいんちきされる事があるので
サーバー側でも同じことやる必要がありますが。

名前等パターンの無いものは空白かど...続きを読む


人気Q&Aランキング

おすすめ情報