Remove / Hide Images in Javascript

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.
LVL 2
PsychotextAsked:
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.

PsychotextAuthor Commented:
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
Michel PlungjanIT ExpertCommented:
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
Michel PlungjanIT ExpertCommented:
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
Ultimate Tool Kit for Technology Solution Provider

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

wzd3Commented:
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
PsychotextAuthor Commented:
Unfortunately I can't tell how many selects there will be as it's dynamic.
0
wzd3Commented:
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

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
wzd3Commented:
submitted too fast.  The remove code should be + (intCounterValue-1)
0
PsychotextAuthor Commented:
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
PsychotextAuthor Commented:
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
Michel PlungjanIT ExpertCommented:
Perhaps opera wants the display set as attributes before you are allowed to change it
0
PsychotextAuthor Commented:
Sorry, I'm not sure what you mean.
0
Michel PlungjanIT ExpertCommented:
Did you have
display:block

in a style on the image?
0
PsychotextAuthor Commented:
I understand.  I'll give that a try thanks.
0
Michel PlungjanIT ExpertCommented:
I am off to bed.
Have a look here too

http://www.google.com/search?q=display+block+none+opera
0
wzd3Commented:
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
PsychotextAuthor Commented:
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
PsychotextAuthor Commented:
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
wzd3Commented:
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
PsychotextAuthor Commented:
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
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.