[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Remove / Hide Images in Javascript

Posted on 2004-11-04
19
Medium Priority
?
3,980 Views
Last Modified: 2012-05-05
I'm using a bit of software that generates web pages through perl scripts.  I'm very limited as to what I can change in the back end code and I'm trying to get something to display in a specific way but it's not working for me.  Here's what I'm trying to accomplish:

System outputs:

      Option 1: <SELECT NAME="v_8_1"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>
      <br>
      Option 2: <SELECT NAME="v_8_2"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>
      <br>
      Option 3: <SELECT NAME="v_8_3"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>
      <br>

Which I want to display like this (Image only displayed on last option):

      Option 1: <SELECT NAME="v_8_1"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <br>
      Option 2: <SELECT NAME="v_8_2"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <br>
      Option 3: <SELECT NAME="v_8_3"><OPTION VALUE=1 SELECTED>Info 1<OPTION VALUE=2>Info 2</SELECT>
      <img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>
      <br>
      

I can change that particular image so that some javascript is run instead:

      <script language="javascript">
      <!--
            function InsertImage()
            {
            document.write("<img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>");
            }

      //-->

Which is run using this in place of the image tag:

      language="javascript">
      <!--
            InsertImage();
      //-->


The problem is that whilst I can do this, I can't work out a way of getting it to output the image after the last <select> tag.  My thought is that I can have a counter that's updated every time the code is run and a later bit of code that goes back and hide the images that I dont want (Pseudo code):

      <script language="javascript">
      <!--
            intCounterValue = 0;
            
            function InsertImage()
            {
                  intCounterValue ++;
                  document.write("<img name='InfoOptions" + intCounterValue + "' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>");
            }
            
            function RemoveImages()
            // I can call this after all of the select options are inserted, I have a place I can put the code and have it output into the html
            {
                  for 0 to intCounterValue - 1
                        remove image tags
                  next
            }
      //-->


Sorry if my code doesn't make much sense, I dont' really use javascript that much so I'm not sure how to do what I want to.
0
Comment
Question by:Psychotext
  • 9
  • 5
  • 5
19 Comments
 
LVL 2

Author Comment

by:Psychotext
ID: 12494370
Related, I just used "style='display:none;'" to turn the images off initially and that worked.  Maybe I could just turn the last one on somehow.  Is this method going to cause me any problems in old browsers?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12494561
cnt=0
for (i=0;i<document.images.length;i++) {
  if (document.images[i].name=='InfoOptions')   cnt=i
}
for (i=0;i<document.images.length;i++) {
  if (document.images[i].name=='InfoOptions' &&  cnt!=i)
  if (document.images[i].style) document.images[i].style.display='none'
  else document.images[i].src='blank.gif'
}

Michel
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 800 total points
ID: 12494571
or as you suggest:


cnt=0
for (i=0;i<document.images.length;i++) {
  if (document.images[i].name=='InfoOptions')   cnt=i
}
if (document.images[cnt].style) document.images[cnt].style.display='block'
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:wzd3
ID: 12494576
I assume that you mean you can not change the perl script to output something different on the last select.  I also assume that you know how many selects there are.  If so, then a simple counter will work.  Just change your code to:



     <script language="javascript">
     <!--
      var someUniqueCounter = 3;
          function InsertImage()
          {
           --someUniqueCounter;
           if (someUniqueCounter == 0)
              document.write("<img name='InfoOptions' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>");
          }

     //-->

Do the function call just like you did.  Be sure to use a unique counter name for each image, if there are more than one.

wzd
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12494652
Unfortunately I can't tell how many selects there will be as it's dynamic.
0
 
LVL 3

Accepted Solution

by:
wzd3 earned 1200 total points
ID: 12494778
Then your second bit of code would work.  Just set it to always turn off the previous image like:

    <script language="javascript">
     <!--
          intCounterValue = 0;
         
          function InsertImage()
          {
               intCounterValue ++;
               document.write("<img name='InfoOptions" + intCounterValue + "' src='extrainfo.gif' width='88' height='22' border='0' alt='Extra Information' align='absbottom'>");
               
               // if not the first image, remove the previous image
               if (intCounterValue > 1)
                              remove image "InfoOptions" + intCounterValue + "' however you like (style, blank.gif, etc)
           }
This will always put in an image, and if it is not the first image, remove the previous image.  No extra code or loops at the end.
             
          }
0
 
LVL 3

Expert Comment

by:wzd3
ID: 12494846
submitted too fast.  The remove code should be + (intCounterValue-1)
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12494856
mplungjan:  That second set of code you have seemed to work in everything bar Opera 6.06 (Which I'm not sure concerns me).  I'll try the first code instead and see how that does.
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12495798
mplungjan:  First set doesn't work properly in Opera again (Stupid Opera).  I think I prefer doing it that way though, I'd rather have loads of buttons than none.

wzd3:  That works fine, same Opera problem, but that's just something I'm going to have to work out.

Just going to leave question open for a couple of hours to see if anyone has any differing opinions.  Thanks both.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12496609
Perhaps opera wants the display set as attributes before you are allowed to change it
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12499702
Sorry, I'm not sure what you mean.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12510453
Did you have
display:block

in a style on the image?
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12510517
I understand.  I'll give that a try thanks.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12510526
I am off to bed.
Have a look here too

http://www.google.com/search?q=display+block+none+opera
0
 
LVL 3

Expert Comment

by:wzd3
ID: 12511445
I don't have opera, but do the display toggle buttons on  http://www.quirksmode.org/js/blockinvi.html work on the opera version you are using?
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12512608
The visible / invisible paragraphs work, but the block / none does not.  Tried it with the display:block set initially but it didn't work then.  Must be just a limitation of the browser.  On a positive note, most Opera users keep their browser well updated so it shouldn't be too much of an issue anyway.
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12512626
This link may provide a solution: http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=14

Will report back in next couple of days.
0
 
LVL 3

Expert Comment

by:wzd3
ID: 12515039
It looks like that link confirms what the test you did shows.  From your link:

WARNING: NETSCAPE 4, ESCAPE, OPERA 6-, OMNIWEB 4.2- AND CLUE BROWSER SUPPORT THE display: none; STYLE, BUT DO NOT ALLOW JAVASCRIPT TO CHANGE IT.
0
 
LVL 2

Author Comment

by:Psychotext
ID: 12519903
Yes, it is possible to use myReference.style.visibility = 'hidden'; or myReference.visibility = 'hide'; but neither quite works the same as changine the display style.  Might add it in as an Opera workaround if the site stats show any Opera 6 users in the visitor logs.

Have awarded points to both as all solutions were good.  Thanks.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question