SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the best way to consolidate this code?

    Hello,

    I have the following block of code that changes an image when a link is rolled over. I just call each function with onMouseOver and onMouseOut. I am sure there is a better way to do this, what do you suggest?

    Code:
    //this function find the particular image within the document and swaps an //image
    function swapImage1() {
    	var newImage = document.getElementById('aboutPic'); //finds image
    	newImage.src="images/about.jpg"; //replaces image
    }
    
    function restore1() {
    	var oldImage = document.getElementById('aboutPic'); //finds image
    	oldImage.src="images/aboutBW.jpg"; //replaces it with original
    }
    function swapImage2() {
    	var newImage = document.getElementById('peoplePic');
    	newImage.src="images/people.jpg";
    }
    
    function restore2() {
    	var oldImage = document.getElementById('peoplePic');
    	oldImage.src="images/peopleBW.jpg";
    }
    function swapImage3() {
    	var newImage = document.getElementById('resourcesPic');
    	newImage.src="images/resources.jpg";
    }
    
    function restore3() {
    	var oldImage = document.getElementById('resourcesPic');
    	oldImage.src="images/resourcesBW.jpg";
    }
    function swapImage4() {
    	var newImage = document.getElementById('newsPic');
    	newImage.src="images/news.jpg";
    }
    
    function restore4() {
    	var oldImage = document.getElementById('newsPic');
    	oldImage.src="images/newsBW.jpg";
    }
    function swapImage5() {
    	var newImage = document.getElementById('contactPic');
    	newImage.src="images/contact.jpg";
    }
    
    function restore5() {
    	var oldImage = document.getElementById('contactPic');
    	oldImage.src="images/contactBW.jpg";
    }
    Thank you

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function add(el, normal, over) {
                    if(typeof(el) == 'string') 
                        el = document.getElementById(el);
                    
                    el.onmouseover = function() {
                        this.src = over;
                    };
                    el.onmouseout = function() {
                        this.src = normal;
                    };
                }    
                window.onload = function() {
                    add('test','http://www.pageresource.com/images/shoes1.gif','http://www.pageresource.com/images/shoes2.gif');
                };
            </script>
        </head>
        <body>
            
            <img src="http://www.pageresource.com/images/shoes1.gif" id="test" />
    
        </body>
    </html>
    Probably the only thing you'd need to change is how the events are added, but saying that, i've never had any problems as of yet.

    edit: sorry brain fart lead me to use el.img instead of el.src



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
  •