1240924693 写真を公開するサイトで


 「ある文字にマウスが乗せると、その文字から少し左上のポイントのところに、
  フェードインしながら画像が表示できるようする」にはどうすればよいのでしょうか?

1.ある文字の上にマウスを置く
2.文字の左上のポイントに画像がフェードアウトされて表示される。
3.マウスを離すと表示されている画像がフェードアウトして消える。

 ※イメージの方を添付しています。
 (このような挿絵が出るようにしたいのですけども。)

回答の条件
  • 1人2回まで
  • 登録:2009/04/28 22:18:16
  • 終了:2009/05/04 20:52:13

ベストアンサー

id:kebo987654 No.2

kebo987654回答回数38ベストアンサー獲得回数102009/04/29 18:07:42

ポイント60pt

ソースがちょっと汚いですが自作しました。。

イメージを表示させたい文字を「<span onmouseover="FadeIN('1240924693.jpg',this)" onmouseout="FadeOUT(this)"></span>」で囲みます。

----------HTML例----------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta http-equiv="content-style-type" content="text/css">
	<title></title>
	<script type="text/javascript" src="Fade_in_out.js"></script>
</head>
<body>
	<span onmouseover="FadeIN('1240924693.jpg',this)" onmouseout="FadeOUT(this)">ユリの花が綺麗に咲きました。</span>
</body>
</html>
----------Fade_in_out.js内----------

Function.prototype.wrap=function(o){
	var f=this;
	return function(){
		f.apply(o,arguments);
	};
};

function ObjectHash(){
	this.hashTable=[];
	this.valueTable=[];
	this.empty=[0];
}
ObjectHash.prototype={
	hashTable:null,
	valueTable:null,
	empty:null,
	setItem:function(o,v,canOverwrite){
		var p=this.hashTable.indexOf(o,0);
		if(p<0){
			this.hashTable[p=this.empty.pop()]=o;
			if(this.empty.length==0)
				this.empty[0]=this.hashTable.length;
		}else if(!canOverwrite)
			return false;
		this.valueTable[p]=v;
		return true;
	},
	removeItem:function(o){
		var p=this.hashTable.indexOf(o,0);
		if(p<0)
			return false;
		delete this.hashTable[p];
		delete this.valueTable[p];
		this.empty.push(p);
		return true;
	},
	getValue:function(o){
		var p=this.hashTable.indexOf(o,0);
		if(p<0)
			return null;
		return this.valueTable[p];
	},
	confirmItem:function(o){
		return this.hashTable.indexOf(o,0)>=0;
	}
};

function Fade_in_out(element,isFade_in){
	this.init(element,isFade_in);
	this.advance=this.advance.wrap(this);
}
Fade_in_out.changeOpacity=function(element,opacity){
	element.style.opacity=opacity;
	element.style.MozOpacity=opacity;
	element.style.filter="alpha(opacity="+opacity*100+")";
};
Fade_in_out.prototype={
	_constructor_:Fade_in_out,
	
	element:null,
	
	process:-10,
	isFade_in:true,
	isMoving:false,
	
	init:function(element,isFade_in){
		this.element=element==null?this.element:element;
		this.isFade_in=isFade_in==null?this.isFade_in:isFade_in;
	},
	advance:function(){
		if(
			( this.isFade_in&&(this.process+=10)<=100)||
			(!this.isFade_in&&(this.process-=10)>=0)
		){
			this._constructor_.changeOpacity(this.element,this.process/100);
			setTimeout(this.advance,50);
		}else{
			this.process=this.isFade_in?100:0;
			this.isMoving=false;
			if("onend" in this)
				this.onend(this);
		}
	},
	practice:function(element,isFade_in){
		this.init(element,isFade_in);
		if(!this.isMoving){
			this.isMoving=true;
			this.advance();
		}
	}
};

var FadeInOutJS={
	elementTable:new ObjectHash(),
	
	getOffsetPos:function(element){
		var y=element.offsetTop,
			x=element.offsetLeft;
		while(element=element.offsetParent){
			y+=element.offsetTop;
			x+=element.offsetLeft;
		}
		return{top:y,left:x};
	},
	Fade_in:function(path,element){		
		var fio=this.elementTable.getValue(element);
		if(fio==null){
			fio=new Fade_in_out();
			this.elementTable.setItem(element,fio,false);
			fio.onend=function(fio){
				if(fio.process==0){
					this.elementTable.removeItem(element);
					fio.element.parentNode.removeChild(fio.element);
				}
			}.wrap(this);
			fio.practice(
				function(pos){
					var img=document.createElement('img');
					img.src=path;
					img.style.position="absolute";
					img.style.top=pos.top<100?0:(pos.top-100)+"px";
					img.style.left=pos.left<100?0:(pos.left-100)+"px";
					img.style.zIndex=-1;
					Fade_in_out.changeOpacity(img,0);
					return document.body.appendChild(img);
				}(this.getOffsetPos(element))
			,true);
		}
		fio.practice(null,true);
	},
	Fade_out:function(element){
		var fio=this.elementTable.getValue(element);
		if(fio==null)
			return;
		fio.practice(null,false);
	}
};

