[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 906
  • Last Modified:

button onclick to image onclick

i have the following code in a button which i would like to get to work in an image

Please can someone give me the code to do this

code in the button

" gateKeeper()" this is in the buttons onclick procedure on my webpage but i would like it to work on an image i want to use insetad of the button, can this be done? if so please post code that will do this

thanks
0
penfold69
Asked:
penfold69
  • 4
  • 2
  • 2
  • +5
1 Solution
 
FranzRinkleffCommented:
<input type="image" src="images/yourImage.gif" alt="Accept">
0
 
penfold69Author Commented:
could you be a bit more specific as i am new at this!!!
0
 
webwomanCommented:
Could you please give us either a link to the page or the code you're currently using? It's hard to fix something if you don't know what it is...
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
penfold69Author Commented:
SORRY webwoman,
here is the code thats on the page

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>
<SCRIPT LANGUAGE="javascript">
                <!--- Hide from tired old browsers
                var nifty_little_window = null;
                function gateKeeper() {
                nifty_little_window = window.open('gatekeep.html', 'theKeeper',
                'width=350,height=200,resizable=1');
                }
                // End hiding --->
                </SCRIPT>
<form>
<input type="button" value="Enter Here" onClick="gateKeeper()"
</form>
</body>

</html>



what i want to change is this line

"<input type="button" value="Enter Here" onClick="gateKeeper"

at the moment this is a button that calls the gatekeeper procedure, but what i would like to do is to replace the button with my own gif called "password.gif" so i basically would like the code that i could put into this button that whwn i click on it, it calls "gatekeeper"

PLEASE can you explain what i have to do as i am fairly new to html

THANX

Penfold

0
 
FranzRinkleffCommented:
replace
<input type="button" value="Enter Here" onClick="gateKeeper>

with this

<input type="image" src="password.gif" alt="Enter Here" onClick="gateKeeper">

the password.gif will have to be in the same directory as your page.  
0
 
FranzRinkleffCommented:
the src attribute in the input tage indicates where your image resides

the alt attribute is the text that is displayed when the mouse pointer hovers over the image

the onClick attribute calls your javascript function
0
 
dij8Commented:
Using the input type image makes the image a submit button for the form.  So it will attempt to goto the action of the form.

An alternative to input type image is to just put anchor tags around an image.
<a href="javascript:gateKeeper()"><img src="password.gif" ... ></a>

If you want to do it this way and still submit the form then you will need to include in your script:
document.forms["formname"].submit();
0
 
daluuCommented:
If you don't need to use the form you can also use the onclick attribute in the <img> tag for your image like this -

<img src="password.gif" onclick="gateKeeper()">
0
 
dij8Commented:
Netscape doesn't support onclick in <img> tags.
0
 
daluuCommented:
Really? I didn't know that. Thanks for informing.
0
 
akshayajmeraCommented:
Hi penfold69

Here is the Code

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>
<SCRIPT LANGUAGE="javascript">
               <!--- Hide from tired old browsers
               var nifty_little_window = null;
               function gateKeeper() {
               nifty_little_window = window.open('gatekeep.html', 'theKeeper',
               'width=350,height=200,resizable=1');
               }
               // End hiding --->
               </SCRIPT>
<form>
<a href="javascript: void gateKeeper()">
  <image name="image1" src="password.gif">
</a>
</form>
</body>

Give the correct path for password.gif ...

Hope this helps..

Akshay
0
 
MoondancerCommented:
Welcome to Experts-Exchange, akshayajmera, I see you are new to this site.

Please refer to the links below about the process here, the Guidelines, question (comment/answer) processes, etc. I am rejecting your proposed answer, since it locked this question and expanded on previous recommendations.  The Asker benefits because the question is not locked, many more will step in to help than if it is locked, and any time the solution is found can accept any comment as the accepted answer to award that expert.

If you have any questions, just post a zero point question in Community Support, we'll respond.

http://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp
http://www.experts-exchange.com/jsp/infoMemberAgreement.jsp
http://www.experts-exchange.com/jsp/infoWhatsNew.jsp
htt://www.experts-exchange.com/jsp/cmtyHelpDeskKp.jspp
http://www.experts-exchange.com/jsp/memberEarnPoints.jsp 

Thank you,
Moondancer
Community Support Moderator @ Experts Exchange

0
 
FranzRinkleffCommented:
What further information do you need?
0
 
COBOLdinosaurCommented:
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.

Cd&
 
0
 
COBOLdinosaurCommented:
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
split dij8,FranzRinkleff

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
0
 
MoondancerCommented:
Thanks, Cd&.

Points for dij8 here:
http://www.experts-exchange.com/jsp/qManageQuestion.jsp?qid=20237467

Finalized by
Moondancer
Community Support Moderator @ Experts Exchange
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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