У меня есть простая HTML-страница:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
<a href="javascript:window.print();">Print Page</a>
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
<a href="#" onclick="return showEmailToFriendPopup();" class="vi_link">Email to a Freind</a>
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
<a href="#">Add to Favorites</a>
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
Мне нужно показать меню в скрытом элементе div рядом с кнопкой (справа) над другим текстом и элементами на странице. Кроме того, меню должно отображаться до тех пор, пока не будет нажата кнопка мыши или меню, как при наведении курсора в службе AddThis.
Кто может мне помочь с JavaScript?
Спасибо!