Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Replace text with images on menu

    Hello,

    I want to replace the text headings with images. I have tried adding an 'img scr' tag but then the menu won't expand. I got the code from here The JavaScript Source: Navigation : Expanding Menu

    I would appreciate any help.
    Last edited by Cantaloupe; 12-21-2011 at 12:18 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    Is this what you want to do?
    Code:
    <html>
    <head>
    <title> Image Menu </title>
    <!-- Paste this code into the CSS section of your HTML document  -->
    <style type="text/css">
    ul#menu {
      list-style-type: none;
      border-top: solid 1px #b9a894;
      margin: 0;
      padding: 0;
    }
    
    ul#menu ol {
      display: none;
      list-style-type: none;
      margin: 0;
      padding: 15px;
    }
    
    ul#menu li, 
      ul#menu a {
      font-family: verdana, sans-serif;
      font-size: 11px;
      color: #785a3c;
    }
    
    ul#menu li {
      border-bottom: solid 1px #b9a894;
      line-height: 15px;
    }
    
    ul#menu ol li {
      border-bottom: none;
    }
    
    ul#menu ol li:before {
      content: "- ";
    }
    
    ul#menu a {
      text-decoration: none;
      outline: none;
    }
    
    ul#menu a:hover {
      color: #539dbc;
    }
    
    ul#menu a.active {
      color: #be5028;
    }
    
    </style>
    
    <!-- Paste this code into an external JavaScript file named: expandingMenu.js  -->
    <script type="text/javascript">
    
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
    version date: 06/02/03 :: If want to use this code, feel free to do so,
    but please leave this message intact. (Travis Beckham) */
    
    // Node Functions
    
    if(!window.Node){
      var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }
    
    function checkNode(node, filter){
      return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
    }
    
    function getChildren(node, filter){
      var result = new Array();
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        if(checkNode(children[i], filter)) result[result.length] = children[i];
      }
      return result;
    }
    
    function getChildrenByElement(node){
      return getChildren(node, "ELEMENT_NODE");
    }
    
    function getFirstChild(node, filter){
      var child;
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        child = children[i];
        if(checkNode(child, filter)) return child;
      }
      return null;
    }
    
    function getFirstChildByText(node){
      return getFirstChild(node, "TEXT_NODE");
    }
    
    function getNextSibling(node, filter){
      for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
        if(checkNode(sibling, filter)) return sibling;
      }
      return null;
    }
    function getNextSiblingByElement(node){
            return getNextSibling(node, "ELEMENT_NODE");
    }
    
    // Menu Functions & Properties
    
    var activeMenu = null;
    
    function showMenu() {
      if(activeMenu){
        activeMenu.className = "";
        getNextSiblingByElement(activeMenu).style.display = "none";
      }
      if(this == activeMenu){
        activeMenu = null;
      } else {
        this.className = "active";
        getNextSiblingByElement(this).style.display = "block";
        activeMenu = this;
      }
      return false;
    }
    
    function initMenu(){
      var menus, menu, text, a, i;
      menus = getChildrenByElement(document.getElementById("menu"));
      for(i = 0; i < menus.length; i++){
        menu = menus[i];
        text = getFirstChildByText(menu);
        a = document.createElement("a");
        menu.replaceChild(a, text);
        a.appendChild(text);
        a.href = "#";
        a.onclick = showMenu;
        a.onfocus = function(){this.blur()};
      }
    }
    
    if(document.createElement) window.onload = initMenu;
    </script>
    
    
    <!-- Paste this code into the HEAD section of your HTML document.
         You may need to change the path of the file.  -->
    
    <!-- script type="text/javascript" src="expandingMenu.js"></script -->
    
    </head>
    <body>
    <!-- Paste this code into the BODY section of your HTML document  -->
    <form name="myForm" action="" method="" onsubmit="return false">
    
    <div id="mainMenu" style="width:200px">
     <ul id="menu">
      <li>Menu Item 1
        <ol>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" height="30" width="25">
           <a href="#">Sub Item 1.1</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" height="30" width="25">
           <a href="#">Sub Item 1.2</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg" height="30" width="25">
           <a href="#">Sub Item 1.3</a></li>
        </ol>
      </li>
      <li>Menu Item 2
        <ol>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg" height="30" width="25">
           <a href="#">Sub Item 2.1</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/15.jpg" height="30" width="25">
           <a href="#">Sub Item 2.2</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/21.jpg" height="30" width="25">
           <a href="#">Sub Item 2.3</a></li>
        </ol>
      </li>
      <li>Menu Item 3
        <ol>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/22.jpg" height="30" width="25">
           <a href="#">Sub Item 3.1</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/23.jpg" height="30" width="25">
           <a href="#">Sub Item 3.2</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/24.jpg" height="30" width="25">
           <a href="#">Sub Item 3.3</a></li>
        </ol>
      </li>
      <li>Menu Item 4
        <ol>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/25.jpg" height="30" width="25">
           <a href="#">Sub Item 4.1</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/31.jpg" height="30" width="25">
           <a href="#">Sub Item 4.2</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/32.jpg" height="30" width="25">
           <a href="#">Sub Item 4.3</a></li>
        </ol>
      </li>
      <li>Menu Item 5
        <ol>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/33.jpg" height="30" width="25">
           <a href="#">Sub Item 5.1</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/34.jpg" height="30" width="25">
           <a href="#">Sub Item 5.2</a></li>
          <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/35.jpg" height="30" width="25">
           <a href="#">Sub Item 5.3</a></li>
        </ol>
      </li>
     </ul>
    </div>
    
    <p><div align="center">
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </div><p>
    </form>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Almost. I am trying to get images on the menu headings as well as on the sub-menus. When I try it like below, the menu stops working.

    Code:
    <li><img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" height="30" width="25" alt="Menu Item 1"><li>
        <ol>
          <li><a href="http://www.google.com/"><img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" height="30" width="25" alt="Sub Item 1.1></a></li>
          <li><a href="http://www.google.com/"><img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" height="30" width="25" alt="Sub Item 1.2"></a></li>
          <li><a href="http://www.google.com/"><img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg" height="30" width="25" alt="Sub Item 1.3"></a></li>
        </ol>
      </li>

  • #4
    New Coder
    Join Date
    Apr 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found a CSS script.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Cantaloupe View Post
    I found a CSS script.
    Care to share?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •