Angular mouseover

はじめに

今回は現在作成してるアプリケーションのボタンにマウスカーソルを合わせると自動で画像が表示される機能を実装していく。

mouseover()

mouseover()は、マウス系のイベント処理でカーソルが特定のHTML要素内に入った時に処理を実行できる。

今回は、ボタン部分にマウスカーソルが重なったときに画像が表示できるようする。

これはボタン部分のHTML要素内にマウスカーソルが入った瞬間に画像を表示する処理が実行される。

mouseover()を活用するとインタラクティブなWebページが作れる。

今回のソース

major-key-component.html

<h2 class="mat-h2">メジャー・キー</h2>
<p class="mat-body">メジャー・キーは、メジャー・スケールを基盤とするキーである。</p>
<button mat-raised-button *ngFor="let MajorKey of MajorKeys" (mouseover)="onSelect(MajorKey)">
    <i class="material-icons">music_video</i>
    {{ MajorKey.keyname }}
</button>

<div *ngIf="selectedMajorkey">

    <h3 class="mat-h3">{{ selectedMajorkey.keyname }} Major Key</h3>
    <div>
        <img src="/assets/majorkey_img/{{selectedMajorkey.keyname}}major.png">
        <br>
        <h3 class="mat-h3">Note</h3>
        <img src="/assets/majorkey_img/{{selectedMajorkey.keyname}}majornote.png">
        <br>
            <p>
                <span class="circle"></span>
                <span class="circle2"></span>
                <span class="mat-body-2">: 構成音</span>
            </p>
            <br>
            <p>
            <span class="circle"></span>
            <span class="mat-body-2">: トニック(Tonic)</span>
            </p>
        
    <!-- <audio controls src="/assets/key_img/major{{selectedMajorkey.keyname}}.wav"></audio> -->
    </div>

</div>

 

 

major-key-component.ts

import { Component, OnInit } from '@angular/core';
import { MAJORKEYS } from '../keydata/mock-major-key';
import { MajorKey } from '../keydata/major-key';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-major-key',
  templateUrl: './major-key.component.html',
  styleUrls: ['./major-key.component.css']
})
export class MajorKeyComponent implements OnInit {
  MajorKeys = MAJORKEYS;
  MajorKeyname: string;
  MajorKeyid: string;

  selectedMajorkey: MajorKey;
  onSelect(Majorkey: MajorKey): void {
    this.selectedMajorkey = Majorkey;
  }


  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // this.MajorKeyname = this.route.snapshot.paramMap.get('keyname');
    this.MajorKeyname = this.route.snapshot.paramMap.get('id');

  }
}

 

イメージ

Gのボタンにカーソルがあたっているイメージ

 

終わりに

今回は、ボタン部分にマウスカーソルが重なったときに画像が表示できるようにした。

mouseover()を活用するとインタラクティブなWebページが作れため、モダンなサイトを作るために活用していきたい。

 

コメント