Solved

Check this code: Images fail as buttons

Posted on 2002-07-10
11
212 Views
Last Modified: 2010-05-18
****** Code Moved to JavaScript ********

Hello All-

I found a script that pre-loads images and has a next and prev button for navigation. When replacing the buttons with images the entire script fails. Putting the buttons back, the script loads. I have posted the entire code here with the images commented out:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<script language="JavaScript">
var Slides = new Array('images/HolidayCover.jpg','images/HolidayIntro.jpg','images/Holiday3.jpg','images/Holiday4.jpg','images/Holiday5.jpg','images/Holiday6.jpg','images/Holiday7.jpg','images/Holiday8.jpg','images/Holiday9.jpg','images/Holiday10.jpg','images/Holiday11.jpg','images/Holiday12.jpg','images/Holiday13.jpg','images/Holiday14.jpg','images/HolidayOrder.jpg','images/HolidayPriceList.jpg');

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));    
 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);
      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}
</script>
<title>Welcome</title>
<link rel="stylesheet" href="styles/fastyle.css" type="text/css">
</head>
<BODY onLoad="StartSlideShow()">
<form name="SlideShow">
  <table width="706">
    <tr>
      <td height="16" width="448" valign="top" class="label">
        <div align="center">For sales, click here</div>
      </td>
      <td width="1"></td>
      <td width="237" rowspan="2" valign="top">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="167" valign="top" colspan="2" class="label"><b><u><font color="#FF0000"></font></u></b>
              <p></p>
              <p></p>
              <p>Thank you for your interest.</p>
            </td>
          </tr>
          <tr>
            <td height="20" valign="top" colspan="2"> </td>
          </tr>
          <tr>
            <td height="33" width="2"></td>
            <td valign="middle" width="237" class="label" align="center">
              <input type="button" name="Next" value="  >> " "onClick="ShowSlide(1)">
        <!input type="image" src="images/next.gif" width="144" height="100" name="Next" onClick="ShowSlide(1)">
                    </td>
          </tr>
          <tr>
            <td height="25"></td>
            <td></td>
          </tr>
          <tr>
            <td height="36"></td>
            <td valign="top" class="label">
              <div align="center">
                <input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)">
      <!input type="image" src="images/prev.gif" width="144" height="100" name="Previous" onClick="ShowSlide(-1)">
              </div>
            </td>
          </tr>
          <tr>
            <td height="47"></td>
            <td></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td valign="top" rowspan="2"><img name="Screen" width=448 height=574></td>
      <td height="442"></td>
    </tr>
    <tr>
      <td height="132"></td>
      <td></td>
    </tr>
  </table>
</form>
</body><script> window.open=NS_ActualOpen; </script>

</html>


Thanks -

Jim
0
Comment
Question by:JPersinger
  • 3
  • 3
  • 2
  • +2
11 Comments
 
LVL 3

Expert Comment

by:tejaspurani
ID: 7146491
This script is not working.
when i try yo open the page it gives me error.

T.P.
0
 
LVL 1

Expert Comment

by:sandyphillips
ID: 7147003
Jim,

What the problem is has to do with a number of fairly subtle issues. If you know these already, just ignore my answer because I don't have a real solution -- just the cause of the problem and some alternatives you could try. First and foremost, your Javascript won't work with images for buttons because the Javascript assumes that your <Input> tag's type is "Button" and that the "disabled" property makes sense. So, early in your page, there are two very important lines:

document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide == (Slides.length-1));    

These two lines attempt to set a property of your <Input> that makes sense for a button but not for an image. In particular, if you look at the first line, it tells the browser to set the disabled property of the Input named Previous in the form named SlideShow to TRUE or FALSE depending on the results of a comparison (i.e., is NextSlide equal to 0 or not?). If you have a button named Previous and a variable named NextSlide defined, this works like a champ. With an <Input> type of image, the disabled property makes no sense and this fails because there is no property called disabled for this type of control.

As for the alternatives, you can set up an anchor, <a> with a src attribute set you your favorite graphic. Then write a new function that switches your graphic for a faded version that does not change the pictures when clicked based on the value of NextSlide (effectively mimicking the "disabled" attribute) and use that instead of the <form><input> paradigm. This is obviously more complicated but not difficult (just time consuming) and you may be able to find a script that does this on one of the public domain archives (e.g., www.javascripts.com).

