CSS меню или сценарий не работают, т.е.

Question

спасибо всем, кто может мне помочь!

У меня есть меню CSS на php, и я использовал этот скрипт на 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>

и меню:

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

И ЗДЕСЬ 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;
}

Здесь ошибка image И это прекрасно работает на Chrome, но нет в IE, какие-либо идеи ???Я действительно не знаю, где искать!

Answer 1

Я только что читал о людях, которые жалуются на то, что все рекомендуют jQuery (или какую-то другую инфраструктуру javascript), но это именно то, для чего они используются ... чтобы абстрагироваться от внутренних различий в реализациях javascript.

Итак, без лишних слов, я представляю вам ваше решение jQuery.

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

Вы могли бы сделать этот шаг дальше, удалить встроенный щелчок и сделать ...

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

Почему элемент ul определяется дважды? И первый раз за пределами стола. Ваш HTML кажется сломанным, что может привести к различиям между браузерами.

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

Answer 3

Попробуйте использовать innerHTML свойство вместо 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;
 }
}