Javascript-форум - помогите уже месяц не могу понять как это сделать...

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - помогите уже месяц не могу понять как это сделать... (https://javascript.ru/forum/misc/16531-pomogite-uzhe-mesyac-ne-mogu-ponyat-kak-ehto-sdelat.html)

помогите уже месяц не могу понять как это сделать...

:help: Мне нужно создать такой казалось бы простой эффект когда при наведении курсора мыши на файл(картинку)она меняла стиль ,а при нажатии ,снизу выходил текст
заранее спасибо):help:

Событие onmouseover срабатывает при наведение мыши.
Пример:

<a href="#" onmouseover="myFunc();">blablabla</a>

Событие onclick срабатывает при клике

<a href="#" onclick="myFunc();">blablabla</a>

Свойство элемента className позволяет менять класс.

<a href="#" onclick="myFunc();" id="bla">blablabla</a>
<script>
document.getElementById('bla').className = 'myClass';
</script>

Цитата:

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

уже месяц не могу понять как это сделать

чем вы занимались целый месяц?

Цитата:

Сообщение от monolithed (Сообщение 100396)

чем вы занимались целый месяц?

Думал. Пытался понять. Сам. В комнате без окон и дверей. И без компа))

ну ок не месяц а неделю)
я знаю есть 2 кода
1-ый котрый меняет стиль
<html>
<head>
</head>
<body>
<a href="http://scriptic.narod.ru" onmouseout="document.mypic.src='imj/qwerty.png'" onmouseover="document.mypic.src='imj/qwerty2.png'"><IMG border="0" name="mypic" src="imj/qwerty.png"></a><br>
</body>
</html>
Второй выводит текст с низу
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Динамика в красках</title>

<script type="text/javascript">

function otkr(){
var text = document.getElementById('text');
if(text.style.display == 'none')
{
text.style.display = 'block';
}
else
{
text.style.display = 'none';
}
}

function zakr(){
var text = document.getElementById('text');
text.style.display = 'none';
}

</script>

<style type="text/css">
.poiasnenie{
color: #475CBF;
text-decoration:none;
border-bottom:dashed 0px #475CBF;
}
</style>

</head>

<body>

<table>
<tr>
<td>
<a href="#" class="poiasnenie" onclick="otkr()">
<img src="file:///C:/Users/user/Desktop/%D0%A1%D0%90%D0%99%D0%A2/%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D 1%86%D0%B8%D1%8F/imj/qwerty.png"width="200px" height="80px"border="0">
</a>
<div id="text" style="display:none" onclick="zakr()">
<em>Пояснение данного пунтка</em>
</div>
</td>
</tr>
<tr>
<td>Второй пункт</td>
</tr>
<tr>
<td>Третий пункт</td>
</tr>
</table>

</body>
</html>
напишите как их объеденить

для начала надо бы поместить всё это добро в тег [html]