[j0hnik]

<style>
	.i1{   
    position:absolute;
    top:20px;
    right:70px;
		}
		.i2{   
    position:absolute;
    top:40px;
    right:140px;
		}
		.i3{   
    position:absolute;
    top:60px;
    right:210px;
    }

</style>
<div id="blockIMG">
	<img alt="1" id="img1" class="i1" src="https://javascript.ru/cat/list/dom.gif">
	<img alt="2" id="img2" class="i2" src="https://javascript.ru/cat/list/event.gif">
	<img alt="3" id="img3" class="i3" src="https://javascript.ru/cat/list/donkey.gif">
</div>
<div id="hovAct"></div>
<script>
	var imgData = {
		img1: {
			name: 'название-1',
			diskr: 'описание-1'
		},
		img2: {
			name: 'название-2',
			diskr: 'описание-2'
		},
		img3: {
			name: 'название-3',
			diskr: 'описание-3'
		}
	};
	var hovAct = document.querySelector('#hovAct');
	document.body.addEventListener('mouseover', e => {
		hovAct.className = e.target.className;
		hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : ''
	});
	document.body.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');

</script>