テキストにマウスが乗ると、別の場所(フレーム以外)
にテキストを表示させたいのですがどう書けばいいんですか?
よく、洒落たサイトでリンクにマウス乗せると、説明が別の場所に出るじゃないですか
アレです

A 回答 (3件)

すみません。


アドレスを書いてませんでした。

http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ …

参考URL:http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ …
    • good
    • 0
この回答へのお礼

これはなかなか初心者にはありがたいですね
けっこうおもしろいソースがありました^^
ありがとうございます

お礼日時:2005/01/29 16:48

 同じよう事を使用と思い検索内容にこんなのが有りました。



 私が作製内容は
http://chiba.cool.ne.jp/yatimata_1/
 で使用しています

参考URL:http://www.red.oit-net.jp/tatsuya/java/setumei2. …
    • good
    • 0
この回答へのお礼

犬がわかっても人間にわからないことも多いと思いましたが^^かなり親切に教えてくれてそうです
ありがとうございました

お礼日時:2005/01/29 23:26

こちらのサイトの「5.リンク部分にマウスを持っていくとメッセージが出ます。

」が参考になると思います。
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

Q離れた場所にマウスオーバーで画像を変えたい。

宜しくお願いします。

色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。

サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。

1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。

配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。

BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。


ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。

<div id="container">ここに画像を表示させたいです!</div>

<div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div>
<div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div>
<div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div>


どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。

どうぞ、宜しくお願いいたします。m(_ _)m

宜しくお願いします。

色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。

サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。

1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。

配置はそれぞれ記載されている感じで、#...続きを読む

Aベストアンサー

今日は忙しいので、ごく簡単に・・
★IE8以降対応ですが、IE7にも対応させるためには、あらかじめ表示画像をHTMLに記述しておいて、display:noneで隠して、:hoverでdisplay:blockにしてください。
★ボタンを画像にする場合は文字を画像に置き換える。背景にする場合はa:spanを、visibilty:hiddenで消す
★IE6は考慮していません。IE6は兄弟セレクタが使えないので、classセレクタで指定すること

HTML4.01strict+CSS2.1(ウェブ標準)です。HTML5にする場合はclass名をそのまま要素とすること。
<div class="header"> → <header>

 class名やidは文書構造を補完する目的でつけましょう。HTMLがシンプルだとスタイルシートもわかりやすくなります。
 div.section div.nav ul li a{}は、「本文(section)中のナビゲーションリストのa要素は・・・・」と読み解けるはず。いちいちHTMLと読み合わせをする必要はありません。HTMLを見なくてもスタイルシートが書いたり直したり出来る。
 そしてなによりも、HTMLは文書構造しか記述してないので、どのようにもデザインしなおせます。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済み。
 CSSは、ご存知と言うことですので、説明は不要だと思います。