As another minor point, your code used values of "  >> " and " << " for the original input buttons. I would recommend that you use the HTML encoded values of &gt;&gt; and &lt;&lt; instead because HTML tags themselves use < and > and these symbols embedded in your HTML can confuse your browser. I also found improper use of quotes but that was an easy thing to troubleshoot.

Hope this gives you the information you were looking for.

Sandy
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7212823
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I may recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
0
 

Author Comment

by:JPersinger
ID: 7213015
I thought putting this at the top was enough.

****** Code Moved to JavaScript ********

Is it not?

Jim
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7214346
If you have re-posted it over in another TA, you should post a request in The Community Support area, and ask them to delete this.

Cd&
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 1

Expert Comment

by:sandyphillips
ID: 7214869
Folks,

I do have a question/comment. If the question is moved (and I'm OK with that), do the recommendations/observations we make move with the question? If not, why not? And, as one who learns as much as I teach from going through these exercises, how can we get a "continuous" set of feedback on these items?

I did spend some time, as I'm sure many did, and would like to see what the ultimate results are because my time costs me something and I'd like the return. I'm not really sure if this is a moderator-aimed comment or not.

Sandy
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7214929
Sandy,
I have asked for a review here:

http://www.experts-exchange.com/commspt/Q_20335441.html

Cd&
0
 
LVL 5

Expert Comment

by:Netminder
ID: 7215230
JPersinger,

Editing your question to include "Moved To Javascript" was obviously not enough, since sandyphillips responded to your question here.

I'm not going to tell you you have to award sandyphillips points; however, I will tell you that editing a comment, rather than leaving a new one, almost ALWAYS causes a situation that can turn into a problem. Further, I don't know that sandyphillips' suggestions would have solved your problem, or that they wouldn't have; however, I do believe that sandyphillips' remarks deserve a reply.

Please leave me a note telling me how you would like to resolve this question.

Netminder
CS Moderator
0
 

Author Comment

by:JPersinger
ID: 7215491
I think they need to add the delete ability again. Can't quite understand why they removed it to begin with.

This comment is not meant to be negitive, but if a question gets moved, shouldn't any comment at the top be the first thing we read? I posted the remark days after I posted the question and due to a lack of responses (Yes, before sandyphillips) I 'moved' it.

The strengh in Experts Exchange is when sharing is truly sharing. I'm the first to understand time cost factors. And to me the best solution is for us to have complete control over our questions.

I have posted questions before. And when I needed them removed, its taken days sometimes weeks. Since this question was 'marked' as moved, I figured all would read that and would understand. I've been a member here for years. So if this is a problem and anyone truly lost 'time' then I apologize.

Netminder - Take 100 points and move it to sandyphiilips account.

Thanks
Jim
0
 
LVL 5

Expert Comment

by:Netminder
ID: 7215598
Jim,

Thanks for responding. I hope I didn't come across as demanding points for sandyphillips; I merely want to be fair to everyone concerned. Your account will not be tapped for the points.

The Delete button was removed because we found that a number (not a large number, but nonetheless) of people were abusing the button. Specifically, if there were comments in a question, and you tried to delete it, it would return your points, and would put a stamp of "Pending" on it. You could then use the points to ask another question. The problems occured when someone objected to the deletion, and that objection was upheld. You then had the available points removed -- which created quite a few "negative available points" problems. To further compound the problems, the notifications that the delete button had been used didn't work, so it could be some time before we'd come across the problem.

Until Engineering could come up with new programming, the simplest solution was to remove the button. It's a little more work for the Moderators but it's a lot less headache.

As you're no doubt aware, a question can't actually be "moved" from one TA to another; the best we can do is either refund and close or delete a question so it can be asked in another TA. By the time stamp, you asked your question at 5 p.m. one day, and sandyphillips responded at 11 a.m. the following morning; it's definitely possible that you were both posting at the same time. As such, I'd ask that rather than edit a question -- which can be confusing to someone who wasn't involved in the thread as it was developing -- you add a post, and that you feel free to ask the Moderators to delete or close questions. There are enough of us, and we're spread out sufficiently, that we should be able to take care of you.

Thanks for your input,

Netminder
CS Moderator
0
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 7215612
Points refunded and question closed.

sandyphillips: points for you at http://www.experts-exchange.com/jsp/qShow.jsp?ta=html&qid=20335554

Netminder
CS Moderator
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now