4 Replies - 3051 Views - Last Post: 12 October 2007 - 12:23 AM

#1 clintmyster   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-October 07

How to replace a "go" button by an image

Posted 10 October 2007 - 06:49 PM

 <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.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks :P

This post has been edited by clintmyster: 10 October 2007 - 07:17 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How to replace a "go" button by an image

#2 William_Wilson   User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: How to replace a "go" button by an image

Posted 10 October 2007 - 08:08 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: How to replace a "go" button by an image

Posted 11 October 2007 - 01:03 AM

View Postclintmyster, on 10 Oct, 2007 - 08:49 PM, said:

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.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz?
<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 October 2007 - 01:12 AM

Was This Post Helpful? 0
  • +
  • -

#4 er_satbir   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-December 06

Re: How to replace a "go" button by an image

Posted 11 October 2007 - 03:54 AM

View Postclintmyster, on 10 Oct, 2007 - 06:49 PM, said:

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.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks :P



You should use <input type="image" src="PATH_TO_IMAGE" onclick="jump(this.form)" /> to use image as a submit button.
Was This Post Helpful? 0
  • +
  • -

#5 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: How to replace a "go" button by an image

Posted 12 October 2007 - 12:23 AM

View Poster_satbir, on 11 Oct, 2007 - 05:54 AM, said:

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: 12 October 2007 - 12:25 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1