04-03 写真をサムネイル表示

Posted on 2024年10月26日 by yuichi

サムネイル表示した３枚の写真をクリックすると、その写真が大きく表示される。

■マウスイベント処理

マウスがクリックされるとmousePressed関数が呼び出される。マウスクリックした位置は予約変数のmouseX,mouseYにより取得できる。

例題 4-3-1

例題4-2-1の写真を使って実行しなさい

コード

let photo = [null, null, null];
let n = 0;

function preload() {
  photo[0] = loadImage('img/olive.jpg');
  photo[1] = loadImage('img/mint.jpg');
  photo[2] = loadImage('img/rukka.jpg');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  for (let i = 0; i<3; i++) {
    image(photo[i], 50*i +125, 10, 50, 65);
  }
  image(photo[n], 100, 80, 202, 268);
}

function mousePressed() {
  let x = Math.floor((mouseX - 125) / 50);
  if (0 <= x && x < 3)
    n = x;
}

練習問題　4-3-1

写真を５枚に増やしなさい。

04