文字の上にカーソルを合わせると、文字の色が変わる方法がわかりません。
これはjavaスクプリトでできるんですか?
またできれば、下記サイトのような感じで、作ってもみたいのですが。
http://www.apa-net.com/withj/

ご存じの方、いらっしゃいましたらぜひ教えてください。

A 回答 (2件)

質問にあるサイトでは、スタイルシートで指定をしています。



<style type="text/css">
<!--
A:hover {background-color: #bfdfff;}
-->
</style>

という指定で、リンクにマウスが載ったときのバックグラウンドの色指定になります。
    • good
    • 0
この回答へのお礼

できました。ありがとうございました。ちょっと感動!?しました。早々ホームページに使ってみました。よかったら見てみてください。
楽しい裏技・裏情報!
http://homepage1.nifty.com/urawaza/

お礼日時:2002/02/12 15:16

参考になれば幸いです



参考URL:http://www.oitaweb.ne.jp/hp/tatsuya/java/css_a2. …
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
URL参考にさせていただきます。
早々ホームページに使ってみました。よかったら見てみてください。
楽しい裏技・裏情報!
http://homepage1.nifty.com/urawaza/

お礼日時:2002/02/12 15:18

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

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

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

Qツールバーがカーソルを合わせないと出ない

サイトを見ている際、上部にツールバーが出ていたのですが、今ではそこにカーソルを合わせないと出なくなってしまいました。
下部のツールバー?も以前より小さくなってしまいました。
元に戻したいのですが、どうしたらよいでしょう?

Aベストアンサー

F11キーを押してください。

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画面立ち上げ時 カーソルが出ない

windowas meのノートを使っていました。
画面を立ち上げたら、画面の絵や文字が拡大されていて、いくら動かしてもカーソルが現れません。
今は違うパソコンからアクセスしてますが、どうしたらよいのでしょうか?
教えてください。お願いします。

Aベストアンサー

多分、レジストリトラブルでしょう!

キーボードよりウインドウズキーを押し、
方向キー(↑)で「ファイル名を指定して実行」で
エンター、scanregw /restore(scanregwの後
ワンスペース)と入力しエンター、
「レジストリの復元」画面で
方向キーで正常だった最新の日でエンター
これで再起動がかかります

修復出来ると思いますが?

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

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

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

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

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

Aベストアンサー

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

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


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

Qツールバーにカーソルをポイントしてもヒントが出ない

エクセルの2000を使っていますが、標準ツールバーにある「上書き保存」のマークや「切り取り」などのマークの上にカーソルを置いてもヒントが出ません。
普通だったらどんなことが出来るのか、マウスポインタの下に文字が出ますよね?
すみませんが、ご回答よろしくお願いします<(_ _)>

Aベストアンサー

ツール-ユーザー設定-オプションタブ
ツールバーにボタン名を表示する のチェックを
オンにしてみてください。

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画像にカーソルをおくと左上に出てくるものを出ないようにするタグ教えてください!

よく画像にカーソルをおくと、
画像の左上に小さくでてくるもの
(クリックすると、画像を保存できたり、
印刷出来たり、メールで添付できる4つのものです)
を、出てこなくしたいのですが
その方法(タグ等)教えて頂けますか?
宜しくお願いします。

Aベストアンサー

1ページ分の画像のイメージツールバーを非表示する場合。
<HEAD>と</HEAD>の間に入れてください。
<meta http-equiv="imagetoolbar" content="no">

imgタグに直接入力する場合は
<img src="画像のファイル名" alt="画像の説明" width="横幅" height="縦長さ" galleryimg="no">

Qリンクにカーソルを合わせると指定した部分に文字を表示

リンクにカーソルを合わせると、ステータスバー(?)やテキストボックスに
文字を表示させる方法はすぐ見つかるんですが、
指定した部分(枠の中とか)に1文字ずつ指定した文字を表示させるには
どうすればいいのでしょうか?
あるサイトで見つけたので、できないことはないと思うんですが・・・

わかりにくいかもしれませんが、どなたかお願いします。

Aベストアンサー

JavaScriptを使っています。

記述の仕方は、いろいろありますが、こちらのサイトの説明が分かりやすいのではと思います。
http://www.kit.hi-ho.ne.jp/t-sonoda/javascript.html

ただし、厳密に行わないとエラーになりますよ。
htmlタグ打ちに慣れていない方だと、難しいと思います。

挑戦してみてください。

参考URL:http://www.kit.hi-ho.ne.jp/t-sonoda/javascript.html

Qカーソルを近づけても表示が出ない

Microsoft Internet Explorerや、タスクバーのクイック起動アイコンにカーソルを近づけると、それが何なのか、黄色い帯の中に黒い字で表示が出ますが、Word2003, Excel2003, Outlook2003では、近づけても何も出ません。どうしたら、インターネットやタスクバーのように、表示が出るように設定できますか?

Aベストアンサー

WordやExcelのツールバーのボタンをポイントしたときに表示される吹き出しのことですね。
ユーザー設定のオプションで、「ツールバーにボタン名を表示する」のチェックが外れていると思います。チェックを付けてください。

Qマウスカーソルを画像や文字に重ねるとカーソルのすぐ右下に画像を表示する

マウスカーソルを画像や文字に重ねるとカーソルのすぐ右下に画像を表示するようにしたいのですが、どのようなHTMLタグやjavascriptを使えばいいですか?

Aベストアンサー

4つ上の質問と似ていますね。
 http://oshiete1.goo.ne.jp/qa4606506.html
そこで質問されているライブラリを利用すれば、比較的簡単かと…

残念ながら、ライブラリのHPがつながりませんが、サンプルページが残っていましたので
 http://boxover.swazz.org/example.html​


人気Q&Aランキング