リンク用のバナーを用意しておき、その上にマウスポインタが乗ると、
別の位置に、管理者名と説明文を表示できるようにしたいのですが、
どうすればよいでしょうか?
それぞれに背景画像をつけたり、装飾もしたいため、出来れば管理者名と説明文は、独立して表示させたいのですが、可能でしょうか?

わかりにくいですが、例としては、以下のようなレイアウトのものを作りたいと思っています。

 管理者名表示欄   説明文表示欄

バナー  バナー  バナー  バナー
バナー  バナー  バナー  バナー
バナー  バナー  バナー  バナー

A 回答 (1件)

<HTML>


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
mst = new Array(3);
mst[0] = "";
mst[1] = "管理者1";
mst[3] = "管理者2";

str = new Array(3);
str[0] = "";
str[1] = "説明1";
str[3] = "説明2";

function setMsg(id) {
document.all.mst.innerHTML = mst[id];
document.all.str.innerHTML = str[id];
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SPAN ID="mst"></SPAN><BR>
<SPAN ID="str"></SPAN><BR>
<A HREF="xxx.html"
onMouseOver="setMsg(1)"
onMouseOut="setMsg(0)"><IMG SRC="banner.gif" BORDER=0></A>
</BODY>
</HTML>

こんな感じで同どうでしょう?
マウスをはずしたときに空文字を表示するために配列の0番目は""としています。
    • good
    • 0
この回答へのお礼

丁寧な回答ありがとうございます!
さっそく参考にさせてもらいます。

お礼日時:2001/08/07 15:27

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

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

Qクリックすると表示されていた説明文が非表示になる設定

フォームの作成の件で不明な点があるのでどなたかご指導お願いします。

やりたいことは、
テキストフィールドにページ読み込み時は説明文を表示しておいて、
そのフィールドがクリックされると説明文が非表示になり、入力が出来る。
という事をやりたいんですが、

ある雑誌に<textarea>~</textarea>でのやり方が書いてあったのですが、
<input~>でやろうと思ったら出来ませんでした。下のタグでやってみました。
最初に表示しておきたい説明文は「※半角で入力」です。

<input name="message" type="text" class="textbox"id="message" onFocus="if(this.value=='※半角で入力')this.value='';"onBlur="if(this.value=='')this.value='※半角で入力';" value="※半角で入力" size="20" maxlength="10">

宜しくお願いします。

Aベストアンサー

こんにちは。

タグをコピペしてやってみましたが
ちゃんとできましたよ。ちなみに当方は、
WindowsNT4.0 + IE6.0
WindowsNT4.0 + Netscape7.1
です。
ただ、name="message" id="message" と同じなのが少しきになります。
他のフィールドに同じ name や id が存在していません?

Qランダム表示画像へ説明文を表示したい。

ランダムな画像表示に対しそれぞれへの個別リンク設定をし、
個々の画像にカーソルを重ねた時に説明文を表示するようにしようと思っています。

画像とリンクはうまくいっているのですが説明文が表示されません

記述は下記のようにしました。

間違っているところを訂正していただけないでしょうか、
お願いします。



<script language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.marucho-powertec.com/contents/powercool.html";
jmp[1] = "http://www.marucho.co.jp/mbs/cnts/option1/?c=seakayak";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "image/k_imgae/index/event/h23powercool.gif","遮熱塗料パワークール";
img[1] = "image/k_imgae/index/event/h23.08.18.jpg","シーカヤックガイドツアー";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</script>

ランダムな画像表示に対しそれぞれへの個別リンク設定をし、
個々の画像にカーソルを重ねた時に説明文を表示するようにしようと思っています。

画像とリンクはうまくいっているのですが説明文が表示されません

記述は下記のようにしました。

間違っているところを訂正していただけないでしょうか、
お願いします。



<script language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.marucho-power...続きを読む

Aベストアンサー

>画像にカーソルを重ねた時に説明文を表示するようにしようと思っています
どのようにして表示する予定でしょうか?
画像のaltに設定するのでもいのでしょうか?(表示されないブラウザもあるけど)

document.writeで書き出すのはあまり好きではありませんが…
とりあえず、こんなのでは?

img[0] = ["image/k_imgae/index/event/h23powercool.gif","遮熱塗料パワークール"];
img[1] = ["image/k_imgae/index/event/h23.08.18.jpg","シーカヤックガイドツアー"];


document.write("<img src='"+img[n][0]+"' alt='"+img[n][1]+"' border='0'>");


スクリプトでロールオーバーなどを設定したいのであれば、別の方法になります。

Qonclickで説明文、画像を同時に表示したい

クリックすると、説明文(リンクを含む)、画像を同時に表示させることができるjavascriptを知りたいです。
参考になるホームページや、javascriptを教えてもらえれば嬉しいです。

よろしくお願いします。

Aベストアンサー

<SCRIPT type="text/javascript"><!--
function DisTest(i){
if(document.getElementById){
if(Test02.style.display == 'none'){
document.getElementById(i).style.display="inline";
}
else{
document.getElementById(i).style.display="none";
}
}
else{
alert('DOM 対応のブラウザをご利用下さい。');
}
}
--></SCRIPT>
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
<SPAN onclick="DisTest('Test02')" style="cursor: hand">
test01</SPAN><BR>

<DIV id="Test02" style="display: none">
<A href="#">test02</A>
<IMG src="test02.gif">
</DIV>

でいかがですか?

<SCRIPT type="text/javascript"><!--
function DisTest(i){
if(document.getElementById){
if(Test02.style.display == 'none'){
document.getElementById(i).style.display="inline";
}
else{
document.getElementById(i).style.display="none";
}
}
else{
alert('DOM 対応のブラウザをご利用下さい。');
}
}
--></SCRIPT>
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
<SPAN onclick="DisTest('Test02')" style="cursor: hand">
...続きを読む

Qキーワードをクリックすると説明文をする表示方法

最近「キーワード」をマウスでクリックしたり、乗せたりするとキーワードの説明が、キーワード付近に表示されるサイトを見ます。
その実装方法が分からずに困っています。

下記の流れで実現するのかと考えています。

(1)キーワードの説明分をHTMLの最後に列記してCSSのdisplay:noneで非表示にする。
(2)クリックされた「キーワード」のウィンドウに対するマウス座標をJavascriptで取得する。
(3)座標を元に「キーワード」に対応する説明分をCSSで絶対配置してdisplay: blockで表示する

特に(2)の方法が分からずにいます。

上記の流れでよいのかも自信がないです。どのような方法でも実現できれば大変うれしいです。手がかりだけでも教えていただければと考えています。

よろしくお願いします。

Aベストアンサー

大雑把に書いたもので、余分なところも結構ありますが、こんなのはどうですか?
positionのtop(getPos(Event,obj)[0])、left(getPos(Event,obj)[1])の位置を返す予定です。
objは表示させたい要素です。
Eventはイベントです。
IE6,Firefox1.5,Opera8,9.1には対応すると思いますよ。

function getPos(Event,obj){
var CSS = document.compatMode == 'CSS1Compat'
if(CSS){ var BElem = document.documentElement }
else { var BElem = document.body }
if(window.innerHeight != undefined){
var EffectiveWidth = window.innerWidth //有効範囲幅
var EffectiveHeight = window.innerHeight //有効範囲高さ
}else{
var EffectiveWidth = BElem.clientWidth //有効範囲幅
var EffectiveHeight = BElem.clientHeight //有効範囲高さ
}
var EMouseX = Event.clientX //有効範囲上のマウス座標X
var EMouseY = Event.clientY //有効範囲上のマウス座標Y
var ScrollLeft = BElem.scrollLeft //横スクロール量
var ScrollTop = BElem.scrollTop //縦スクロール量
if(Event.pageX != undefined){
var MouseX = Event.pageX //横スクロール量込みマウス座標X
var MouseY = Event.pageY //横スクロール量込みマウス座標X
}else{
var MouseX = EMouseX + ScrollLeft //横スクロール量込みマウス座標X
var MouseY = EMouseY + ScrollTop //横スクロール量込みマウス座標Y
}
var RMenuWidth = obj.clientWidth //RMenu幅
var RMenuHeight = obj.clientHeight //RMenu高さ
var RMenuRight = EMouseX + RMenuWidth
var RMenuBottom = EMouseY + RMenuHeight
if(EffectiveHeight < RMenuBottom){ var Top = MouseY - RMenuHeight }
else{ var Top = MouseY }
if(EffectiveWidth < RMenuRight){ var Left = MouseX - RMenuWidth }
else{ Left = MouseX }
return new Array(Top,Left)
}

大雑把な流れですがご参考になれば・・・

大雑把に書いたもので、余分なところも結構ありますが、こんなのはどうですか?
positionのtop(getPos(Event,obj)[0])、left(getPos(Event,obj)[1])の位置を返す予定です。
objは表示させたい要素です。
Eventはイベントです。
IE6,Firefox1.5,Opera8,9.1には対応すると思いますよ。

function getPos(Event,obj){
var CSS = document.compatMode == 'CSS1Compat'
if(CSS){ var BElem = document.documentElement }
else { var BElem = document.body }
if(window.innerHeight != undefine...続きを読む

Qオンマウスで画像と説明文を表示する方法

画像ではなく文字のリンク先にオンマウスで画像と説明文を
表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。

Aベストアンサー

<html>
<body>
<img src="" id="a1"><hr>
<div id="a2"></div><hr>
<a href="#" onMouseOver="chg('img0.jpg','なんと、もうしましょうか')">aaaa</a>
<a href="#" onMouseOver="chg('img1.jpg','あぁ~入院かぁ~')">bbbb</a>
<a href="#" onMouseOver="chg('img2.jpg','気が重いなぁ~')">cccc</a>

<script>
function chg(i,m){
document.getElementById('a1').src=i;
document.getElementById('a2').innerHTML=m;
}
</script>
</body>
</html>


人気Q&Aランキング

おすすめ情報