• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 644
  • Last Modified:

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...
0
KIce
Asked:
KIce
  • 2
  • 2
  • 2
  • +2
1 Solution
 
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now