Pulling my hair out

B

Barney Rubble

help please......

I have the following script. I would like to remove the images (plus.png
and minus.png).

I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
each time I do, the menu no longer expands. I have tried removing various
elements in the <script> areas, but nothing works for me. Any ideas please?

Thanks,

Abe



Here is the page, with script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Example Menu</title>
<script>
var myvar;
function menuinit() {
document.getElementById('m1').style.display = 'none';
document.getElementById('m2').style.display = 'none';
document.getElementById('m3').style.display = 'none';
document.getElementById('pm1').src = 'plus.png';
document.getElementById('pm2').src = 'plus.png';
document.getElementById('pm3').src = 'plus.png';
}
function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById('p' + i).src = 'plus.png';
document.getElementById(i).style.display = 'none';
myvar = '';
}
else {
document.getElementById('p' + i).src = 'minus.png';
document.getElementById(i).style.display = 'block';
myvar = i;
}
}
</script>
<style>
#nav {
width: 10em;
}
#nav, #nav ul, #nav li {
margin: 0;
padding: 0;
list-style: none;
}
#nav a {
display: block;
height: 1.2em;
width: 100%;
padding: 0.25em;
text-decoration: none;
}
#nav a.span {
color: white;
background-color: #008;
position: relative;
}
#nav a.span:hover {
color: black;
background-color: #CCF;
}
#nav a.span img {
position: absolute;
top: 2px;
right: 2px;
border: 0;
}
#nav li {
border: thin solid white;
clear: both;
}
#nav li ul li {
font-size: 85%;
border: none;
}
#nav li ul li a {
color: white;
background-color: #00C;
}
#nav li ul li a:hover {
color: black;
background-color: #CCF;
}
</style>
<body onload="menuinit();">
<ul id="nav">
<li>
<a href="#" class="span"
onclick="menuexpand('m1');return false;">Menu 1<img id="pm1" src=""
alt=""></a>
<ul id="m1">

<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 1c</a></li>
<li><a href="#">Item 1d</a></li>
</ul>
</li>
<li>

<a href="#" class="span"
onclick="menuexpand('m2');return false;">Menu 2<img id="pm2" src=""
alt=""></a>
<ul id="m2">
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item 2c</a></li>
<li><a href="#">Item 2d</a></li>

</ul>
</li>
<li>
<a href="#" class="span"
onclick="menuexpand('m3');return false;">Menu 3<img id="pm3" src=""
alt=""></a>
<ul id="m3">
<li><a href="#">Item 3a</a></li>
<li><a href="#">Item 3b</a></li>

<li><a href="#">Item 3c</a></li>
<li><a href="#">Item 3d</a></li>
</ul>
</li>
</ul>
</body>
 
G

GArlington

help please......

I have the following script. I would like to remove the images (plus.png
and minus.png).

I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
each time I do, the menu no longer expands. I have tried removing various
elements in the <script> areas, but nothing works for me. Any ideas please?

Thanks,

Abe

Here is the page, with script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Example Menu</title>
<script>
var myvar;
function menuinit() {
document.getElementById('m1').style.display = 'none';
document.getElementById('m2').style.display = 'none';
document.getElementById('m3').style.display = 'none';
document.getElementById('pm1').src = 'plus.png';
document.getElementById('pm2').src = 'plus.png';
document.getElementById('pm3').src = 'plus.png';}

function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById('p' + i).src = 'plus.png';
document.getElementById(i).style.display = 'none';
myvar = '';
}
else {
document.getElementById('p' + i).src = 'minus.png';
document.getElementById(i).style.display = 'block';
myvar = i;
}}

</script>
Click to expand...
<body onload="menuinit();">
<ul id="nav">
<li>
<a href="#" class="span"
onclick="menuexpand('m1');return false;">Menu 1<img id="pm1" src=""
alt=""></a>
<ul id="m1">

<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 1c</a></li>
<li><a href="#">Item 1d</a></li>
</ul>
</li>
Click to expand...
</ul>
</body>
Click to expand...

You should consider learning javascript...
And note: when your page runs with javascript errors it stops at the
first error and DOES NOT run the script any further...
IF you understand that you will understand why removing the item
referenced in your javascript will stop this script from running...
 
M

marss

I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
each time I do, the menu no longer expands. I have tried removing various
elements in the <script> areas, but nothing works for me. Any ideas please?
Click to expand...

Remove following lines:

document.getElementById('pm1').src = 'plus.png';
document.getElementById('pm2').src = 'plus.png';
document.getElementById('pm3').src = 'plus.png';
....
document.getElementById('p' + i).src = 'plus.png';
....
document.getElementById('p' + i).src = 'minus.png';

Mykola
http://marss.co.ua
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Align separate li to right 2
Working on mobile css menu with plenty of frustration! 2
Align img inside nav tabs section 5
Buttons lining up 1
Need help with code on website (noob) 2
Survey details won't go through using php, ajax, Mysql 0
Only one table shows up with the information 2

Members online

No members online now.
Total: 53 (members: 0, guests: 53)
Robots: 111

Forum statistics

Threads
473,968
Messages
2,570,153
Members
46,699
Latest member
AnneRosen

Latest Threads

Top