SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover for a submit form button?

    I want to have an submit button with a rollover effect and onclick effects in my form.

    I know how to make regular rollover buttons but I'm having problems making one that would act as a form submit button.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I found a tutorial on the web. The rollover and onclick works but the form won't submit

    Can someone look at my form and say what's wrong?

    HTML Code:
    <?php
    if ( isset($_POST['submit']) )
    {
    if ( !isset($_POST['nick'])  ||  !isset($_POST['system']) )
    {
    exit('Error, no nick or website selected.');
    }
    else
    {
    $nick = $_POST['nick'];
    $system = $_POST['system'];
    if ($system == 'google')
    {
    header("Location: http://www.google.com". $_POST['nick'] . "time");
    exit;
    }
    elseif ($system == 'yahoo')
    {
    header("Location: http://www.yahoo.com" . $_POST['nick'] . "time");
    exit;
    }
    elseif ($system == 'cnn')
    {
    header("Location: http://www.cnn.com" . $_POST['nick'] . "time");
    exit;
    }
    }
    }
    php?>
    
    <html><head>
    
    <script>
    var Pic = new Array
    
    Pic[1] = 'images/search.jpg'
    Pic[2] = 'images/search_on.jpg'
    Pic[3] = 'images/search_click.jpg'
    
    var p = Pic.length
    var preLoad = new Array()
    var i = 0;
    for (i = 0; i < p; i++){
         preLoad[i] = new Image()
         preLoad[i].src = Pic[i]
    }
    
    function switchImage(whichImage,imageNumber){
       document.images[whichImage].src = preLoad[imageNumber].src
    }
    
    function doSubmit(){
      
    }
    </script>
    
    </head>
    
    <body bgcolor="#000000">
    
    <form method="post" name="TheForm" target="_blank" action="<?=$_SERVER['PHP_SELF'] ?>">
    <input type="text" name="nick" size="10"><br>
    <input type="radio" name="system" value="google">google<br>
    <input type="radio" name="system" value="yahoo">yahoo<br>
    <input type="radio" name="system" value="cnn">cnn<br>
    
    </form>
    
    <a href="javascript:doSubmit()"
       onMouseOut  = "switchImage('submitImage',1)"
       onMouseOver = "switchImage('submitImage',2)"
       onMouseDown = "switchImage('submitImage',3)">
    <img name="submitImage" src="images/search.jpg" border="0" width="159" height="32">
    </a>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can do most of that with CSS instead of js kind of like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title> New Document </title>
    		<style type='text/css'>
    		<!--
    		body, html	 {
    			font-size: 1em;
    			font-family: Verdana, sans-serif;
    			}
    		#subBut {
    			  background-color: #FFF;
    			  color: #191970;
    			  border: 1px solid #000;
    		  }
    		#subBut:hover	{
    			background-color: RED;
    			color: #FFF;
    			border: 1px solid BLUE;
    			}
    
    		#subBut:focus {
    			background-color: RED;
    			color: #FFF;
    			border: 1px solid BLUE;
    		  }
    		 #subBut:active	{
    			background-color: YELLOW;
    			color: RED;
    			border: 1px solid RED;
    			}
    		//-->
    		</style>
    	</head>
    
    	<body>
    		<form method=post action="">
    			<input type='submit' id='subBut' value='Click Me' />
    		</form>
    	</body>
    </html>

    BUT alas support by IE is PATHETIC and it doesnt work

    what you can do with js is use document.getElementById to access the buttons props like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title> New Document </title>
    		<script language="JavaScript">
    		<!--
    		function lightup(myID)	 {
    			document.getElementById(myID).style.backgroundColor = 'RED';
    			document.getElementById(myID).style.color = '#FFF';
    			document.getElementById(myID).style.border = '1px solid BLUE';
    			}
    		function highlight(myID)	{
    			document.getElementById(myID).style.backgroundColor = 'YELLOW';
    			document.getElementById(myID).style.color = 'RED';
    			document.getElementById(myID).style.border = '1px solid RED';
    			}
    		//-->
    		</script>
    		<style type='text/css'>
    		<!--
    		body, html	 {
    			font-size: 1em;
    			font-family: Verdana, sans-serif;
    			}
    		#subBut {
    			  background-color: #FFF;
    			  color: #191970;
    			  border: 1px solid #000;
    		  }
    		//-->
    		</style>
    	</head>
    
    	<body>
    		<form method=post action="">
    			<input type='submit' id='subBut' value='Click Me' onmouseover='lightup(this.id);' onmousedown='highlight(this.id);' />
    		</form>
    	</body>
    </html>
    Ill leave the rest for you to figure out!

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now you didnt say you wanted Image button rollovers! ....

  5. #5
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I need image rollovers, sorry for not specifying. Can you help me with image rollover/onclick?

  6. #6
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
      function submitForm()	 {
       document.getElementById(form1).submit();
       }
    //-->
    </script>
    </head>
    <body>
    	<form action="" name="form1" id='form1' method="post">
    		test one<input name="name" type="text"><br>
    		test two<input name="company" type="text"><br>
    		<a href="javascript:submitForm();" onmouseover='somefunction();' onmouseout='somefunction();' onclick='somefunction();'><img src="images/some_image.gif"></a>
    	</form>
    </body>
    </html>

  8. #8
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    uhu ?
    what about just a plain input type="image" ? just change src on mouseover and reset it on mouse out ?

  9. #9
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that can be done but I seem to remember having a problem with a browser or two that wouldnt support it ...... cant for the life of me now remember which ..... I have done image submit buttons in years!

  10. #10
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I finally deleted all javascript and just added this:

    <input name="submit" value="go" type="image" src="rolloff.jpg" onmouseover="this.src='rollon.jpg'" onmouseout="this.src='rolloff.jpg'" onclick="this.src='clickon.jpg'">

    and it works well in both IE and FF

  11. #11
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    probably safari wouldnt like it very much but for a pair of guy lost in the middle of nowhere surfing with safari who cares (0.0001% of users) ;-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •