2 buttons to 1 toggle button ?

[Peuplarchie]

Good day to you all,
here is a question about making a show/hide toggle button instead of two separate button.

Here is my code :

function hide(li) {
       
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "none";
}

function show(li) {
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "block";
}

[TinyScript]

firefox solution
<script>
var count=0;
</script>
<img src="image.jpg" onclick="javascript:count++;if(count%2==0){this.style.opacity=1}else{this.style.opacity=0}">

[Philip M]

Using your existing code:-

<img src="togglelImageButton.gif" onclick = "toggle()" >

<script type = "text/javascript">
var count = 1;
function toggle(li) {
count ++;
if (count%2 == 0) {hide(li)}
else {show(li)}
}
</script>

"Normally the Pakistani police are armed with rifles and atomic weapons". - Political commentator.

[TinyScript]

try it. when you switch it to display none, you can't get a mouseover

[Peuplarchie]

but i need my image to change onclick and it didn't work.

[Philip M]

Not sure what does not work, nor the remark re mouseover, but in my script change
count = 0 to count = 1 i.e. first click will hide, second click will show etc.

[Peuplarchie]

not sure to understand the method, sorry, i'm learning, and want to learn.

I can see that it cont the click and if you can divide the count by 2 then show else hide.

I have tried this to call the onclick function :

   foreach($folders as $folder) {
      echo "<li><div class=\"folder\"><img src=\"plus_icon.gif\" onclick=\"toggle('".preg_replace('/\//','_',$dircor."".$folder)."'); return false;\" /><b>".$folder."</b></div>\n"; //echo the folder name enclosed in a list item
        dirList($directory.$folder.'/'); //loop through the contents of $folder
      echo "</li>\n"; //close this list item after all files and folders in $folder have been looped through 

and your code in the head section ?

[TinyScript]

Not sure what does not work, nor the remark re mouseover, but in my script change
count = 0 to count = 1 i.e. first click will hide, second click will show etc.

once it's gone, you can't click on it again to restore it.

<img id="li" src="image.jpg" onclick = "toggle(this.id)" >

<script type = "text/javascript">
function hide(li) {
       
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "none";
}

function show(li) {
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "block";
}
var count = 1;
function toggle(li) {
alert(li)
count ++;
if (count%2 == 0) {hide(li)}
else {show(li)}
}
</script>

what am I missing?

I used opacity to hid it since it will still be there, but see through so you CAN CLICK on it

<img id="li" src="image.jpg" onclick = "toggle(this.id)" >

<script type = "text/javascript">
function hide(li) {
       
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.opacity = 0;
}

function show(li) {
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.opacity = 1;
}
var count = 1;
function toggle(li) {
alert(li)
count ++;
if (count%2 == 0) {hide(li)}
else {show(li)}
}
</script>

[TinyScript]

here's the microsoft opacity filter
filter: progidXImageTransform.Microsoft.Alpha(opacity=70);

change the number to set
Google how to use it. I don't know about Microsoft crap.

[Philip M]

As I understand it the toggle is to be triggered by a button. In other words, not triggered by clicking on the image itself (which as you say is gone after the first click).

<div id = "li">
<img src="image.jpg">
<input type = "button" id = "but1" value = "Show/Hide This Image" onclick = "toggle()">
</div>


<script type = "text/javascript">

var count = 1;
function toggle(li) {
count ++;
if (count%2 == 0) {hide(li)}
else {show(li)}
}

[TinyScript]

ahh i misunderstood because of this

Good day to you all,
here is a question about making a show/hide toggle button instead of two separate button.

I guess I've never seen a an image turned off with one button and turned on with another
I mistook the objective altogether. My apologies.