Форум

fascio27 · #1 (**permalink**) 16.12.2018, 17:04

Всем привет,как сделать ,чтобы при наведении на картинку появлялся текст ,а при нажатии появлялся другой текст.
Спасибо за внимание

j0hnik · #2 (**permalink**) 16.12.2018, 19:13

где появляться должен?

fascio27 · #3 (**permalink**) 16.12.2018, 19:25

j0hnik,
Да это не столь важно .Мне нужно сделать как бы карту с 3 элементами ,когда наводишь на них ,появляется название ,а когда нажимаешь описание.У меня карта ,это как бы весь фон страницы.
Вот ,что я сделал

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Карта Москвы.</title>
<link rel="stylesheet" href=rybka.css>
<style>
body{
		background: url('map.jpg') no-repeat;
	}
.iz1{	
	position:absolute;
	top:370px;
	right:970px;
	width:10px;
	height:10px;
	background:url('kvadr.png');
	}
.iz2{
	position:absolute;
	top:400px;
	right:1010px;
	width:10px;
	height:10px;
	background:url('kvadr.png');
	}
.iz3{
	position:absolute;
	top:485px;
	right:905px;
	width:10px;
	height:10px;
	background:url('kvadr.png');
	}
.opis1{
    
	}
.opis2{
    
	}
.opis3{
    
	}


</style>

</head>
<body>
	<div class="iz1">
		<div="opis1">
		Памятник конструктуру оружия Михаилу Колашникову
		</div>
	</div>
	<div class="iz2">
		<div class="opis2">
		Музей-квартира М.Булгакова
		</div>
	</div>
	<div class="iz3">
		<div="opis3">
		Красная площадь
		</div>
	</div>
	

 
</body>
</html>

j0hnik · #4 (**permalink**) 16.12.2018, 23:13

<div id="blockIMG">
		<img alt="1" id="img1" src="https://javascript.ru/cat/list/dom.gif">
		<img alt="2" id="img2" src="https://javascript.ru/cat/list/event.gif">
		<img alt="3" id="img3" 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 blockIMG = document.querySelector('#blockIMG'),
			hovAct = document.querySelector('#hovAct');
		blockIMG.addEventListener('mouseover', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : '');
		blockIMG.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');

	</script>

fascio27 · #5 (**permalink**) 24.12.2018, 07:26

Сообщение от j0hnik

<div id="blockIMG">
		<img alt="1" id="img1" src="https://javascript.ru/cat/list/dom.gif">
		<img alt="2" id="img2" src="https://javascript.ru/cat/list/event.gif">
		<img alt="3" id="img3" 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 blockIMG = document.querySelector('#blockIMG'),
			hovAct = document.querySelector('#hovAct');
		blockIMG.addEventListener('mouseover', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : '');
		blockIMG.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');

	</script>

Спасибо ,еще такой вопросик ,а как сделать ,чтобы название и описание тоже перемещались по координатам ,которые я указываю в этом классе,а то перемещается только картинка

.i1{   
    position:absolute;
    top:400px;
    right:910px;
    width:10px;
    height:10px;
    
    }

И еще почему-то в данной ситуации(когда я применяю class i1 ,название и описание не проходят ,если я убираю мышку)
Спасибо за внимание

j0hnik · #6 (**permalink**) 24.12.2018, 08:18

<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>

j0hnik · #7 (**permalink**) 24.12.2018, 08:22

если блок нужно отодвинуть используйте селектор div.i1 div.i2...

Форум

Справочник

Discord чат

Курсы javascript