Select list move down - php

Question

I'm developing a webpage with a select list that contains images.
I already have this:
When I select an image name in the list the image will be displayed in the div below.
<?php
// Create connection
$con=mysqli_connect("******","***","***","charts");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
<form method="post" action="index.php" id="nano" name="nano">
<p>
<select name="SelectBox" id="SelectBox" onchange="this.form.submit()">
<?php if($_POST['submitted'] == true){ ?>
<?php
$result = mysqli_query($con,"SELECT * FROM Nano WHERE IMAGE_NAME ='". $_POST['SelectBox']."'");
while($row = mysqli_fetch_array($result))
{ ?>
<option selected="selected" value="<?php echo $row['IMAGE_NAME'] ?>">
<?php echo $row['IMAGE_PARAMETER'] ?>
</option>
<?php } ?>
<?php echo $_POST['SelectBox']; ?></option>
<?php } else{ ?>
<?php
$result = mysqli_query($con,"SELECT TOP * FROM Nano");
while($row = mysqli_fetch_array($result))
{
?>
<option selected="selected" value="<?php echo $row['IMAGE_NAME'] ?>">
<?php echo $row['IMAGE_PARAMETER'] ?>
</option>
<?php
$var1 = $row['IMAGE_NAME']; ?>
<?php
}
?>
<?php } ?>
<option value="" disabled="disabled"> -------- </option>
<?php
$result = mysqli_query($con,"SELECT * FROM Nano");
while($row = mysqli_fetch_array($result))
{ $values[] = $row['IMAGE_NAME'];
?>
<option value="<?php echo $row['IMAGE_NAME'] ?>">
<?php echo $row['IMAGE_PARAMETER'] ?>
</option>
<?php }?>
</select>
<input type="hidden" name="submitted" id="submitted" value="true" />
</p>
<?php if($_POST['submitted'] == true){ ?>
<p><img src="Images\Nano\<?php echo $_POST['SelectBox']?>" width="953" height="600" /></p>
<?php }else { ?>
<p><img src="Images\Nano\<?php print_r($values[0]) ?>" width="953" height="600" /></p>
<?php } mysqli_close($con);?>
</form>
</div>
I want when I move down in the select list the picture will change and not when I click on it in the select list.

Answer 1

In your case, you have to bind hover event to option, but there is no way to do what you want using native select control. The native one only answers when you click a different option from previous.
However, you can simulate a select control using html&css&js, that way when your cursor move down the simulated option(which might be a div or something), you can bind event handlers to it and display the name.