サムネイルをマウスオーバーすると拡大画像を表示したい

質問

ここに質問していいのか不安ですが・・・
よろしくお願いします。

http://www.photos.jp/browse.phtml?f=s&c=0

このページのように、サムネイル画像にマウスを乗せると
拡大された画像が表示されるようにしたいのですが・・・・

どうすればいいでしょうか？

抽象的な質問の仕方で恐縮ですが・・・

回答No.2

ssr-y6

以下は、左の小さい画像の上にポインタを乗せると右側に拡大したものが表示されるサンプルです。

import java.awt.*;
import java.awt.image.*;
import java.awt.event.*;
import java.util.*;

class sambcanvas extends Canvas {

static int IS = 100;
static int IM = IS / 10;
static int ISM = IS + 2 * IM;
Vector ID;
int SI = -1;

public sambcanvas() { super();
ID = new Vector();
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseMoved(MouseEvent e) {
int x = e.getX(), y = e.getY(), n = ID.size(), i;
if ((x > IM) && (x < IM + IS) && (y < n * ISM)) {
i = y / ISM;
if ((y < i * ISM + IM) || (y > (i + 1) * ISM - IM)) i = -1;
}
else i = -1;
if (SI != i) {
SI = i;
repaint();
};
};
});
};

public void AddImage(BufferedImage bi) { ID.add(bi); };

public void paint(Graphics g) {
g.clearRect(0, 0, getWidth(), getHeight());
for (int i = 0; i < ID.size(); i ++)
g.drawImage((BufferedImage)ID.get(i), IM, i * ISM + IM, this);
if (SI >= 0)
g.drawImage((BufferedImage)ID.get(SI), ISM, 0, getWidth() - ISM, getHeight(), this);
};

public void update(Graphics g) { paint(g); };

}

public class sambnail {

static BufferedImage MakeImage() {

int i, s = sambcanvas.IS;
BufferedImage bi = new BufferedImage(s, s, BufferedImage.TYPE_INT_ARGB);

Graphics g = bi.getGraphics();
for (i = 0; i < s; i ++) {
g.setColor(new Color((int)(Math.random() * (double)0x1000000)));
g.drawRect(0, 0, i, i);
};
g.dispose();

return(bi);

};

public static void main(String args[]) {

Frame MF = new Frame("Sambnail");
MF.setSize(640, 480);
MF.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) { System.exit(0); };
});

sambcanvas SC = new sambcanvas();
MF.add(SC, BorderLayout.CENTER);

for (int i = 0; i < 5; i ++) SC.AddImage(MakeImage());

MF.setVisible(true);

};

}

回答No.1

Bonjin

＞ここに質問していいのか不安ですが・・・
JavaScriptカテゴリの方が適切です。
(個人的な意見としては、適切なカテゴリがわからないなら「その他」に投稿する方が良いと思いますが…)

＞どうすればいいでしょうか？
JavaScriptで動作しているので、そのページのソースを見ればどう記述しているのわかります。または、JavaScriptのTipsページなどに同じようなものがあるのでそちらを参考しても良いでしょう。
JavaScript自体をやったことがないのなら、まずは適当な入門ページや参考書などを見てJavaScriptの基本から勉強してください。

お礼

Bonjinさん、

一度勉強してみます！
どうもありがとうございます。