ロールオーバーの動作について

解決済

質問者：dcx147
質問日時：2008/11/14 11:15
回答数：3件

なんと表現すればいいものか悩んだのですが下記のような
感じで画像のロールオーバーで表示が変わるものを探しています。

　　A
1　2　3
　　T

※A,1,2,3は画像です。
Aには最初に表示される画像があり1,2,3にマウスを合わせると
Aの箇所に拡大画像が表示されロールアウトするとAは最初に
表示されていた画像に戻ります。

同時にロールオーバーするとTの箇所にそれぞれ任意のテキストを
表示させたいのですがどのようにすればいいものか全くわからない
状態です。

無知なものでサンプルがないものかと探してみたのですが探し方が
悪いものかなかなか見つかりませんでした・・・
詳しい方やサンプル等ご存知の方がおりましたら是非ご教授
お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/11/14 16:09

<html>

<div>
<div id="v">
<img src="イメージマップを張っている画像" alt="イメージマップ" width="300" height="300" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="107,330,127,353" href="#" alt="説明0" id="m0">
<area shape="rect" coords="165,307,183,322" href="#" alt="説明1" id="m1">
<area shape="rect" coords="276,267,294,284" href="#" alt="説明2" id="m2">
<area shape="rect" coords="168,264,190,282" href="#" alt="説明3" id="m3">
<area shape="rect" coords="194,229,214,253" href="#" alt="説明4" id="m4">
<area shape="rect" coords="164,159,189,177" href="#" alt="説明5" id="m5">
<area shape="rect" coords="149,85,171,107" href="#" alt="説明6" id="m6">
<area shape="rect" coords="118,83,142,101" href="#" alt="説明7" id="m7">
<area shape="rect" coords="70,96,100,117" href="#" alt="説明8" id="m8">
</map>
</div>
<a href="url0" id="bigurl">
<img src="切り替わる部分に最初に表示する画像" alt="最初" width="280" height="280" id="big">
</a>
</div>
<div id="mess"></div>

<script>
document.getElementById('v').onmouseover = function(){
var obj = event.srcElement;
var imgname;
if(obj.tagName != 'AREA' ) {
imgname = '切り替わる部分に最初に表示する画像';
document.getElementById('big').alt = imgname;
document.getElementById('big').src = imgname;
document.getElementById('mess').innerHTML='あ～';
return;
}
var n=obj.id?obj.id.match(/^m(\d+)$/)[1]-0:'';

imgname = './img/'+n+'.gif';
document.getElementById('big').alt = imgname;
document.getElementById('big').src = imgname;
document.getElementById('mess').innerHTML=obj.alt;

}
document.getElementById('v').onclick = function(){
return false;
}
</script>

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2008/11/14 13:48

「javascript＋ロールオーバー」で検索すればいくらでもサンプルはあるはずです。

通常のものは、1、2、3にマウスを合わせるとその部分が変化するのに対して、ご質問のものは、A、Tの部分を変化させるところが違うだけでは？

A、T部にidをふっておいて、document.getElementByIdで得られるオブジェクトのプロパティを変化させればよいと思われますが？

- 0
- 件

通報する

No.1

回答者： _pipi_
回答日時：2008/11/14 11:30

余計な機能付き。

<html>
<body>
<div>
<div id="v">
<a href="url0"><img src="./img/0.gif" width="90" height="60" alt="menu0" border="0"></a>
<a href="url1"><img src="./img/1.gif" width="90" height="60" alt="menu1" border="0"></a>
<a href="url2"><img src="./img/2.gif" width="90" height="60" alt="menu2" border="0"></a>
<a href="url3"><img src="./img/3.gif" width="90" height="60" alt="menu3" border="0"></a>
<a href="url4"><img src="./img/4.gif" width="90" height="60" alt="menu4" border="0"></a>
<a href="url5"><img src="./img/5.gif" width="90" height="60" alt="menu5" border="0"></a>
</div>
<a href="url0" id="bigurl">
<img id="big" src="./img/0.gif" alt="menu0" width="540" height="360" border="0">
</a>
</div>
<div id="mess"></div>

<script>
document.getElementById('v').onmouseover = chk;
var rap = wrapping('screen', 'big', '#ffffff', 0) ;//いらない

function chk(e){
o=e?e.target: event.srcElement;
if(o.tagName!='IMG') return;
new setOpacity( rap, 100, -5, 10);//いらない
document.getElementById('big').src = o.src;
document.getElementById('big').alt = o.alt;
document.getElementById('mess').innerHTML = o.alt;
document.getElementById('bigurl').href = o.parentNode.href;
}
//「いらない」を削除するなら以下もいらない。
function wrapping( newId, elementId, backcolor, opacity ){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
var wrap = document.createElement('div');
wrap.id = newId;
with( wrap.style ){
position = 'absolute';
backgroundColor = backcolor;
/*@cc_on @if(1) filter = 'alpha(opacity='+ opacity+ ')'; @else @*/
MozOpacity = (opacity / 100);
opacity = (opacity / 100);/*@end@*/
top = element.offsetTop;
left = element.offsetLeft;
width = element.offsetWidth;
height = element.offsetHeight;
}
document.body.appendChild( wrap );
return document.getElementById(newId);
}

function setOpacity( elementId, opacity, step, wtime ){
this.opacitySet = function(n){
this.opacity = n;
this.obj.style./*@cc_on @if(1) filter = 'alpha(opacity='+ this.opacity+ ')'; @else @*/
MozOpacity = this.obj.style.opacity = (this.opacity / 100);/*@end@*/
}
this.go = function(){
this.opacitySet( this.opacity += this.step );
if( this.opacity<0 ) { this.opacitySet(0); clearInterval( this.tmid );return; }
if( this.opacity>100 ) { this.opacitySet(100); clearInterval( this.tmid ); return; }
}
this.obj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
if( !this.obj ) return false;
if( opacity != undefined ) this.opacitySet( opacity );
if( step != undefined ) this.step = step;
if( wtime != undefined ) this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);
return true;
}
</script>

- 0
- 件

通報する

この回答へのお礼

早速のお返事ありがとうございます！感動です★
イメージマップ要素内でリンクを張り動作させたく下記のように
してみましたがイメージマップだとうまく動作させる方法が
わからずです^^;
また、現状でリンクをクリックするとurl0などへ飛んでしまうの
ですがページへ飛ばさないようにする事は可能なものでしょうか？

<div>
<img src="イメージマップを張っている画像" alt="イメージマップ" width="300" height="300" border="0" usemap="#Map">
<div id="v">
<map name="Map">
<area shape="rect" coords="107,330,127,353" href="url0" alt="説明0">
<area shape="rect" coords="165,307,183,322" href="url1" alt="説明1">
<area shape="rect" coords="276,267,294,284" href="url2" alt="説明2">
<area shape="rect" coords="168,264,190,282" href="url3" alt="説明3">
<area shape="rect" coords="194,229,214,253" href="url4" alt="説明4">
<area shape="rect" coords="164,159,189,177" href="url5" alt="説明5">
<area shape="rect" coords="149,85,171,107" href="url6" alt="説明6">
<area shape="rect" coords="118,83,142,101" href="url7" alt="説明7">
<area shape="rect" coords="70,96,100,117" href="url8" alt="説明8">
</map>
</div>
<a href="url0" id="bigurl">
<img src="切り替わる部分に最初に表示する画像" alt="最初" width="280" height="280" id="big">
</a>
</div>
<div id="mess"></div>