var FadeIN=FadeInOutJS.Fade_in.wrap(FadeInOutJS);
var FadeOUT=FadeInOutJS.Fade_out.wrap(FadeInOutJS);
id:workzaq1

すみません、コメントの方で先にお返事させていただきました。

ご回答ありがとうございます。

2009/05/04 19:59:31

その他の回答(2件)

id:kaerx No.1

kaerx回答回数78ベストアンサー獲得回数32009/04/29 02:08:33

ポイント40pt

こんな感じでしょうか??

オンマウスで矢印の横に画像を表示させたい・・・・。 - 教えて!goo

http://oshiete1.goo.ne.jp/qa1561889.html

オンマウスで画像の表示非表示1

http://beginners.atompro.net/smpdhtm_onmgrpd1.shtml

オンマウスでサムネイル画像表示

http://blog.kazuking.net/archives/2007/02/22-154902.php

id:workzaq1

ありがとうございます。

まさにそんな感じでした。


URLの方、とても参考になります。

フェードIN、OUTの方はJavaScriptの知識が無いと

実装が難しいみたいですね(汗)

2009/05/04 19:58:36
id:kebo987654 No.2

kebo987654回答回数38ベストアンサー獲得回数102009/04/29 18:07:42ここでベストアンサー

ポイント60pt

ソースがちょっと汚いですが自作しました。。

イメージを表示させたい文字を「<span onmouseover="FadeIN('1240924693.jpg',this)" onmouseout="FadeOUT(this)"></span>」で囲みます。

----------HTML例----------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta http-equiv="content-style-type" content="text/css">
	<title></title>
	<script type="text/javascript" src="Fade_in_out.js"></script>
</head>
<body>
	<span onmouseover="FadeIN('1240924693.jpg',this)" onmouseout="FadeOUT(this)">ユリの花が綺麗に咲きました。</span>
</body>
</html>
----------Fade_in_out.js内----------

Function.prototype.wrap=function(o){
	var f=this;
	return function(){
		f.apply(o,arguments);
	};
};

function ObjectHash(){
	this.hashTable=[];
	this.valueTable=[];
	this.empty=[0];
}
ObjectHash.prototype={
	hashTable:null,
	valueTable:null,
	empty:null,
	setItem:function(o,v,canOverwrite){
		var p=this.hashTable.indexOf(o,0);
		if(p<0){
			this.hashTable[p=this.empty.pop()]=o;
			if(this.empty.length==0)
				this.empty[0]=this.hashTable.length;
		}else if(!canOverwrite)
			return false;
		this.valueTable[p]=v;
		return true;
	},
	removeItem:function(o){
		var p=this.hashTable.indexOf(o,0);
		if(p<0)
			return false;
		delete this.hashTable[p];
		delete this.valueTable[p];
		this.empty.push(p);
		return true;
	},
	getValue:function(o){
		var p=this.hashTable.indexOf(o,0);
		if(p<0)
			return null;
		return this.valueTable[p];
	},
	confirmItem:function(o){
		return this.hashTable.indexOf(o,0)>=0;
	}
};

function Fade_in_out(element,isFade_in){
	this.init(element,isFade_in);
	this.advance=this.advance.wrap(this);
}
Fade_in_out.changeOpacity=function(element,opacity){
	element.style.opacity=opacity;
	element.style.MozOpacity=opacity;
	element.style.filter="alpha(opacity="+opacity*100+")";
};
Fade_in_out.prototype={
	_constructor_:Fade_in_out,
	
	element:null,
	
	process:-10,
	isFade_in:true,
	isMoving:false,
	
	init:function(element,isFade_in){
		this.element=element==null?this.element:element;
		this.isFade_in=isFade_in==null?this.isFade_in:isFade_in;
	},
	advance:function(){
		if(
			( this.isFade_in&&(this.process+=10)<=100)||
			(!this.isFade_in&&(this.process-=10)>=0)
		){
			this._constructor_.changeOpacity(this.element,this.process/100);
			setTimeout(this.advance,50);
		}else{
			this.process=this.isFade_in?100:0;
			this.isMoving=false;
			if("onend" in this)
				this.onend(this);
		}
	},
	practice:function(element,isFade_in){
		this.init(element,isFade_in);
		if(!this.isMoving){
			this.isMoving=true;
			this.advance();
		}
	}
};

