人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

写真を公開するサイトで

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

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

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

1240924693
●拡大する


●質問者: workzaq1
●カテゴリ:インターネット ウェブ制作
✍キーワード:イメージ サイト フェードアウト ポイント マウス
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kaerx
●40ポイント

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

オンマウスで矢印の横に画像を表示させたい・・・・。 - 教えて!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

◎質問者からの返答

ありがとうございます。

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


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

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

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


2 ● kebo987654
●60ポイント ベストアンサー

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

イメージを表示させたい文字を「<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);
◎質問者からの返答

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

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


3 ● rolexbaidu
●0ポイント

http://www.lv-google.net/E-gc8.htm

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