?
Solved

Combine OnClick submit with button rollover

Posted on 2005-03-02
7
Medium Priority
?
721 Views
Last Modified: 2012-08-13
Hi,

I want to make some sumbit buttons use rollover images

I have this javascript for rollover

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

image1 = new Image();
image1.src = "http://www.mydomain/imageroll1.gif";

image2 = new Image();
image2.src = "http://www.mydomain/imageroll2.gif";


</script>
</HEAD>


<BODY>

<a href="http://google.com" onmouseover="image1.src='http://www.mydomain/imageroll1.gif';"
onmouseout="image1.src='http://www.mydomain/imagestatic1.gif';">
<img name="image1" src="http://www.mydomain/imagestatic1.gif" border=0></a>

<a href="http://msn.com" onmouseover="image2.src='http://www.mydomain/imageroll2.gif';"
onmouseout="image2.src='http://www.mydomain/imagestatic2.gif';">
<img name="image2" src="http://www.mydomain/imagestatic2.gif" border=0></a>

</BODY>

-------

And these OnClick Submits

  <input type="hidden" name="keywords">
  <input type="hidden" name="c" value="1">
   <input type="hidden" name="index" value="0">

<input type="text" name="search"  value="" style='width:252px' maxlength="255">

              <input name="submit" type="submit" style="width:120;text-align:center" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.mydomain.com/searchq.php ';" value="Search1">

              <input name="submit" type="submit" style="width:120;text-align:center" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.mydomain.com/searchq.php';"  value="Search2">    

</form>

I need to keep this form of submit.

Any good javascript rollover will be fine.

Thanks
0
Comment
Question by:macuser777
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 19

Expert Comment

by:dakyd
ID: 13440149
How about something like this?  An input with type of image is like a submit button, but lets you include a src for the image, so you can do your rollovers.  Hope that helps.

<html>
<head>
<script type="text/javascript">
image1 = new Image();
image1.src = "http://www.mydomain/imageroll1.gif";

image2 = new Image();
image2.src = "http://www.mydomain/imageroll2.gif";

window.onload = initSubmit;

function initSubmit()
{
  var els = document.theForm.getElementsByTagName("input");
  for (var i = 0, n = els.length; i < n; i ++)
  {
    if (els[i].name == "submit1")
    {
      els[i].onmouseover = function() {this.src = image1.src;};
      els[i].onmouseout = function() {this.src = "http://www.mydomain/imagestatic1.gif";};
    }
    else if (els[i].name == "submit2")
    {
      els[i].onmouseover = function() {this.src = image2.src;};
      els[i].onmouseout = function() {this.src = "http://www.mydomain/imagestatic2.gif";};
    }
  }
}
</script>
</head>

<body>
<form name="theForm" id="theForm">
  <input type="hidden" name="keywords">
  <input type="hidden" name="c" value="1">
  <input type="hidden" name="index" value="0">

  <input type="text" name="search"  value="" style='width:252px' maxlength="255">
  <input type="image" name="submit1" src="http://www.mydomain/imagestatic1.gif" style="width:120;text-align:center" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.mydomain.com/searchq.php ';" />
  <input type="image" name="submit2" src="http://www.mydomain/imagestatic2.gif" style="width:120;text-align:center" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.mydomain.com/searchq.php';" />
</form>
</body>
</html>
0
 
LVL 4

Author Comment

by:macuser777
ID: 13440518
hmmm...no.

Didn't rollover ...and I van't use submit1, submit2 etc because that causes redirect errors with my code.

Is there any way to do it more simply by just adding OnMouseover into the submit line....like in first instance below.?

 <form method="get">
          <input type="hidden" name="keywords">

          <input type="hidden" name="c" value="1">
          <input type="hidden" name="index" value="0">
          <input type="text" name="search"  value="" style='width:252px' maxlength="255">

              <input name="submit" type="image"  src="http://www.isearch.com/roll/o3.png" align="absmiddle"  onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.isearch.com/searchq.php ';" value="Web Search" onMouseOver="src=http://www.isearch.com/roll/o5.png">

              <input name="submit" type="submit" style="width:120;text-align:center" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.isearch.com/searchq.php';"  value="blah">
          </form>
0
 
LVL 19

Accepted Solution

by:
dakyd earned 160 total points
ID: 13440890
Yes, you can use the code inline on the input itself.  I prefer not to do it that way, but it's valid.  Using what you posted, here's the example on the first image.  Didn't know what image you wanted as the roll over for the second one, so I left it blank.  It's the same idea, though, just change the src onmouseover, and change it back onmouseout.  Hope that helps.

<form method="get">
  <input type="hidden" name="keywords" />

  <input type="hidden" name="c" value="1" />
  <input type="hidden" name="index" value="0" />
  <input type="text" name="search"  value="" style='width:252px' maxlength="255" />

  <input name="submit" type="image"  src="http://www.isearch.com/roll/o3.png" align="absmiddle"  onclick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.isearch.com/searchq.php ';" value="Web Search" onmouseover="this.src='http://www.isearch.com/roll/o5.png';" onmouseout="this.src='http://www.isearch.com/roll/o3.png';" />

  <input name="submit" type="submit" style="width:120;text-align:center" onclick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.isearch.com/searchq.php';"  value="blah" > 
</form>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Author Comment

by:macuser777
ID: 13441011
Thanks, dakyd

That works fine. I don't really understand javascreipt so simpler is probably better for me.

macuser
0
 
LVL 4

Author Comment

by:macuser777
ID: 13441031
errr...can I put align="abs middle" or some inline style attribute in there?
0
 
LVL 4

Author Comment

by:macuser777
ID: 13441045
hold the phone....not actually submitting....
0
 
LVL 19

Expert Comment

by:dakyd
ID: 13441593
Posted the sample here, it works fine for me:
http://www.freewebs.com/dakyd/ee/test.html
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 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