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

【javascript】マウスオンで画像表示を変更させる。

解決済

  • 質問者：m-----c
  • 質問日時：
  • 回答数：3件

【javascript】マウスオンで画像表示を変更させる。

マウスオンで画像の切り替えはできますが、
http://www.hotpepper.jp/
フームーの写真ギャラリーように切り替え時にぼかしたいのですが、
これは簡単な事でしょうか？
そういったタグを紹介しているサイト等ご存知でしょうか？

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

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

朗報とゆうか．．．


IEでcanvasを使うにはexplorercanvasってやつを
http://code.google.com/p/explorercanvas/download …
からダウンロードして、
<!--[if IE]><script src="/jslib/excanvas.js"></script><![endif]-->
と読み込んで、
var G_vmlCanvasManager;
canvas = document.getElementById("canvas");
if(G_vmlCanvasManager != undefined){G_vmlCanvasManager.initElement(canvas);}
if(canvas.getContext) {ctx = canvas.getContext("2d");}
とすれば、HTML5のcanvasと同じく使えるはずだったのだが、
よくよく調べると
globalAlpha（透明度）はIEとchromeでは使えないとの事で、
chromeは素のHTML5がOKだから、だめなのはIEのみ。

やはり、IEは．．．．．
    • good
    • 0
    • 件
通報する
この回答へのお礼

IEは本当に嫌いです。
HTML5でできるのですね。
色々と詳しく説明していただきありがとうございました。
canvasを使用してみようと思います。

通報する
お礼日時：2010/05/27 14:02

No.2

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

HTML5のcanvas要素を使っちゃいましょう。


サブネールDIVのリストに小さい画像を並べておいて、マウスホバーで、
canvasにフェードイン・フェードアウトさせます。
（オブジェクト施工前で、あしからず）
＜サンプル＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Canvas FadeIn</title>
</head>
<body>
<div id="thumbnail"><ul>
<li>
<img src="/image/yahagi.png" onmouseover="fadeIn(this);" onmouseout="fadeOut();" width="20" height="20">
</li>
</ul></div>
<canvas id="canvas" width="600" height="100"></canvas><br>
<script type="text/javascript" charset="utf-8">
<!--
var canvas, ctx, image, fadeTimer;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.globalAlpha=0;
function fadeIn(img){
image = img;
StopFade();
fadeTimer = setInterval(function(){
if (ctx.globalAlpha > 0.9) {
ctx.globalAlpha = 1;
StopFade();
}else ctx.globalAlpha += 0.1;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image,0,0);
},100);
}
function fadeOut(){
StopFade();
fadeTimer = setInterval(function(){
if (ctx.globalAlpha < 0.1) {
ctx.globalAlpha = 0;
StopFade();
}else ctx.globalAlpha -= 0.1;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image,0,0);
},100);
}
function StopFade() {
if(fadeTimer){
clearInterval(fadeTimer);
fadeTimer=null;
}
}
// -->
</script>
</body>
</html>

※古いブラウザーは見捨てる！のこころ
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

＞フームーの写真ギャラリーように～～


というのがどの部分を指しているのかわからなかったので、どのようなものをイメージしているのか把握できませんが…

「マウスオンで画像変更」、「切り替え時にぼかしたい」ということから想像するに
こんなののことでしょうか？
http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
http://javascript.webcreativepark.net/library/im …
http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=fadejs

「javascript ロールオーバー フェード」あたりをキーにぐぐればいろいろ見つかるはず。

作り方の解説なら（jquery利用ですが）
http://gihyo.jp/design/serial/01/jquery-site-pro …
http://www.openspc2.org/JavaScript/Ajax/jQuery_p …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
勉強してみたいと思います。

通報する
お礼日時：2010/05/27 13:59

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報