Membuat area klik pada image dengan HTML5 Map Part 2

Pada part 2 ini saya akan menjelaskan inti dari project yang saya buat. Jika kamu belum menyimak artikel saya yang part 1 silahkan kamu baca – baca dulu biar mengerti apa yang dimaksud HTML5 Map agar tidak kebingungan ketika membaca artikel part 2 ini.

Jika kamu sudah membaca artikel sebelumnya tentang Membuat area klik pada image dengan HTML5 Map Part 1 saya akan lanjutkan pembahasannya. Pada artikel kali ini saya akan coba jelaskan fungsi dan kegunaan dari masing – masing script, sebenarnya ada sedikit improve yang saya lakukan yaitu tampilan HTML5 Map + Responsive area map.

Persiapan Membuat area klik pada image

1. Memahami struktur folder

Disini saya membuat sebuah folder bernama assets, lalu file index.html dan file video. Nanti di dalam folder assets kamu buat lagi 2 buah folder images dan js.

struktur-folder-html5-map-area
struktur folder html5 map area

2. Membuat file index.html

Langkah kedua kamu buat sebuah file index.html, jika kamu tidak mau ribet copy paste saja koding html dibawah ini lalu save dengan nama index.html

<!DOCTYPE html>
<html>
	<head>
		<title>Milestone</title>
	</head>
<body>

<div id="wrap">
	<div id="head">
		<h1>Milestone</h1>
		<p style="font-size:18px;"><i>tutorial pembuatan HTML Map sangat mudah</i></p>
		<div class="boxs">
			<div class="line-blue"></div>
		</div>
	</div>
	
	<div id="container">
		<!-- Script Bagian 1 - Image Map -->
	</div>

	<!-- Script Bagian 2 - Video -->
</div>

	<script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/imageMapResizer.js"></script>
	
	<!-- Script Bagian 3 - Custom Javascript -->
	
</body>
</html>

3. Membuat sebuah tag HTML5 Image Map

Jika file index.html sudah kamu buat pada langkah ketiga ini kamu harus copy tag html5 image area ini ke bagian ini <!– Script Bagian 1 – Image Map –>. Jika nanti kamu ingin mencoba mengganti gambar, pastikan gambarnya sudah kamu siapkan dan simpan gambar tersebut di dalam folder assets/images.

<img src="assets/images/image-sample.png" usemap="#image-map" id="Img">

<map name="image-map" id="Map">
	<area id="video1" class="mpv" title="70" href="javascript:void(0);" coords="241,20,412,174" shape="rect">
	<area id="video2" class="mpv" title="80" href="javascript:void(0);" coords="627,16,881,177" shape="rect">
	<area id="video3" class="mpv" title="90" href="javascript:void(0);" coords="913,18,1082,173" shape="rect">
	<area id="video4" class="mpv" title="00" href="javascript:void(0);" coords="62,194,301,356" shape="rect">
	<area id="video5" class="mpv" title="10" href="javascript:void(0);" coords="745,193,994,352" shape="rect">
</map>

<div id="footer">&copy; Copyright by <a href="https://www.tukarpengetahuan.com">www.tukarpengetahuan.com</a></div>

Pada artikel sebelumnya saya sudah jelaskan kegunaan usemap=”#image-map” ini untuk apa jadi saya tidak perlu jelaskan panjang lebar lagi. Pada kodingan diatas ada attribute coords dan shape jika kamu belum mengerti coba lihat ke postingan saya sebelumnya.

Baca juga : Membuat area klik pada image dengan HTML5 Map Part 1

4. Menyiapkan file video

Pada tahap ini siapkan sebuah video yang ingin kamu gunakan kemudian copy script dibawah ini dan letakkan ke bagian <!– Script Bagian 2 – Video –>

<video controls autoplay preload = "none" id="Video1" style="display:none;">
	<source src="rain.mp4" type="video/mp4">
</video>
<video controls autoplay preload = "none" id="Video2" style="display:none;">
	<source src="rain.mp4" type="video/mp4">
</video>
<video controls autoplay preload = "none" id="Video3" style="display:none;">
	<source src="rain.mp4" type="video/mp4">
</video>
<video controls autoplay preload = "none" id="Video4" style="display:none;">
	<source src="rain.mp4" type="video/mp4">
</video>
<video controls autoplay preload = "none" id="Video5" style="display:none;">
	<source src="rain.mp4" type="video/mp4">
</video>

5. Membuat custom javascript

File js ini saya gunakan untuk membuat efek tampilan pada video dan lain sebagainya. Letakkan script javascript ini ke bagian <!– Script Bagian 3 – Custom Javascript –>

