Question

我有以下显示菜单的脚本。

<script language="JavaScript">
   m_route_lijst_width = '90%';
   function toon_menu (id) {
     //alert (document.getElementById(id).offsetHeight);
     if (document.getElementById(id).offsetHeight > 45) {
        document.getElementById(id).style.height = '22px';  
        document.getElementById(id).style.width = '22px';
        document.getElementById(id).style.overflow = 'hidden';
        document.getElementById('copyright').style.visibility = 'hidden';
     } else {
        document.getElementById(id).style.height = '80%';   
        document.getElementById(id).style.width = m_route_lijst_width;      
        document.getElementById(id).style.overflow = 'auto';
        document.getElementById('copyright').style.visibility = 'visible';}
     } // function
</script>

首先菜单很小，只有一个小图像。（在彩色按钮下方）单击该图像时，会显示一个更大的菜单，其中包含要选择的项目（gpx文件）

如果选择了某个项目，这些项目将显示在地图上（使用传单脚本），菜单将再次变小，再次显示小图像。使用：

<div onclick="toon_menu('route_lijst');">
  <h2>
    <img src="img/wandelaar.png" alt="Klik op de knop om alle routes te tonen of om ze weer te verbergen" title="Klik op de knop om alle routes te tonen of om ze weer te verbergen" name="route_lijst_icon" id="route_lijst_icon" width="22" height="22" border="0">
    <span id="route_lijst_titel" class="route_lijst_titel">Wandelroutes</span>
  </h2>
</div>

当大菜单有很多项目并因此在右侧滚动条并且您选择底部的项目时，菜单仍然会变小，但不会显示想要的图像。

而不是图像，其中一个项目有一些文字。

在索引页面上它按预期工作，选择一个项目在地图上显示路线，在左边是一个小步骤，里面有行人图像。

在自行车的页面上它没有按预期工作 - 选择小行人显示完整菜单但是当我在底部选择一个项目（向下滚动）后，左边没有小行人但是有一些项目的文字来自菜单。然而，选择列表顶部的项目工作正常。

如何强制我的菜单显示图片而不是文字？

在我的测试页面上，您可以看到我的意思。

http://westera0.home.xs4all.nl/

我的css文件看起来像这样

部分.route_lijst是菜单完全显示的部分

body {
   font: 12px/1.5 Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px; 
}

.map {
   position: absolute; 
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px; 
}

.soort_route {
   position: absolute;
   top: 10px;
   left: 55px;
   width: 550px;
   height: 44px;
   overflow: hidden;
   box-shadow: 0 1px 7px #999;
   background: #ceeca8;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   padding: 8px;
   z-index: 100; 
}

.route_lijst {
   position: absolute;
   top: 85px;
   left: 55px;
   width: 22px;
   height: 22px;    
   overflow: hidden;
   box-shadow: 0 1px 7px #999;
   background: #f8f8f9;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   padding: 8px;
   z-index:100; 
}

.route_lijst h2 {
   padding: 0;
   margin: 0; 
}

.route_info {
   margin: 2px;
   padding: 6px;
   background-color:#eee;
   width: 265px;
   float: left;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px; 
}

.route_knop {
   display: inline-block;
   width:100%;
   height:100%; 
}

.route_lijst_titel {
   vertical-align: top; 
}

从具有许多项目的菜单中选择后图像未显示

0 个答案: