Welcome to Dream.In.Code
Become an Expert!

Join 149,594 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,859 people online right now. Registration is fast and FREE... Join Now!




How to replace a "go" button by an image

 
Reply to this topicStart new topic

How to replace a "go" button by an image

clintmyster
10 Oct, 2007 - 05:49 PM
Post #1

New D.I.C Head
*

Joined: 1 Oct, 2007
Posts: 6


My Contributions
CODE
<html>

<head>
<title>Drop Down Menu Sample - 2 Menus (or more)</title>



            
<script>
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
</script>

</head>

<body>
<form action="dummy" method="post">
<select name="choice" size="1">
<option value="">CHOOSE A LINK</option>
<option value="http://www.yahoo.com">YAHOO</option>
<option value="http://www.hotbot.com">HOTBOT</option>
<option value="">- - - - - - - - - -</option>
<option value="http://www.microsoft.com">MICROSOFT</option>
<option value="http://www.netscape.com">NETSCAPE</option>
</select>
<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">
</form>

</form>


<P><P>

<body>
<form action="dummy" method="post">
<select name="choice" size="1">
<option value="">CHOOSE A LINK</option>
<option value="http://www.yahoo.com">YAHOO</option>
<option value="http://www.hotbot.com">HOTBOT</option>
<option value="">- - - - - - - - - -</option>
<option value="http://www.microsoft.com">MICROSOFT</option>
<option value="http://www.netscape.com">NETSCAPE</option>
</select>
<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">
</form>

</form>

</html>


<a href="java script:jumpJumpMenu();"><img src="file:///E|/IST/Perfumengifts/Generic Graphics/search_magnifyingglass.gif" width="14" height="14" border="0" /></a>


I have this code. I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onClick="jump(this.form)">with an image http://www.perfumewarehouse.com.au/images/...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks tongue.gif





This post has been edited by clintmyster: 10 Oct, 2007 - 06:17 PM
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: How To Replace A "go" Button By An Image
10 Oct, 2007 - 07:08 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 4,101



Thanked: 25 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
the onClick event can be added to any html object, as it is a javascript function. Simply use an img tag with the added attribute of onClick="jump(this.form)" and it should work just fine.
User is offlineProfile CardPM
+Quote Post

Arbitrator
RE: How To Replace A "go" Button By An Image
11 Oct, 2007 - 12:03 AM
Post #3

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 492



Thanked: 2 times
My Contributions
QUOTE(clintmyster @ 10 Oct, 2007 - 08:49 PM) *
I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onClick="jump(this.form)">with an image http://www.perfumewarehouse.com.au/images/...ifyingglass.gif. Can someone rewrite my code for me plz?
CODE
<button type="button"><img alt="Go!" width="14" height="14" src="http://www.perfumewarehouse.com.au/images/search_magnifyingglass.gif" onclick="jump(this.form);"></button>


Edit: I read William_Wilson’s post more thoroughly after submitting this. His solution will probably produce something more aesthetically elegant with less verbose code. Note that users won’t have Tab key access to the button in browsers like Firefox if you merely use an img element with an onclick attribute though.

If you were using type="submit" within a form element, then a button element would be the solution, but that doesn’t seem to be the case here.

This post has been edited by Arbitrator: 11 Oct, 2007 - 12:12 AM
User is offlineProfile CardPM
+Quote Post

er_satbir
RE: How To Replace A "go" Button By An Image
11 Oct, 2007 - 02:54 AM
Post #4

New D.I.C Head
*

Joined: 18 Dec, 2006
Posts: 2


My Contributions
QUOTE(clintmyster @ 10 Oct, 2007 - 06:49 PM) *


I have this code. I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onClick="jump(this.form)">with an image http://www.perfumewarehouse.com.au/images/...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks tongue.gif



You should use <input type="image" src="PATH_TO_IMAGE" onClick="jump(this.form)" /> to use image as a submit button.
User is offlineProfile CardPM
+Quote Post

Arbitrator
RE: How To Replace A "go" Button By An Image
11 Oct, 2007 - 11:23 PM
Post #5

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 492



Thanked: 2 times
My Contributions
QUOTE(er_satbir @ 11 Oct, 2007 - 05:54 AM) *
You should use <input type="image" src="PATH_TO_IMAGE" onClick="jump(this.form)" /> to use image as a submit button.
I wouldn’t use the input element in this case for two reasons:
  • type="image" is functionally equivalent to type="submit"; in other words, type="image" has a submission action tied to it whereas type="button" does not. If the element is contained within a form element, as it is in clyntmyster’s code, then you would have to cancel the default action (i.e., submission action) via scripting which would unnecessarily complicates things.

    Notably, I’m not sure whether he should be using that form element at all since he filled in the action attribute with a “dummy” value; I’m not sure if the value is temporary or intended for production.
  • The input element has no width and height attributes. Admittedly, you can describe those via CSS, but I prefer to specify intrinsic dimensions via HTML instead of CSS since I don’t consider descriptions of the intrinsic dimensions of images to be part of the presentational layer.

Edit: I should mention that you used XML syntax for the input element. Considering that, onClick should be in lowercase (i.e., onclick) since XHTML element/tag names are written in case‐sensitive lowercase.

This post has been edited by Arbitrator: 11 Oct, 2007 - 11:25 PM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 11:16PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month