プロが教える店舗＆オフィスのセキュリティ対策術

onMouseoverについて教えてください。

解決済

  • 質問者：masa_tokai
  • 質問日時：
  • 回答数：5件

前回は、onMouseoverで文字にマウスを合わせると関連するimgが変わる。
というもを作りました。
皆様の助言やご指摘のおかげで完成致しました。
本当にありがとうございます。
今回は追加機能として、マウスを対象文字に合わせている間、関連するimgが点灯するというのを作りたいのです。
----------html-------------------------
<div id="mapimg">
<!-- 地図-->
<IMG id="myIMG1" src="../img/map/1f/map.jpg" width="433" height="469" border="0">
</div>
<a href="○○○" id="7map" onMouseover="return setInterval(Swap('myIMG1', '../img/map/1f/7map.jpg'),200);" onMouseout="return Swap('myIMG1', '../img/map/1f/map.jpg');" title="test">TEST</a><br>
----------javascript--------------------
function Swap(iID, img_url){
var myobj = document.getElementById(iID);
if(myobj.src == img_url){
myobj.src = "../img/map/1f/map.jpg";
}else{
myobj.src = img_url;
}
return false;
}
素人なりに考えて、「setInterval」を使って、一定の間隔で関数を呼び出し、元のimgと表示（点灯）imgを繰り返し表示すればいいと思ったのですが、上手く行きません。

どなたか助言をお願いいたします。
未熟者でソースが汚いのですが、お願いいたします。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： yyr446
  • 回答日時：

点燈のために一定間隔で画像を切り替えるなんてすごいアイデアですね。


どうしても切り替えたいなら、マウスオーバーの時だけ点燈しているようなGIFアニメ画像に切り替えるとか。

それよりも、発想をかえましょう。
点燈はCSSのスタイル属性で実現できますよ。
アルファを変えて暗くしたり明るくしたりとか、
あるいは、1枚の画像を明るい部分と暗い部分に分け、表示する範囲を
スタイル属性で変えるとか...
アイデアは他にもあります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早々のお返事ありがとうございます。
CSSのスタイル属性のアルファを変えて暗くしたり明るくしたりとかの方法もあるのですね。
色々方法がありそうなので、色々なアイデアで試してみます。
ありがとうございます。

通報する
お礼日時：2009/10/31 09:46

No.2

  • 回答者： babu_baboo
  • 回答日時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<meta http-equiv="Content-Script-Type" content="application/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<body>

<div>
　<img src="./img/0.gif" alt="aaaa" id="my" >
　<a href="#" id="map7" onMouseover="image0.start(1)" onMouseout="image0.stop(0)">TEST</a><br>
　<input type="text" id="v" size="80">
</div>

<script type="text/javascript"><!--

var ToggleImage = function () {
　this.init.apply( this, arguments );
};

ToggleImage.prototype.init = function ( id, wait ) {
　this.e = document.getElementById( id );
　this.w = wait;
　this.g = [ ];
　this.c = 0;
　this.t = null;
　var cnt, obj;

　for( cnt = 0; obj = arguments[ cnt + 2 ]; cnt++ ) {
　　this.g[ cnt ] = new Image();
　　this.g[ cnt ].src = obj;
　}
　return this.max = cnt - 1;
};


ToggleImage.prototype.start = function ( n ) {
　if( 'undefined' !== typeof n ) this.c = n;
　this.next( this.c );
　if( this.t ) this.stop( );
　return this.t = setInterval(
　　(function( that ) {
　　　return function () { that.next(); };
　　})( this ), this.w );
};


ToggleImage.prototype.next = function ( n ) {
　this.c = ( 'undefined' === typeof n ) ? this.c + 1: n;
　if( this.c > this.max ) this.c = 0;
　return this.e.setAttribute('src', this.g[ this.c ].src);
//this.e.src=this.g[ this.c ].src;
};


ToggleImage.prototype.stop = function ( n ) {
　clearInterval( this.t );
　if( 'undefined' !== typeof n ) this.next( n );
　return this.t = null;
};

var image0 = new ToggleImage( 'my', 300, './img/0.gif', './img/1.gif', './img/2.gif' );

//ぜんかくくうはくは、はんかくにでもなおしてね。
//-->
</script>
ちょっとむずい
    • good
    • 0
    • 件
通報する
この回答へのお礼

ソースまで作っていただいてありがとうございます。
参考にさせていただきます。

通報する
お礼日時：2009/10/31 09:48

No.3

  • 回答者： yyr446
  • 回答日時：

babu_baooちゃんのサンプルおもしろいですね。


スロットみたい。
注意としては、切り替える画像のサイズをみんな同じにしとくか、
表示する部分にwidthとheightを付けとか無いと、たいへんな事になります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早々のお返事、助言ありがとうございます。感謝いたします。
私も質問するときには気をつけます。

通報する
お礼日時：2009/10/31 10:11

No.4ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

さらにかいりょうしたじょ！


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Script-Type" content="application/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<body>

<div>
<img src="./img/0.gif" alt="aaaa" id="my1" >
<a href="#" id="map1" onMouseover="image1.start(1)" onMouseout="image1.stop(0)">TEST</a><br>
</div>
<div>
<img src="./img/9.gif" alt="aaaa" id="my2" >
<a href="#" id="map2" onMouseover="image2.start(1)" onMouseout="image2.stop(0)">TEST</a><br>
</div>

<script type="text/javascript"><!--

var ToggleImage = function(d,w){
var c=0,t,o,m=0,g=[];while(o=arguments[2+m])(g[m++]=new Image).src=o;
this.start = function(n){h(n)||(c=n),this.stop(c),t=setInterval((function(_){return function(){_.next()}})(this),w)};
this.next = function(n){c=h(n)?c+1:n,document.getElementById(d).setAttribute('src',g[c*=c<m].src)};
this.stop = function (n){h(n)||this.next(n);t&&clearInterval(t),t=0};
function h(n){return'undefined'===typeof n}
};

var image1 = new ToggleImage( 'my1', 300, './img/0.gif', './img/1.gif', './img/2.gif' );
var image2 = new ToggleImage( 'my2', 200, './img/9.gif', './img/8.gif', './img/7.gif' );

//ぜんかくくうはくは、はんかくにでもなおしてね。
//-->
</script>

かいせつするまででもないけど、ふくすうのかしょに
ふくすうのがぞうを、ふくすうのたいみんぐでそれぞれ
できるじょ^^;

きっとだれかが、もっとこんぱくとにするじょ^^;
    • good
    • 0
    • 件
通報する
この回答へのお礼

すごいです！！
ありがとうございます。
ソースを拝借して検証してみたところ、すごい！！の一言しかでてきません。

ソースの内容はちょっと難しいですが、おいおい理解していこうと思います。

本当に感謝いたします。

通報する
お礼日時：2009/10/31 10:13

No.5

  • 回答者： babu_baboo
  • 回答日時：

ていせいします


「かいりょう」を「かいあく」にでした。

がぞうのさいずかぁ～。きをつけます。

しつもんしゃのさんぷるにはしていがあったのでゆだんしてしまった。

しつもんしゃさんの、さんぷるの、こまかいことは、するーします
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報