View Full Version : Resolved Replace text with images on menu

12-19-2011, 02:06 AM

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 (http://javascriptsource.com/navigation/expanding-menu.html#source)

I would appreciate any help.

12-19-2011, 03:25 AM
Is this what you want to do?

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


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

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() {
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.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};

if(document.createElement) window.onload = initMenu;

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

<!-- 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
<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>
<li>Menu Item 2
<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>
<li>Menu Item 3
<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>
<li>Menu Item 4
<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>
<li>Menu Item 5
<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>

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


12-19-2011, 04:57 AM
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.

<li><img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" height="30" width="25" alt="Menu Item 1"><li>
<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>

12-21-2011, 01:17 AM
I found a CSS script.

12-21-2011, 02:19 AM
I found a CSS script.

Care to share?