マウスポインタが触た瞬間に画像が大きく表示

質問

楽市360（楽天買物支援サイト）　http://www.raku360.com/

上記サイトにでてくる商品画像にマウスポインタが触た瞬間、その画像が大きく表示
されるようになります。

今のところ楽天アフィリエイト商品やアマゾンの書籍などに対応しているようですが、
そのようなことを他のサイトでも使える方法はあるのでしょうか。

回答No.2

leap_day

こんにちは

<script language="javascript"><!--
function showimg(url) {
document.getElementById("show").style.display = "block";
document.getElementById("show").innerHTML = "<img src='"+url+"' width='100%' >";
}
function delimg() {
document.getElementById("show").style.display = "none";
}
//--></script>

<div id="show" style="width:200px;height:200px;position:absolute;top:300px;left:300px;display:none;"></div>

<img src="sample0.gif" style="width:50px;height:50px;" onMouseover="showimg(this.src)" onMouseout="delimg()">
<img src="sample1.gif" style="width:50px;height:50px;" onMouseover="showimg(this.src)" onMouseout="delimg()">

画像に触れることで<div id="show">に作画します
top:●●px; left:●●pxで表示位置変更

お礼

leap_dayさん、ご回答ありがとうございます。
さっそく試したいと思います。
ありがとうございました。

補足

leap_dayさん、ご回答ありがとうございます。

いろいろ試してみましたが、
画像が拡大した時、その画像が少し荒くなってしまいます。
できれば、大きくした画像はそのままきれいに、
小さい画像はその”縮小した画像”をはめればと思います。

そのようなことが可能でしょうかぁ！？

回答No.1

skycolor

うーん、ちょっと違うかもしれませんが・・・
http://www.openspc2.org/reibun/javascript/mouse/032/index.html
Javascriptです。

工夫すれば拡大した時も画像は劣化しないと思いますよ。

ご参考までに。

お礼

skycolorさん、ご回答ありがとうございます。
さっそく試したいと思います。
ありがとうございました。