Solved

button onclick to image onclick

Posted on 2001-08-08
16
891 Views
Last Modified: 2006-11-17
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
Comment
Question by:penfold69
  • 4
  • 2
  • 2
  • +5
16 Comments
 
LVL 1

Accepted Solution

by:
FranzRinkleff earned 25 total points
ID: 6365280
<input type="image" src="images/yourImage.gif" alt="Accept">
0
 

Author Comment

by:penfold69
ID: 6365285
could you be a bit more specific as i am new at this!!!
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6365310
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
 

Author Comment

by:penfold69
ID: 6365350
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
 
LVL 1

Expert Comment

by:FranzRinkleff
ID: 6365372
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
 
LVL 1

Expert Comment

by:FranzRinkleff
ID: 6365420
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
 
LVL 10

Expert Comment

by:dij8
ID: 6365541
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
 
LVL 4

Expert Comment

by:daluu
ID: 6366242
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 10

Expert Comment

by:dij8
ID: 6366351
Netscape doesn't support onclick in <img> tags.
0
 
LVL 4

Expert Comment

by:daluu
ID: 6370626
Really? I didn't know that. Thanks for informing.
0
 

Expert Comment

by:akshayajmera
ID: 6392478
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
 
LVL 1

Expert Comment

by:Moondancer
ID: 6393003
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
 
LVL 1

Expert Comment

by:FranzRinkleff
ID: 6393643
What further information do you need?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6629485
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6640870
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
 
LVL 1

Expert Comment

by:Moondancer
ID: 6645878
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

744 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

16 Experts available now in Live!

Get 1:1 Help Now