Hide Image

I have what seems to be an easy question, but I can't figure out what I am doing wrong.  I have a image that is loaded and I want the image to be hidden when I click on a button.  There is more to the page but here is the code that I am having problems:

function ZoomIn(e) {
   
    if (IE4) {                    
        for (i=0; i<document.images.length; i++){
            whichIm = document.images[i];
whichIm.visibility = "hide";    
            zoomInPage();
            return false;


<A NAME="newimg"></A><IMG SRC="img1.jpg" ALIGN=LEFT WIDTH="290" HEIGHT="319" VSPACE="0" HSPACE="20" BORDER="0">

the top part is in javascript.  I've tried a couple of different ways to hide the photo but haven't been able to figureout the correct way.  Any ideas...
KIceAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kamalranjanCommented:
<script language="javascript">
function ZoomIn(e)
{
   if (IE4) {                      
       document.images["newimg"].visibility = "hide";    
       zoomInPage();
       return false;
    }
}
</script>

<IMG NAME="newimg" SRC="img1.jpg" ALIGN=LEFT WIDTH="290" HEIGHT="319" VSPACE="0" HSPACE="20" BORDER="0">
<form>
<input type="button" value="Click me to hide the image" onClick="ZoomIn()">
</form>
0
KIceAuthor Commented:
kamalranjan,

I tried your answer but it doesn't do anything.  I click on the button and nothing happens.  I tried the code on a separate page and it still didn't work.  Any ideas why?
0
PBallCommented:
document.images["...."].style.visibility = ...

don't forget to add the style part.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

kamalranjanCommented:
Hi KIce, try this and it works.

<HTML>
<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000 LINK=0000FF VLINK=800080>
<script language="javascript">
function ZoomIn(e)
{

       document.images["newimg"].style.display = "none";      
       zoomInPage();
       return false;
}
</script>

<IMG NAME="newimg" SRC="images/logo.jpg" ALIGN=LEFT VSPACE="0" HSPACE="20" BORDER="0">
<form>
<input type="button" value="Click me to hide the image" onClick="ZoomIn()">
</form>
</BODY>
</HTML>

Kamal Ranjan
0
KIceAuthor Commented:
PBall,

I tried what you suggested but nothing happened.  I also tried Kamal Ranjan suggestion and it works fine in IE but not in NS.  Is something about NS that makes it difficult to change things after the page is loaded?  Any suggestions?
0
PBallCommented:
Ah.. I was assuming IE :)

I don't do NS DHTML.  You might want to try enclosing that particular image in a DIV / LAYER instead and hide the div/layer instead of the image.

Either way, you will have to branch your code to IE/NS specific unless you can come up with your own cross-browser DOM.  See www.htmlguru.com site (which is cross-browser compatible).  You might get your answer there or netscape developer site.

I find NS DHTML is very lacking compared to IE's.
0
larholmCommented:
Make a 1x1 pixel transparent GIF picture and call it 'empty.gif'

Then use this:

<html>
<head>
<script language="Javascript">

function hideImage(which){
  document.images[which].src = 'empty.gif'
}

</script>
</head>
<body>

<IMG SRC="img1.jpg" ALIGN=LEFT WIDTH="290" HEIGHT="319" VSPACE="0" HSPACE="20" BORDER="0" NAME="newimg">

<IMG SRC="funny.jpg" ALIGN=LEFT WIDTH="290" HEIGHT="319" VSPACE="0" HSPACE="20" BORDER="0" NAME="funnyimg">

<form>
<input type="button" onclick="hideImage('newimg')" value="Click here to hide newimg">
<input type="button" onclick="hideImage('funnyimg')" value="Click here to hide funnyimg">
</form>

</body>
</html>

Get the idea? Just call the function hideImage() with the name of the image you want to hide.

Your problem was that you didn't name the image in the <img> tag.

This will work from Netscape 3 and IE 4, or any other browser capable of Javascript 1.1

/Thor
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
boycey19Commented:
Not a practical way of doing this. Try this bit of code.

<html>

<head>

<script language="JavaScript">
<!--

function toggle(e)
{
  if (e.style.display == "none") {
     e.style.display = "";
  }
 
  else {
     e.style.display = "none";
  }
}


//-->
</script>

</head>

<body>

<img src="picHere" id="image1" style="display:none;">

<form>

<input type="button" onClick="toggle(image1)" value="hide image">

</form>

</body>

</html>

Note: Only works in IE though.
-----

Boycey
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.