Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Thanked 0 Times in 0 Posts

    Switching image back and forth using OnClick?

    I want to create the form button similar to this:

    Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me....

    i use an OnClick to switch the image but the if else statement just doent let me switch back to the original image, i not sure where i have gone wrong...

    appreciate again if anyone could help me out...

    below are the html and js thumnails:

  2. #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by vincentccw View Post

    Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me....
    Lucky you! I'm very patient today....
    Look in the comments for instructions on how to use the script. Good luck!
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Click Rollovers</title>
    <script type="text/javascript">
    /* <![CDATA[ */
    	//Cross-Browser Events (required)
    	function addEvent(elm, evType, fn) {
    		if (elm.addEventListener) {
    			elm.addEventListener(evType, fn, false);
    		} else if (elm.attachEvent) {
    			elm.attachEvent('on' + evType, fn);
    		} else {
    			elm['on' + evType] = fn;
    	//Generic function for retrieving an event's target (required)
    	function getTarget(e){
    		var target = window.event ? window.event.srcElement : e ? e.target : null;
    		if (!target){return false;}
    		while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
    		return target;
    rollover = {
    	init: function () {
    		var imgs = document.images; 
    		for( var i=0; i<imgs.length; i++ ) { //loop through the images
    			if ( imgs[i].className == 'roll' ) { //if they have the 'roll' className then...
    				var oversrc = imgs[i].src.replace('.', ('_on' + '.') ); //create a variable and store the on/rollover version of each image, which is the initial image's name plus the "_on" addon
    				rollover.preLoads[i] = new Image(); 
    				rollover.preLoads[i].src = oversrc; //Preload the on/rollover image
    				addEvent( imgs[i], 'click', rollover.roll ); //onclick...
    	roll: function (e) {
    		var t = getTarget(e);
    		var c = t.src; 
    		var ison = c.indexOf('_on'); 
    		if ( ison == -1  ) {//If the clicked image does not have the "_on" addon then...
    			t.src = c.replace( '.', ('_on' + '.') ); //we add the "_on" addon to that clicked image
    		else { //else we take it out
    			t.src = c.replace( ('_on' + '.'), '.' );		
    addEvent( window, 'load', rollover.init );
    /* ]]> */
    	<!-- There must be an image named "first_on" in your directory -->
    	<img src="first.png" class="roll" alt="" /> <br />
    	<!-- There must be an image named "second_on" in your directory -->
    	<img src="second.png" class="roll" alt="" />
    	<!--//Add as many as you want... ***remenber the "_on" addon//-->

    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-


Tags for this Thread

Posting Permissions

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