CSS菜单或脚本不起作用，即

Question

thanks to anyone that can help me!

I have a css menu on a php and I've used this script on the html:

<script type="text/javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('imgContenedor').src = whichpic.href;
  if (whichpic.title) {
      document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>

and the menu:

<div id="subopciones" class="menudesp">

        <table border="0" id="tabla_submenu" cellpadding="0" cellspacing="0">
            <tr>
    <td id='celda_submenu'><li><a href="" id='opcion_submenu' >Mobiliario Urbano</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano01.jpg">&nbsp Circuito Espectacular Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano02.jpg">&nbsp Circuito Oppi Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano03.jpg">&nbsp Circuito Mupi Urbano Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano04.jpg">&nbsp Circuito Mupi Central Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano05.jpg">&nbsp Circuito Mupi Premium Barcelona</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='' id='opcion_submenu' >Transporte</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/transporte01.jpg">&nbsp Buses Urbanos Palma de Mallorca</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/transporte02.jpg">&nbsp Vehículos Promocionales</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=digital' id='opcion_submenu' >Digital Gran Formato</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/digital01.jpg">&nbsp Pantallas</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=transportes' id='opcion_submenu' >Nieve</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve01.jpg">&nbsp Circuito Vallas Montaña</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve02.jpg">&nbsp Circuito Oppis Montaña</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve03.jpg">&nbsp Circuito Pilonas</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve04.jpg">&nbsp Lonas Montaña</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=espectacular' id='opcion_submenu' >Zonas de Ocio</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/zonas01.jpg">&nbsp Circuito Parques de Ocio</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/zonas02.jpg">&nbsp Centros Comerciales</a></li>
        </ul>
    </li></td>
            </tr>

        </table>
</div>

AND HERE THE CSS

ul{
  margin:0;
  padding:0;
}

.menudesp li {
    display:block !important;
    position:relative;
    font-size:12px;
    color:#000000;
    width:100%;
    height:23px;
    line-height:23px;
    background-color:#EDEDED;
    text-align:left;
}



.menudesp li a {
color: #000000;
font-size:10px;
display: block;
position: relative;
width: 180px;
}

.menudesp li a:hover {
color: #000;
}


.menudesp li ul {
display: none;
padding: 10px 0;
position: absolute;
margin: -8px 0px;
}

.menudesp li:hover ul {
display: block;
}

/*
.menudesp li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}*/

.menudesp li ul li a{
color: #444;
}

.menudesp li ul li a:hover {
color: #000;
}

.menudesp li a:hover {
color: #000;
}li a:hover {
color: #000;
} {
color: #000;
}lor: #000;
}

Here the error image And it WORKS great on chrome, but no in IE, any ideas??? I really don't know where to look!

Answer 1

Try to use innerHTML property instead of nodeValue :

function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('imgContenedor').src = whichpic.href;
  if (whichpic.title) {
      document.getElementById('imgDescripcion').innerHTML = whichpic.innerHTML;
  }
  return false;
 } else {
  return true;
 }
}

Answer 2

I was just reading about people complaining about everyone recommending jQuery (or some other javascript framework), but this is exactly what they're used for... to abstract away the inherent differences in javascript implementations.

So without further ado, I present to you, your jQuery solution.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
function showPic (whichpic) {

 var wpic = jQuery(whichpic); // make our object jQuerified

 jQuery('#imgContenedor').attr("src", wpic.attr("href"); // Set our image container

 jQuery('#imgDescripcion').html(wpic.html()); // Set our image description

  return false;
}
</script>

You could take this a step further, and remove the inline onclick and do...

<script type="text/javascript">
  jQuery("#celda_submenu li<a").click(showPic); // This will bind to all anchor (a) elements nested below an li inside an element with celda_submenu as the id.
</script>

Answer 3

Why is the ul element defined twice? And the first time is outside the table. Your HTML seems to be broken, which may definitely cause differences between browsers.

<div id="subopciones" class="menudesp">
        <table border="0" id="tabla_submenu" cellpadding="0" cellspacing="0">
            <tr>
    <td id='celda_submenu'><li><a href="" id='opcion_submenu' >Mobiliario Urbano</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano01.jpg">&nbsp Circuito Espectacular Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano02.jpg">&nbsp Circuito Oppi Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano03.jpg">&nbsp Circuito Mupi Urbano Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano04.jpg">&nbsp Circuito Mupi Central Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano05.jpg">&nbsp Circuito Mupi Premium Barcelona</a></li>
        </ul>
    </li></td>
            </tr>

        </table>