var FadeInOutJS={
	elementTable:new ObjectHash(),
	
	getOffsetPos:function(element){
		var y=element.offsetTop,
			x=element.offsetLeft;
		while(element=element.offsetParent){
			y+=element.offsetTop;
			x+=element.offsetLeft;
		}
		return{top:y,left:x};
	},
	Fade_in:function(path,element){		
		var fio=this.elementTable.getValue(element);
		if(fio==null){
			fio=new Fade_in_out();
			this.elementTable.setItem(element,fio,false);
			fio.onend=function(fio){
				if(fio.process==0){
					this.elementTable.removeItem(element);
					fio.element.parentNode.removeChild(fio.element);
				}
			}.wrap(this);
			fio.practice(
				function(pos){
					var img=document.createElement('img');
					img.src=path;
					img.style.position="absolute";
					img.style.top=pos.top<100?0:(pos.top-100)+"px";
					img.style.left=pos.left<100?0:(pos.left-100)+"px";
					img.style.zIndex=-1;
					Fade_in_out.changeOpacity(img,0);
					return document.body.appendChild(img);
				}(this.getOffsetPos(element))
			,true);
		}
		fio.practice(null,true);
	},
	Fade_out:function(element){
		var fio=this.elementTable.getValue(element);
		if(fio==null)
			return;
		fio.practice(null,false);
	}
};

var FadeIN=FadeInOutJS.Fade_in.wrap(FadeInOutJS);
var FadeOUT=FadeInOutJS.Fade_out.wrap(FadeInOutJS);
id:workzaq1

すみません、コメントの方で先にお返事させていただきました。

ご回答ありがとうございます。

