0

画像を含む選択リストを含む Web ページを開発しています。私はすでにこれを持っています：

リストで画像名を選択すると、その画像が下の div に表示されます。

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

選択リストで下に移動すると、選択リストでクリックしたときではなく、画像が変更されます。

4

1 に答える 1

0

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.

于 2013-09-06T06:51:55.337 に答える