Show image instead of javascript button

larry · October 28th, 2003, 12:21 PM

I would like to use an image instead of the gray javascript button. Here is the code that came with the Beginning JavaScript book.

questionHTML = questionHTML + "<P><INPUT TYPE=button " +
         "VALUE='Restart Quiz' " +
         "onclick=\"window.location.replace('QuizPage1.htm' )\" " +
         "NAME=buttonRestart>"

This is what I have tried so far.
questionHTML = questionHTML + "<P><INPUT TYPE=image " +
         "VALUE='Restart Quiz' " +
         "onclick=\"window.location.replace('QuizPage1.htm' )\" " +
         "<img src="start_again.gif>"

This does produce the image instead of the button but when I click it, it just reloads the same page instead of going back to the start page of TriviaQuiz.htm

Can you help?

pgtips · October 30th, 2003, 07:44 AM

You are using the wrong type of HTML control. An input control of type image acts like a submit button, it is not a replacement for a regular button.

Put the image inside an anchor, and add the js code to the onclick of the anchor, like this:

Code:

questionHTML += "<P><a href='#' " + 
         "onclick=\"window.location.replace('QuizPage1.htm')\">" + 
         "<img src='start_again.gif' alt='Restart Quiz'></a>";

hth
Phil

larry · October 31st, 2003, 10:33 AM

Phil
That worked great, Thanks alot.
Would you help me with one more thing. The js code to Reset also uses a button and I would also like to change that to an image. I have tried the code you provided for the Restart button but must be coding it wrong. Would you be so kind a to type this out for me?

Here is the code as it sits now:

questionHTML = questionHTML + "P"<INPUT=button " +
      "VALUE='Reset Stats' " +
      "onClick=\"window.top.fraTopFrame_ccna1.fraGlobalF unctions_ccna1.setCookie" +
      "('previousNoAsked', 0, '','1 Jan 1970')\" " +
      "NAME=buttonReset>"

Could you make this work so I could use an image instead of the old gray button?
I would really appreciate it!

Larry

Quote:

quote:Originally posted by pgtips
You are using the wrong type of HTML control. An input control of type image acts like a submit button, it is not a replacement for a regular button.

Put the image inside an anchor, and add the js code to the onclick of the anchor, like this:

Code:

questionHTML += "<P><a href='#' " + 
         "onclick=\"window.location.replace('QuizPage1.htm')\">" + 
         "<img src='start_again.gif' alt='Restart Quiz'></a>";

hth
Phil

larry · October 31st, 2003, 10:59 AM

Phil
That worked great, Thanks alot.
Would you help me with one more thing. The js code to Reset also uses a button and I would also like to change that to an image. I have tried the code you provided for the Restart button but must be coding it wrong. Would you be so kind a to type this out for me?

Here is the code as it sits now:

questionHTML = questionHTML + "P"<INPUT=button " +
      "VALUE='Reset Stats' " +
      "onClick=\"window.top.fraTopFrame_ccna1.fraGlobalF unctions_ccna1.setCookie" +
      "('previousNoAsked', 0, '','1 Jan 1970')\" " +
      "NAME=buttonReset>"

Could you make this work so I could use an image instead of the old gray button?
I would really appreciate it!

Larry

pgtips · October 31st, 2003, 11:42 AM

Here you go Larry, just change the src of the img tag to whatever image you want to use.

Code:

questionHTML += "<P><a href='#' " + 
         "onclick=\"window.top.fraTopFrame_ccna1.fraGlobalFunctions_ccna1.setCookie" +
         "('previousNoAsked', 0, '','1 Jan 1970')\">" +
         "<img src='start_again.gif' alt='Reset Stats'></a>";

rgds
Phil

larry · October 31st, 2003, 05:13 PM

Phil,
Can you help once more changing the button type at the bottom of the code below to an image. This is a little differnt than the others you helped me with and I could sure use your help once more.

<HTML>
<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function cmdStartQuiz_onclick()
{
   var cboNoQuestions = document.frmQuiz.cboNoQuestions;
   var noQuestions = cboNoQuestions.options[cboNoQuestions.selectedIndex].value;
   var cboTimeLimit = document.frmQuiz.cboTimeLimit;
   var timeLimit = cboTimeLimit.options[cboTimeLimit.selectedIndex].value;
   window.top.fraTopFrame_aplus1.fraGlobalFunctions_a plus1.resetQuiz(noQuestions,timeLimit);

   window.location.href = "AskQuestion_aplus1.htm";
}

</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<center>

<FORM NAME="frmQuiz">
<img src="simulator_a+_exam1_black_orange.gif">
<br>
Select Number of Questions
<SELECT name=cboNoQuestions size=1>
   <OPTION value=10>10
   <OPTION value=25>25
   <OPTION value=50>50
</SELECT>
   Set Time Limit
<SELECT name=cboTimeLimit size=1>

   <OPTION value=600>10 Minute
   <OPTION value=1800>30 Minutes
   <OPTION value=3600>60 Minutes
   <OPTION value=-1>No Time Limit
</SELECT>

<p>
   <INPUT NAME=cmdStartQuiz TYPE=button VALUE="Start Quiz"
   onclick="return cmdStartQuiz_onclick()">
</FORM>

</BODY>
</HTML>