How do I swap images for a button?

Discussion in 'JavaScript' started by Imozeb, Feb 11, 2010.

0
  1. #1
    How do I swap images for an html form submit button?

    I have 3 images. submit_over.gif, submit_out.gif, and submit_down.gif

    How do I swap them depending on if the user clicks or is over my button?
     
    Imozeb, Feb 11, 2010 IP
  2. harrierdh

    harrierdh Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    
<head>
<script>
function onMouseOver() {
	document.getElementById("myimage").src = "submit_over.gif";
}
function onMouseOut() {
	document.getElementById("myimage").src = "submit_out.gif";
}
function onMouseDown() {
	document.getElementById("myimage").src = "submit_down.gif";
}
function onMouseUp() {
	document.getElementById("form1").submit();
}
</script>
</head>
<body>
<form name="form1" action="http://google.com" id="form1" />
	<img src="submit_out.gif" id="myimage" onMouseOver="mouseOver()" onMouseOut="mouseOut()" onMouseDown="mouseDown()" onMouseUp="mouseUp()" />
</form>
</body>
    Code (markup):
     
    harrierdh, Feb 12, 2010 IP
  3. beven

    beven Well-Known Member

    Messages:
    483
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    113
    #3
    It's really me as well
     
    beven, Feb 23, 2010 IP
  4. hirephpdeveloper

    hirephpdeveloper Member

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #4
    Try this.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript">
    function showIt(w) {
    var a = new Array("<div>123-2222-2222</div><br><div>65656565566</div>", "<div>456-4444-4444</div><br><div>65656565566</div>");
    document.getElementById("button"+w).innerHTML = a[w];
    }
    </script>
    </head>
    <body>
    <div id="button0">
    <a href="#" onclick="showIt(0);">
    <img src="#" alt="Go to Experts Exchange" title="Go to Experts Exchange">
    </a>
    </div>
    <br>
    <div id="button1">
    <a href="#" onclick="showIt(1);">
    <img src="#" alt="Go to Google" title="Go to Google">
    </a>
    </div>
    </body>
    </html>
     
    hirephpdeveloper, Feb 23, 2010 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    CSS solution (since it's faster than loading some bloataceous script : )

    HTML4 Strict, for your submit button:
    
<input type="image" id="search" src="transparent.gif" alt="Search">
    Code (markup):
    You'll make an image called "transparent.gif" which has the exact same dimensions of your button image you want to show.

    You'll make another image, known as a "CSS sprite", which contains all three versions of your image. In my code below, I put the three images in a horizontal row, so we'll be moving the image to the left for each event. We'll call this "yourimage.png" for example below.

    
#search {
  width: 77px; /*replace with width of your button*/
  height: 67px; /*replace with height of your button*/
  color: #fff; /*set a colour for the alt text... in this case, the background of the page was red, so white showed well*/
  font: bold 1em/1.2em verdana, arial, sans-serif;
  text-decoration: underline;
  background: url(yourimage.png) no-repeat;
}
	#search:focus, #search:hover {
	  color: #fdb302; /*change text colour*/
  	  background-position: -88px 0; /*move image... choose numbers that work with your image's size*/
	}
	#search:active {
  	  background-position: -176px 0; /*move image for active (clicking) action*/
	}
    Code (markup):
    Javascript only beats this technique because IE6 will not do :hover on anyone who's not an anchor, and does not recognise "focus" at all.
    IE7 will do :hover and :active but not :focus because IE7 does not recognise :focus.

    Some browsers will leave the focus on the last-clicked item, except Safari and Chrome.
    Some browsers will keep the :active state so long as the mouse button is depressed, no matter where the mouse moves to (if you're doing a drag motion for example) while Opera only keeps the :active style so long as the mouse actually sits over the submit button.

    Text styling is for those who don't have images, and need some other visual feedback. Submit type="image" is a submit type button but has alt text like an image instead of a value.

    I'm not sure but if you were to use an image-style submit with Javascript, I believe you cannot access the alt text with .value property but would need to create an alt attribute.text to read.

    If your site already has some javascript for IE that fixed hover and focus issues anyway (for dropdown menus etc) then there's really no great reason not to use CSS for the image changes instead.
     
    Stomme poes, Feb 24, 2010 IP
  6. LomX

    LomX Peon

    Messages:
    285
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i used this script for my site :p
    <SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="button/hm2.gif";  <- change this to your picture name
	 
     pic1off= new Image(100,25);
     pic1off.src="button/hm1.gif"; <- change this to your picture name

   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>
    Code (markup):
     
    LomX, Feb 24, 2010 IP