2009/05/04 19:59:31
  • id:kebo987654
    先ほど投稿した者ですが、'1240924693.jpg'の部分はその時に応じて変更してください。
    ためしに作ったファイルの内容をそのまま挙げてしまってました。。
  • id:kebo987654
    何度も申し訳ないです。
    IEで動かなかったので修正したものです。(IE,FF,GoogleChrome,Operaの最新版で動作確認済み)
    >||
    ----------Fade_in_out.js内----------

    Function.prototype.wrap=function(o){
    var f=this;
    return function(){
    f.apply(o,arguments);
    };
    };

    if(!Array.prototype.indexOf)
    Array.prototype.indexOf=function(element,i){
    for(var l=this.length;i<l;++i)
    if(i in this&&this[i]==element)
    return i;
    return -1;
    };

    if(!Array.prototype.forEach)
    Array.prototype.forEach=function(f,receiver){
    receiver=receiver||null;
    for(var i=0,l=this.length;i<length;++i)
    if(i in this)
    f.call(receiver,this[i],i,this);
    };

    if(!document.all){
    eval("var event=null;");
    ["mousedown","mouseover","mouseout","mousemove","mousedrag", "click","dblclick"].forEach(function(e){
    addEventListener(e,function(e){
    event=e;
    },true);
    });
    }

    function ObjectHash(){
    this.hashTable=[];
    this.valueTable=[];
    this.empty=[0];
    }
    ObjectHash.prototype={
    hashTable:null,
    valueTable:null,
    empty:null,
    setItem:function(o,v,canOverwrite){
    var p=this.hashTable.indexOf(o,0);
    if(p<0){
    this.hashTable[p=this.empty.pop()]=o;
    if(this.empty.length==0)
    this.empty[0]=this.hashTable.length;
    }else if(!canOverwrite)
    return false;
    this.valueTable[p]=v;
    return true;
    },
    removeItem:function(o){
    var p=this.hashTable.indexOf(o,0);
    if(p<0)
    return false;
    delete this.hashTable[p];
    delete this.valueTable[p];
    this.empty.push(p);
    return true;
    },
    getValue:function(o){
    var p=this.hashTable.indexOf(o,0);
    if(p<0)
    return null;
    return this.valueTable[p];
    },
    confirmItem:function(o){
    return this.hashTable.indexOf(o,0)>=0;
    },
    isEmpty:function(){
    for(var i=0,ht=this.hashTable,l=ht.length;i<l;++i)
    if(i in ht)
    return false;
    return true;
    }
    };

    function Point(x,y){
    this.x=x||0;
    this.y=y||0;
    }
    Point.prototype={
    x:0,
    y:0,
    toString:function(){
    return ["x:",this.x," y:",this.y].join("");
    }
    };

    var FadeInOutJS={
    elementTable:new ObjectHash(),

    getMousePos:
    typeof opera!="undefined"?function(){return new Point(
    event.clientX,
    event.clientY
    );}:document.all?function(){return new Point(
    document.body.scrollLeft+event.clientX,
    document.body.scrollTop+event.clientY
    );}:function(){return new Point(
    event.pageX,
    event.pageY
    );},
    getSuitablePos:function(elm,height){
    var ret =new Point(),
    offset=new Point(
    elm.offsetLeft,
    elm.offsetTop
    );
    while(elm=elm.offsetParent){
    offset.x+=elm.offsetLeft;
    offset.y+=elm.offsetTop;
    }
    ret.x=offset.x<0?0:offset.x;
    ret.y=offset.y<0?0:offset.y;

    ret.x-=20
    if(ret.x<0)
    ret.x=0;
    ret.y-=height+20;
    if(ret.y<0)
    ret.y=this.getMousePos().y+20;

    return ret;
    },
    changeOpacity:function(element,opacity){
    var els=element.style;
    els.opacity=opacity;
    els.MozOpacity=opacity;
    els.filter="alpha(opacity="+opacity*100+")";
    },
    createImage:function(path,element){
    var img=document.createElement("img");

    img.src=path;
    img.style.position="absolute";
    img.style.top="-65535px";
    img.style.left="-65535px";
    this.changeOpacity(img,0);
    document.body.appendChild(img);

    var pos=this.getSuitablePos(element,img.scrollHeight);
    img.style.top=pos.y+"px";
    img.style.left=pos.x+"px";

    return img;
    },

    Fade_in:function(path,element){
    var fio=this.elementTable.getValue(element);
    if(fio==null){
    fio=new Fade_in_out(this.createImage(path,element),element);
    this.elementTable.setItem(element,fio,false);
    }

    fio.engageTimer(fio.MOTION_FADEIN);
    },
    Fade_out:function(element){
    var fio=this.elementTable.getValue(element);
    if(fio==null)
    return;

    fio.engageTimer(fio.MOTION_FADEOUT);
    }
    };

    function Fade_in_out(imgElement,eventSender){
    this.imgElement=imgElement;
    this.eventSender=eventSender;
    this.timerCallback=this.timerCallback.wrap(this);
    }
    Fade_in_out.prototype={
    timerInterval:50,//タイマーの精度(ミリ秒)

    timer:null,
    timerCallback:function(){
    if(!this.advance())
    this.timer=setTimeout(this.timerCallback,this.timerInterval);
    },
    engageTimer:function(motion){
    if(this.timer!=null)
    clearTimeout(this.timer);

    this.advance=this.functions[motion];
    this.process+=(motion==this.MOTION_FADEIN)?+1:-1;

    this.timer=setTimeout(this.timerCallback,this.timerInterval);
    },

    advance:null,
    functions:[
    function(){//フェードイン
    if(this.process<=10){
    FadeInOutJS.changeOpacity(this.imgElement,this.process/10);

    ++this.process;
    return 0;

    }else return -1;
    },
    function(){//フェードアウト
    if(this.process>=0){
    FadeInOutJS.changeOpacity(this.imgElement,this.process/10);

    --this.process;
    return 0;
    }else{
    FadeInOutJS.elementTable.removeItem(this.eventSender);
    this.imgElement.parentNode.removeChild(this.imgElement);
    return -1;
    }
    }
    ],

    process:0,
    imgElement:null,
    eventSender:null,

    MOTION_FADEIN:0,
    MOTION_FADEOUT:1,

    toString:function(){
    return ["Opacity:",this.process*10,"%"].join("");
    }
    };

    var FadeIN=FadeInOutJS.Fade_in.wrap(FadeInOutJS);
    var FadeOUT=FadeInOutJS.Fade_out.wrap(FadeInOutJS);
    ||<
    左上に表示できるスペースがなかったらマウスポインタの少し下に表示します。
  • id:workzaq1
    ご回答頂きありがとうございます。

    とんでもないです。
    回答いただきとても助かります。


    ちょっと試してみます。
  • id:workzaq1
    試してみました。

    画像が見事にフェードイン、フェードアウトされており
    感激しています。(驚) 

    ソースの方、ありがとうございます。
    今の私にとっては難しいので
    いつか自分でも書けるように頑張りたいと思います^^;


    ●位置をずらす場合なのですが、
     下記の場所の数値を変更すればいいでしょうか?

     (すみません、ちょっと位置を変えたかったので、いろいろと触ってみると、
      この部分を変更することで、「画像の表示位置が変えること」ができていたので )

    ret.x-=20 //X座標をずらす
    if(ret.x<0)
    ret.x=0;
    ret.y-=height+20; //Y座標をずらす
    if(ret.y<0)
    ret.y=this.getMousePos().y+20;

  • id:kebo987654
    それでOKですよ。
    ただ、画像とマウスが重なってしまうとブラウザによっては表示されなくなるので注意が必要です。
  • id:workzaq1
    どうも、ありがとうございます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません