Overzicht | Eurovision 2021

22 Mei 2021

by EvanlynnNT

HTML

<div style="position: relative; width: 708px; height: 1100px;">
	<img style="position: absolute;" src="https://i.imgur.com/CZtrLKY.jpg" draggable="false" usemap="#image-map">

	<map name="image-map">
		<area class="country albanië" href="javascript:void(0)" coords="473,430,504,450" shape="rect">
		<area class="country australië" href="javascript:void(0)" coords="514,430,545,450" shape="rect">
		<area class="country azerbeidzjan" href="javascript:void(0)" coords="555,430,586,450" shape="rect">
		<area class="country belgië" href="javascript:void(0)" coords="596,430,627,450" shape="rect">
		<area class="country bulgarije" href="javascript:void(0)" coords="637,430,668,450" shape="rect">
		
		<area class="country cyprus" href="javascript:void(0)" coords="493,460,524,480" shape="rect">
		<area class="country denemarken" href="javascript:void(0)" coords="534,460,565,480" shape="rect">
		<area class="country duitsland" href="javascript:void(0)" coords="575,460,606,480" shape="rect">
		<area class="country verenigdKoninkrijk" href="javascript:void(0)" coords="616,460,647,480" shape="rect">
		<area class="country estland" href="javascript:void(0)" coords="657,460,688,480" shape="rect">
		
		<area class="country finland" href="javascript:void(0)" coords="473,490,504,510" shape="rect">
		<area class="country frankrijk" href="javascript:void(0)" coords="514,490,545,510" shape="rect">
		<area class="country georgië" href="javascript:void(0)" coords="555,490,586,510" shape="rect">
		<area class="country griekenland" href="javascript:void(0)" coords="596,490,627,510" shape="rect">
		<area class="country ierland" href="javascript:void(0)" coords="637,490,668,510" shape="rect">
		
		<area class="country ijsland" href="javascript:void(0)" coords="493,520,524,540" shape="rect">
		<area class="country israël" href="javascript:void(0)" coords="534,520,565,540" shape="rect">
		<area class="country italië" href="javascript:void(0)" coords="575,520,606,540" shape="rect">
		<area...

CSS

* {
	font-family: 'Arial', sans-serif;
	font-size: 12px;
	color: #fff;
}

.favourite {
	cursor: pointer;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
::-webkit-scrollbar-track {
    background: #e6e6e6;
}
 
::-webkit-scrollbar-thumb {
    background: #0e1c5b;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #091142;
}

JavaScript

$('.favourite').click(function () {
	var thisCountry = this.className.split(' ')[1];
	$('.text').hide();
	$('.text.' + thisCountry).show();
});

$( '.country' ).click(function () {
	$('.allthesongs').hide();
	$('.video').show();
	var thisCountry = this.className.split(' ')[1];
	
	var video = {};
	video.albanië = 'https://www.youtube.com/embed/Q4D_RfEFwd4';
	video.australië = 'https://www.youtube.com/embed/ghT5QderxCA';
	video.azerbeidzjan = 'https://www.youtube.com/embed/HSiZmR1c7Q4';
	video.belgië = 'https://www.youtube.com/embed/0EQyG1Yjlgw';
	video.bulgarije = 'https://www.youtube.com/embed/qMNxCzuEdVM';
	
	video.cyprus = 'https://www.youtube.com/embed/mk4amZlPa4g';
	video.denemarken = 'https://www.youtube.com/embed/axzrdVUdQzQ';
	video.duitsland = 'https://www.youtube.com/embed/ydgxZnHFLi4';
	video.verenigdKoninkrijk = 'https://www.youtube.com/embed/BMDGTsa_Qq0';
	video.estland = 'https://www.youtube.com/embed/QC06nyML2xg';
	
	video.finland = 'https://www.youtube.com/embed/cIvaeu6Oxzc';
	video.frankrijk = 'https://www.youtube.com/embed/-9t_SwPN31s';
	video.georgië = 'https://www.youtube.com/embed/w6jzan8nfxc';
	video.griekenland = 'https://www.youtube.com/embed/Er06NBWo4bs';
	video.ierland = 'https://www.youtube.com/embed/z6ZUBzqPxds';
	
	video.ijsland = 'https://www.youtube.com/embed/ORDK1XQToAY';
	video.israël = 'https://www.youtube.com/embed/opmTs9uvENI';
	video.italië = 'https://www.youtube.com/embed/9mL6Cmkg2_A';
	video.kroatië = 'https://www.youtube.com/embed/IHS_2GpNwmA';
	video.letland = 'https://www.youtube.com/embed/NBaCWHSyDzo';
	
	video.litouwen = 'https://www.youtube.com/embed/0rsUJWSwb0c';
	video.malta = 'https://www.youtube.com/embed/PQKiHr5qEfA';
	video.moldavië = 'https://www.youtube.com/embed/1zvnsvxA3to';
	video.nederland = 'https://www.youtube.com/embed/p4Fag4yajxk';
	video.noordMacedonië = 'https://www.youtube.com/embed/nd4YfjVWrro';
	
	video.noorwegen = 'https://www.youtube.com/embed/bp2kfhuv8ZU';
	video.oekraïne =...