はじめに
今回は現在作成してるアプリケーションのボタンにマウスカーソルを合わせると自動で画像が表示される機能を実装していく。
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');
}
}
イメージ
終わりに
今回は、ボタン部分にマウスカーソルが重なったときに画像が表示できるようにした。
mouseover()を活用するとインタラクティブなWebページが作れため、モダンなサイトを作るために活用していきたい。
コメント