When I hover over the text, I want those images to become visible. However, it seems that only the first image is selected because they all have the same ID. Does anyone know how to solve this issue? This is my first post, so please forgive me if I made any mistakes in posting. Thank you in advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
img
{
position:absolute;
left:250px;
display:none;
}
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<table id="myTable">
<td>
<tr>
<ol id="selectable" onmouseover="show(next,true)" onmouseout="show(next,false)">
<li>Item 1 <img src="next.jpg" id="next"></li>
<li>Item 2 <img src="next.jpg" id="next"></li>
<li>Item 3 <img src="next.jpg" id="next"></li>
<li>Item 4 <img src="next.jpg" id="next"></li>
<li>Item 5 <img src="next.jpg" id="next"></li>
</ol>
</tr>
</td>
</table>
<script type = "text/javascript">
$(document).ready(function() {
$('#selectable').fadeIn('very slow');
});
</script>
<script language="javascript">
//function to display the immage
function show(id,disp) {
if (disp == true) {
id.style.display = "block";
}
if (disp == false) {
id.style.display = "none";
}
}
</script>
</body>
</html>