<script>			
	$(document).ready(function() {
		
		$('map').imageMapResize();
		
		var map = document.getElementById("Map");
		map.addEventListener("click", function(e) {
			callAction(e.target);
		});				
		
		function callAction(area) {
			var vid_id;
			switch (area.id) {
				case "video1":
					vid_id = "1";
					break;
				case "video2":
					vid_id = "2";
					break;
				case "video3":
					vid_id = "3";
					break;
				case "video4":
					vid_id = "4";
					break;
				case "video5":
					vid_id = "5";
			}
							
			var video = document.getElementById("Video" + vid_id);
			video.autoplay = false;
			
			//Hide video  ending
			video.onended = function() {
				video.webkitExitFullscreen();
				video.style.display = "none";
			};
			
			if (video.style.display === "none") {
				video.style.display = "block";
			}
			
			//Show video fullScreen
			video.webkitRequestFullScreen();
			video.play();

			//Checking if ESC keypress
			$('video#Video' + vid_id).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
				var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
				var event = state ? 'FullscreenOn' : 'FullscreenOff';

				if(event == 'FullscreenOff'){
					video.pause();
					video.style.display = "none";
				}
			});
			
		} //End callAction
		
		//Set animation pulse
		$(window).on('resize', function(){
			var vd1;
			setTimeout(function(){
				vd1 = $("#video1").attr("coords").split(",");
				$('#video1').css({"top": eval(vd1[1])+eval(4) +"px", "left": eval(vd1[0])+eval(3) +"px"});
				localStorage.setItem('vd1', JSON.stringify(vd1));
				
				vd2 = $("#video2").attr("coords").split(",");
				$('#video2').css({"top": eval(vd2[1])+eval(4) +"px", "left": eval(vd2[0])+eval(3) +"px"});
				localStorage.setItem('vd2', JSON.stringify(vd2));
				
				vd3 = $("#video3").attr("coords").split(",");
				$('#video3').css({"top": eval(vd3[1])+eval(4) +"px", "left": eval(vd3[0])+eval(3) +"px"});
				localStorage.setItem('vd3', JSON.stringify(vd3));
				
				vd4 = $("#video4").attr("coords").split(",");
				$('#video4').css({"top": eval(vd4[1])+eval(4) +"px", "left": eval(vd4[0])+eval(3) +"px"});
				localStorage.setItem('vd4', JSON.stringify(vd4));
				
				vd5 = $("#video5").attr("coords").split(",");
				$('#video5').css({"top": eval(vd5[1])+eval(4) +"px", "left": eval(vd5[0])+eval(3) +"px"});
				localStorage.setItem('vd5', JSON.stringify(vd5));
				
			}, 350); //3.5 second timeout in milliseconds	
			
			return;
		});
		
		//Set value for reload page
		$(window).load(function() {
			var vd1_load = JSON.parse(localStorage.getItem('vd1'));
			var vd2_load = JSON.parse(localStorage.getItem('vd2'));
			var vd3_load = JSON.parse(localStorage.getItem('vd3'));
			var vd4_load = JSON.parse(localStorage.getItem('vd4'));
			var vd5_load = JSON.parse(localStorage.getItem('vd5'));
			
			$('#video1').css({"top": eval(vd1_load[1])+eval(4) +"px", "left": eval(vd1_load[0])+eval(3) +"px"});
			$('#video2').css({"top": eval(vd2_load[1])+eval(4) +"px", "left": eval(vd2_load[0])+eval(3) +"px"});
			$('#video3').css({"top": eval(vd3_load[1])+eval(4) +"px", "left": eval(vd3_load[0])+eval(3) +"px"});
			$('#video4').css({"top": eval(vd4_load[1])+eval(4) +"px", "left": eval(vd4_load[0])+eval(3) +"px"});
			$('#video5').css({"top": eval(vd5_load[1])+eval(4) +"px", "left": eval(vd5_load[0])+eval(3) +"px"});
		});
		
		return;
	});
	
</script>

Pada kodingan diatas jika kamu perhatikan saya menggunakan function imageMapResize(), kegunaannya untuk membuat map area tetap sesuai walaupun ukuran layar berubah-ubah. Kemudian function callAction(area) digunakan untuk mendapatkan id dari masing-masing video. Untuk sisanya saya sudah berikan penjelasan pada scriptnya jika kamu ingin tahu silahkan dicoba sendiri ya.

Bagi kamu yang ingin melihat full script koding yang saya bahas diatas, silahkan kunjungi akun github saya iwane021. Semoga bermanfaat (iwn)

Leave a Reply

Your email address will not be published. Required fields are marked *