javascript - html 我需要用图形代替 vcr 控件的文本来控制数据库中的状态

Question

创建了一个录像机控制系统，可以检查日志并显示每个日志时系统的状态。它几乎工作得很好。

我刚买了一些录像机图形、开始、快进、后退等

我知道有一种简单的方法来添加它们，但是当我这样做时，它们的效果不如我的文本。例如我的图形是 next.png、back.png、forward.png

这是我的代码...

  <div id="footer" onmouseover='getElementById("vcr").style.visibility="visible"'  onmouseout='getElementById("vcr").style.visibility="hidden"' >
  <div id="timestamp"><pre> TIMESTAMP:<?php echo $datestamp['DTE 0'];?>, <?php echo $timestamp['DTE 0'];?></pre>
  </div>
  <?php if (strpos($_SERVER['HTTP_HOST'],'cadence')==0) {
            echo '<div id="vcr" style="display:none" >';
        } else {
            echo '<div id="vcr" style="visibility:hidden" >';
        }
  ?>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=C&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Current Status">Current_Status  </a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=Z&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Next Date">Date+</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=Y&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Previous Date">Date-</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=T&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="go to first entry">Top</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=F&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="go forward">Forward</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=N&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Next Change">NextChange</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=R&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Backward to previous entry">Reverse</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=P&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="Previous Change">PrevChange</a>
   <a href="/cgi-bin/apvcrlog.cgi?hostname=<?php echo $host ?>&type=B&date=<?php echo $datestamp['DTE 0']?>&time=<?php echo $timestamp['DTE 0']?>" title="go to Last Entry">Bottom    </a>
  </div>
  <div id='cadencelogo' title='Version: <?php echo $verall ?>' >
       <img src="images/logocadence.jpg" width="160" height="36">
  </div>

我还想为控件制作一个 div，当我在悬停停止工作之前做的时候，对此有什么想法吗？谢谢...

Answer 1

我冒昧地清理了代码，同时我希望这对你有用

<div id="footer" onmouseover='getElementById("vcr").style.visibility="visible"'  onmouseout='getElementById("vcr").style.visibility="hidden"' >
    <div id="timestamp">
        <pre> TIMESTAMP:<?php echo $datestamp['DTE 0'];?>, <?php echo $timestamp['DTE 0'];?></pre>
    </div>
    <?php 
        $style = "visibility:hidden";
        if (strpos($_SERVER['HTTP_HOST'],'cadence')==0) {
            $style = "display:none";
        }
        $href = "/cgi-bin/apvcrlog.cgi?hostname=".$host."&date=".$datestamp['DTE 0']."&time=".$timestamp['DTE 0'];
    ?>
    <div id="vcr" style="<?php echo $style ?>">
        <div id="controls">
           <a href="<?php echo $href ?>&type=C" title="Current Status">Current_Status</a>
           <a href="<?php echo $href ?>&type=Z" title="Next Date">Date+</a>
           <a href="<?php echo $href ?>&type=Y" title="Previous Date">Date-</a>
           <a href="<?php echo $href ?>&type=T" title="go to first entry">Top</a>
           <a href="<?php echo $href ?>&type=F" title="go forward">
                <img src="forward.png"/>
           </a>
           <a href="<?php echo $href ?>&type=N" title="Next Change">
                <img src="next.png"/>
           </a>
           <a href="<?php echo $href ?>&type=R" title="Backward to previous entry">
                <img src="back.png"/>
           </a>
           <a href="<?php echo $href ?>&type=P" title="Previous Change">PrevChange</a>
           <a href="<?php echo $href ?>&type=B" title="go to Last Entry">Bottom    </a>
        </div>
    </div>
    <div id='cadencelogo' title='Version: <?php echo $verall ?>' >
       <img src="images/logocadence.jpg" width="160" height="36">
    </div>
</div>