[注意]タブは_に置換してあります。戻してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:80%;margin:0 auto;}
p{line-height:1.6em;text-indent:1em;margin:0 1em;}
div.section div.nav{
width:420px;height:200px;
margin:0 auto 80px;
background-color:rgb(255,255,200);
position:relative;
}
div.section div.nav ul,div.section div.navul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.section div.nav ul li{
_width:100px;
_height:40px;line-height:40px;
_position:absolute;
_left:10px;bottom:-50px;
_background-color:gray;
}
div.section div.nav ul li+li{left:160px;}
div.section div.nav ul li+li+li{left:300px;}
div.section div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
div.section div.nav ul li a:hover:after{
_content:url();
_position:absolute;
_left:0px;top:-190px;
_width:160px;height:120px;
_background-color:red;
}
div.section div.nav ul li+li a:hover:after{
_content:url();
_left:-50px;top:-90px;
_width:130px;height:60px;
_background-color:rgb(220,180,60);
}
div.section div.nav ul li+li+li a:hover:after{
_content:url();
_left:-50px;top:-190px;
_width:160px;height:160px;
_background-color:green;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
_</div>
_<div class="section">
__<h2>本文</h2>
__<p>画像を表示したい部分と、ナビゲーションが別のブロックと言うことは文書構造上おかしいので、以下のサンプルでは同じブロックにマークアップしてあります。</p>
__<div class="nav">
___<ul>
____<li><a href="prodact1.html"><span>製品1</span></a></li>
____<li><a href="prodact2.html"><span>製品2</span></a></li>
____<li><a href="prodact3.html"><span>製品3</span></a></li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>

今日は忙しいので、ごく簡単に・・
★IE8以降対応ですが、IE7にも対応させるためには、あらかじめ表示画像をHTMLに記述しておいて、display:noneで隠して、:hoverでdisplay:blockにしてください。
★ボタンを画像にする場合は文字を画像に置き換える。背景にする場合はa:spanを、visibilty:hiddenで消す
★IE6は考慮していません。IE6は兄弟セレクタが使えないので、classセレクタで指定すること

HTML4.01strict+CSS2.1(ウェブ標準)です。HTML5にする場合はclass名をそのまま要素とすること。
<div class="header">...続きを読む

Qオンマウスで画像を別の場所に表示する

過去ログで似たようなのがあったのですが、
全然わからなかったので、質問しました。
文字オンマウスで、画像を別の場所に表示したいのですが・・
(java~を使わなくてもよいやり方が知りたいです。
java~は使ったことがない初心者ですので。)

ちなみに、画像オンマウスで文字を別の場所に表示するのは、
↓このやり方(html)でできたんですが・・・


<span ID="msg">ここに表示される</span>

<a href="ページURL"onMouseOver="msg.innerHTML='表示される文字'"onMouseOut="msg.innerHTML=''"><img src="画像URL" border="0"></a>

Aベストアンサー

<!-- ↓ここに表示される -->
<img src="もとの画像URL" border="0" ID="msg2">
<!-- ↑ここに表示される -->

<a href="ページURL" onMouseOver="msg2.src='表示したい画像URL'" onMouseOut="msg2.src='もとの画像URL'">
  <img src="画像URL" border="0">
</a>


こんな感じで。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q複数の画像を連動してロールオーバーさせたいのですが

宜しくお願い致します。
現在WEBショップを運営しているのですが、
「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、
現在、それぞれの画像は個別にはロールオーバーするのですが、
3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか?
(3つの画像のリンク先は全て同じです)

どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。
宜しくお願い致します。


<td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p>

<p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>

宜しくお願い致します。
現在WEBショップを運営しているのですが、
「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、
現在、それぞれの画像は個別にはロールオーバーするのですが、
3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか?
(3つの画像のリンク先は全て同じです)

どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。
宜しくお願い致します。


<td><p><A href="リンク先(1...続きを読む

Aベストアンサー

こんにちは。

ソースに手を加えるならそれぞれのimgにid(a・b・c)をつけて

<p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="a" /></A></p>
<p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="b" /></A></p>
<p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="c" /></A></p>

とすれば実現できますよ。

こんにちは。

ソースに手を加えるならそれぞれのimgにid(a・b・c)をつけて

<p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="a" /></A></p>
<p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_...続きを読む

Qテキストにマウスオーバーで画像を変える方法

テキストにマウスオーバーで画像を変える方法

左のナビの例えば、ぶどうのテキストにマウスオーバーした時に、それに連動して右のぶどうの画像のコントラストを高くすることはjava scriptではできるのでしょうか?

もちろん画像のコントラストを高めた画像は用意しますので、要はcssのロールオーバーみたいなことをテキストと連動して行いたいです。

ご回答をどうかよろしくお願いします。

Aベストアンサー

サンプルをつくりました。
ソースなどシンプルなので解ると思います。

http://flava.whoa.jp/tmp/over_write_image/
http://flava.whoa.jp/tmp/over_write_image.zip (このサンプルソースと画像データ)

以下、サンプルソースです
====================================== 

<html>
<head>
<title>flip image sample - Javascript</title>

</head>
<body>

<p><img src="image/a.jpg" alt="grape" name="img_a"></p>
<p><img src="image/b.jpg" alt="apple" name="img_b"></p>
<p><img src="image/c.jpg" alt="orange" name="img_c"></p>

<p>
<a href="" onMouseover="document.img_a.src='image/a_ov.jpg'" onMouseout="document.img_a.src='image/a.jpg'">image A</a><br />
<a href="" onMouseover="document.img_b.src='image/b_ov.jpg'" onMouseout="document.img_b.src='image/b.jpg'">image B</a><br />
<a href="" onMouseover="document.img_c.src='image/c_ov.jpg'" onMouseout="document.img_c.src='image/c.jpg'">image C</a><br />
</p>

</body>
</html>

サンプルをつくりました。
ソースなどシンプルなので解ると思います。

http://flava.whoa.jp/tmp/over_write_image/
http://flava.whoa.jp/tmp/over_write_image.zip (このサンプルソースと画像データ)

以下、サンプルソースです
====================================== 

<html>
<head>
<title>flip image sample - Javascript</title>

</head>
<body>

<p><img src="image/a.jpg" alt="grape" name="img_a"></p>
<p><img src="image/b.jpg" alt="apple" name="img_b"></p>
<p><img src="image/c.jpg" alt="...続きを読む

QCSSで画像とテキストのポップアップをマウスオーバーで実装するには?

CSSを使ったポップアップで苦戦しています。マウスオーバーで画像を表示したりやテキストボックスを表示するCSSは出来るのですが、画像とテキスト両方を表示する方法がわかりません。やはりjavascriptを使用したlightboxなどを使わないと難しいのでしょうか?表示する内容は映画の写真とその関連情報(監督や配給会社など)で写真1枚、テキスト10行くらいをコンパクトにまとめる形です。フラッシュは使用しません。何卒よろしくお願いいたします。

Aベストアンサー

http://homepage3.nifty.com/kmyh/gaku/hyouzi.html

このページの内容がわかりやすいかもしれません。

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

Qマウスオーバーで文字を表示したい

ブログ内の全ての画像に マウスを重ねた時だけ

同じ文字(例”画像をダウンロード・・・・”)を表示したいのですが

どの様に記述すれば可能なのか ご教授お願いいたします。

Aベストアンサー

あまり必要ないと思いますが・・・リンク自体も。
ブラウザのコンテキストメニューに「画像に名前をつけて保存」があるはずなので、画像がほしい人は画像を右クリックして表示されるコンテキストメニューから選択してもらえばよいだけです。
 titleがワンテンポ遅れて表示されるのは、ユーザビリティの観点から、タイトルが必要ならマウスを乗せたままにしておくと、はじめて表示されるほうがやさしいからです。いきなり出てきたら周囲の何かが隠される。

 それをすぐ表示させるのは、おせっかいすぎるような気がします。--できますが---

 大きな画像へリンクしている場合は、いずれにしてもHTMLソースを書き加えなきゃならない。
 <a href="*****/abc.jpg" title="大きな画像へ"><img ***** alt="***"></a>
 


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング