ロールオーバーで指定の位置にテキストを配置

質問

画像のロールオーバーメニューで、マウスオーバー時に指定の位置にテキストが現れるようなメニューを作りたいのですが、そのようなjsだったり、jqueryなどありますでしょうか？

添付の画像のような感じで、メニュー1、2、3それぞれにマウスオーバーすると、メニュー1の横に必ずテキストが現れるようにしたいです。
もちろん、改行などもできるようにしたいです。

どうしたら良いでしょう？

回答No.2

noris02 · ベストアンサー

ごめんなさい スペルミス。
<li onmouseover="popup(1)" onmouseout="popup(0)">menu1</li>
・・・ 部分 の popuup(1),popuup(2),popuup(3)を
popup(1)、popup(2)、popup(3)にそれぞれ修正。

[html]
<div class="wrap">
<div class="left">
<li onmouseover="popup(1)" onmouseout="popup(0)">menu1</li>
<li onmouseover="popup(2)" onmouseout="popup(0)">menu2</li>
<li onmouseover="popup(3)" onmouseout="popup(0)">menu3</li>
</div>
<div class="right" id="menu_text">
この位置に必ず<br>テキストが現れます。
</div>
</div>

追記
menu を増やす場合は,
var array_text=new Array(4); の 4の数を増やして
array_text[4]="menu4"; を追記
htmlも
<li onmouseover="popup(4)" onmouseout="popup(0)">menu4</li> と追記

お礼

ありがとうございます。

なんとか解決できました♪

回答No.1

noris02

jqueryでもありますが、普通に組んだほうがはやそう。
エフェクトを加えないならば 下記参照。
[javascript]
function popup(key){
var array_text=new Array(4);
array_text[0]="この位置に必ず<br>テキストが現れます。";
array_text[1]="menu1のてきすと";
array_text[2]="menu2のてきすと";
array_text[3]="menu3のてきすと";
document.getElementById("menu_text").innerHTML=array_text[key];
}

[css]
.wrap{clear:both;width:500px;border:none;margin:0;padding:0;}
.left{float:left;width:244px;display:block;}
.left li{list-style:none;}
.right{float:right;width:244px;display:block;}

[html]
<div class="wrap">
<div class="left">
<li onmoseover="popuup(1)" onmouseout="popup(0)">menu1</li>
<li onmoseover="popuup(2)" onmouseout="popup(0)">menu2</li>
<li onmoseover="popuup(3)" onmouseout="popup(0)">menu3</li>
</div>
<div class="right" id="menu_text">
この位置に必ず<br>テキストが現れます。
</div>
</div>