www.webdeveloper.com
Results 1 to 7 of 7

Thread: Switching sets of images via addEventListener

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    Switching sets of images via addEventListener

    I wrote this to using six sets of three images, and am using the image as a "click"able element,
    which will send folks to a different page.

    The code works fine now, my problem is it's long, and I'm trying to figure out a way to shorten it.
    I've tried a few different ways, multiple functions, loops, etc. and I'm not getting anywhere.

    Any help is appreciated.


    Code:
    
    function addListeners(){
    	document.getElementById('english_button').addEventListener("mouseover",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mouseout",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mousedown",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mouseup",myfuncE,false);
    	
    	document.getElementById('german_button').addEventListener("mouseover",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mouseout",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mousedown",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mouseup",myfuncG,false);
    	
    	document.getElementById('tagalog_button').addEventListener("mouseover",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mouseout",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mousedown",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mouseup",myfuncT,false);	
    	
    	document.getElementById('russian_button').addEventListener("mouseover",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mouseout",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mousedown",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mouseup",myfuncR,false);
    	
    	document.getElementById('spanish_button').addEventListener("mouseover",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mouseout",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mousedown",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mouseup",myfuncS,false);
    	
    	document.getElementById('french_button').addEventListener("mouseover",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mouseout",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mousedown",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mouseup",myfuncF,false);
    
    	function myfuncE(event){
    		if(event.type == "mouseover"){
    			this.src = 'English_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'English_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'English_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'English_01.jpg';
    		}
    	}
    	function myfuncG(event){
    		if(event.type == "mouseover"){
    			this.src = 'German_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'German_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'German_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'German_01.jpg';
    		}
    	}
    	function myfuncT(event){
    		if(event.type == "mouseover"){
    			this.src = 'Tagalog_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Tagalog_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Tagalog_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Tagalog_01.jpg';
    		}
    	}
    	function myfuncR(event){
    		if(event.type == "mouseover"){
    			this.src = 'Russian_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Russian_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Russian_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Russian_01.jpg';
    		}
    	}
    	function myfuncS(event){
    		if(event.type == "mouseover"){
    			this.src = 'Spanish_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Spanish_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Spanish_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Spanish_01.jpg';
    		}
    	}
    	function myfuncF(event){
    		if(event.type == "mouseover"){
    			this.src = 'French_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'French_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'French_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'French_01.jpg';
    		}
    	}
    }
    window.onload = addListeners;

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086
    Use CSS Sprites instead.

  3. #3
    Join Date
    Aug 2013
    Posts
    3
    I'll take a look at it.
    Thanks.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,109
    I came up with some code, but it's 2AM and I suspect it needs some tweaking in the way that I pass parameters to the 'imgSwitch' function in the attachEvent calls, but should work as a foundation as long as you stick to your naming conventions:
    Code:
    function addListeners(){
     var eList = new Array('english','german','tagalog','russian','spanish','french');
     var el;
      for (i=0, i<eList.length; i++) {
       el = document.getElementById(eList[i] + '_button');
         if (window.addEventListener) {
           el.addEventListener('mouseover', imgSwitch(eList[i],'02'), false);
           el.addEventListener('mouseout', imgSwitch(eList[i],'01'), false);
           el.addEventListener('mousedown', imgSwitch(eList[i],'03'), false);
           el.addEventListener('mouseup', imgSwitch(eList[i],'01'), false);
          } else if (window.attachEvent) {
           el.attachEvent('onmouseover', imgSwitch(eList[i],'02'));
           el.attachEvent('onmouseout', imgSwitch(eList[i],'01'));
           el.attachEvent('onmousedown', imgSwitch(eList[i],'03'));
           el.attachEvent('onmouseup', imgSwitch(eList[i],'01'));
         } // endif addEventListener
      } // end for i
    } // end addListeners()
    
    function imgSwitch(elName,imgNum) {
      document.getElementById(elName + '_button').src = elName.charAt(0).toUpperCase() + elName.slice(1) + '_' + imgNum + '.jpg';
     }
    
    if (window.addEventListener) { // W3C standard
      window.addEventListener('load', addListeners, false);
     } else if (window.attachEvent) { // MSIE < 9
      window.attachEvent('onload', addListeners);
    }
    It's certainly more compact and it adds compatibility with older versions of Internet Explorer.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086
    sprite-demo.gif
    http://css-tricks.com/css-sprites/

    Google has been after me to use sprites on a popular page of mine which uses too many image rollovers. You will be sorry if you use JavaScript instead of CSS Sprites. Your page will load much slower, Google will hate it. Users will not be impressed.
    Rollovers are so 1999.

    Every single image, whether it's an <img> tag or an background-image from your CSS is a separate HTTP-Request, so you can imagine how quickly those requests can add up.

    Using CSS sprites, you can combine all of your images onto one page and then just move it about using CSS. No http requests, no javascript, no delay, no image pre loaders.
    Last edited by donatello; 09-02-2013 at 09:03 AM.

  6. #6
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086
    For an example, you can see a site idea I have been playing with... the site is not done and you cannot download the sprite scripts, but you can see how they can be created.

    http://www.spritesgenerator.com

    None of those buttons are rollovers, they are all CSS Sprites.


    The page below actually works and you can download the buttons you create in a zip file. I will eventually finish this whole site, but have to put my time into projects that can generate income. This one, probably never will.
    http://www.spritesgenerator.com/generator/

    ANOTHER big advantage of sprites is that they will help your SEO.
    You will be using actual text instead of images for your buttons.
    Google likes text in links.
    Last edited by donatello; 09-02-2013 at 09:02 AM.

  7. #7
    Join Date
    Aug 2013
    Posts
    3
    Looked into it a bit.

    I'm a little bit familiar with CSS, so I had been wondering if there was a way to do it with CSS. I gave up though and began working on the JavaScript.

    Thanks a bunch.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles