Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Javascript error: 'normal_image' is not defined.

    I got some rollover buttons that aren't "rolling over". Can you spot the mistake please? I guess it has something to do with the way 'normal_image' has been defined? hrhr. Well, I added one button when I first started the page, and the rollover worked perfectly. Then I added a second and a third and when I went to the page, they all showed up but the rollover didn't work. I'm guessing that I have to differentiate the buttons from each other within the 'normal-image' declaration but I don't know how to. You can see that I tried adding sequential numbering to the end of the 'normal_image' and 'mouseover_image' entries. Didn't work...

    The page is located at http://www.easidesigns.co.uk/test.

    HTML:

    Code:
    <script language="javascript" type="text/javascript">
    normal_image1 = new Image();
    normal_image1.src = "images/branding.png";
    mouseover_image1 = new Image();
    mouseover_image1.src = "images/hover-branding.png";
    
    normal_image2 = new Image();
    normal_image2.src = "images/print.png";
    mouseover_image2 = new Image();
    mouseover_image2.src = "images/hover-print.png";
    
    normal_image3 = new Image();
    normal_image3.src = "images/web.png";
    mouseover_image3 = new Image();
    mouseover_image3.src = "images/hover-web.png";
    
    normal_image4 = new Image();
    normal_image4.src = "images/photography.png";
    mouseover_image4 = new Image();
    mouseover_image4.src = "images/hover-photography.png";
    
    normal_image5 = new Image();
    normal_image5.src = "images/about.png";
    mouseover_image5 = new Image();
    mouseover_image5.src = "images/hover-about.png";
    
    normal_image6 = new Image();
    normal_image6.src = "images/news.png";
    mouseover_image6 = new Image();
    mouseover_image6.src = "images/hover-news.png";
    
    normal_image7 = new Image();
    normal_image7.src = "images/contact.png";
    mouseover_image7 = new Image();
    mouseover_image7.src = "images/hover-contact.png";
    
    function swap(){
    if (document.images){
    for (var x=0;
    x<swap.arguments.length;
    x+=2) {
    document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
    }
    }
    }
    </script>
    
    <div id="container">
    
        <div id="menu1">
        
            <ol id="line1">
            
                <li class="brand">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image1')" 
                    onMouseOut="swap('name_of_img','normal_image1')">
                    <img name="name_of_img" src="images/branding.png" border="0"></a>
                </li>
                <li class="print">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/print.png" border="0"></a>
                </li>
                <li class="stationery">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/stationery.png" border="0"></a>
                </li>
                
            </ol>
    
    	</div>
        
        <div id="menu2">
        
            <ol id="line2">
                
                <li class="web">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/web.png" border="0"></a>
                </li>
                <li class="photography">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/photography.png" border="0"></a>
                </li>
            
            </ol>
        
        </div>
    
        <div id="menu3">
        
            <ol id="line3">
                
                <li class="about">
                    <a href="http://www.easidesigns.co.uk/test/about.html" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/about.png" border="0"></a>
                </li>
                <li class="news">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/news.png" border="0"></a>
                </li>
                <li class="contact">
                    <a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')" 
                    onMouseOut="swap('name_of_img','normal_image')">
                    <img name="name_of_img" src="images/contact.png" border="0"></a>
                </li>
            
            </ol>
        
        </div>
    
    </div>
    CSS:

    Code:
    #container { display:inline-block; width:35em; margin:48.7em 0 0 2.5em; }
    #menu1 li, #menu2 li, #menu3 li { display:inline; }
    #line1 li.print { margin-left:1.9em; }
    #line1 li.stationery { margin-left:1.8em; }
    #line2 li.photography { margin-left:1.9em; }
    #line3 li.news {margin-left:1.9em; }
    #line3 li.contact { margin-left:1.8em; }
    Any help would be appreciated very much as I need this code fixed ASAP and I don't really understand Javascript at all!
    Last edited by `mishimasan`; 08-16-2008 at 12:28 PM.

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    29
    Thanks
    0
    Thanked 2 Times in 2 Posts
    A better way to use rollover images is with CSS. This is a great tutorial - it works without JavaScript, which means it will work with users who have JS disabled, and it doesn't have a second wait for the browser to load it -- it's already part of the image.

    http://www.nerdliness.com/article/20...er-buttons-css

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I don't want to use CSS rollover buttons, I know them very well. In the case of this webpage, javascript is working much better.

    Please help.

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Hi,

    There's a few problems evident.

    1. swap function parameters
    The inline swap function calls are all using the same <img> name and the same image object name, so they cannot work. Each list item's <img> name needs to be unique, so it can be properly referenced, e.g. something like img_brand, img_print, etc. And each call needs to carry the corresponding names for the <img> tag and the image object. Like so, for the first two list items:

    Code:
    <li class="brand">
      <a href="http://www.easidesigns.co.uk" 
        onMouseOver="swap('img_brand','mouseover_image1')" 
        onMouseOut="swap('img_brand','normal_image1')">
        <img name="img_brand" src="images/branding.png" border="0"></a>
    </li>
    <li class="print">
      <a href="http://www.easidesigns.co.uk" 
        onMouseOver="swap('img_print','mouseover_image2')" 
        onMouseOut="swap('img_print','normal_image2')">
        <img name="img_print" src="images/print.png" border="0"></a>
    </li>

    2. swap function itself
    The swap function calls here always have two parameters; no more. Use the following instead:

    Code:
    function swap(imgName, imgObject){
      if (document.images) {
        document[imgName].src = eval(imgObject + ".src");
      }
    }
    3. Missing image object definitions.
    In the html, there is a list item for "stationery", but nothing in the initial script to create its image objects and sources. These will need to be added in.

  • Users who have thanked auslin for this post:

    `mishimasan` (08-16-2008)

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks a lot for that but it still doesn't work.

    After making the changes you suggested, I tried it to no avail. I then removed all the other images bar the first one, and refreshed the page. It works, as before. So... what am I missing here? The function must be incorrect, somewhere - since when there's only one image with two states, it works fine. As soon as I add more images, the whole mechanism does not work.

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I've fixed it!

    The way that I did it was to, remove all the clunky code that was unnecessary and replace it along with the function script as so:

    Code:
    <script type="text/javascript">
    var revert = new Array();
    var inames = new Array('branding','print','stationery','web','photography','about','news','contact');
    
    if (document.images) { // Preload
      var flipped = new Array();
      for(i=0; i< inames.length; i++) {
        flipped[i] = new Image();
        flipped[i].src= "images/"+inames[i]+"2.png";
      }
    }
    
    function over(num) {
      if(document.images) {
        revert[num]=document.images[inames[num]].src;
        document.images[inames[num]].src= flipped[num].src;
      }
    }
    function out(num) {
      if(document.images) document.images[inames[num]].src= revert[num];
    }
    </script>
    
    
    <div id="container">
    
        <div id="menu1">
        
            <ol id="line1">
            
                <li class="brand">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/branding.png" name="branding" onMouseOver="over(0)" onMouseOut="out(0)"></a>            
                </li>
                <li class="print">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/print.png" name="print" onMouseOver="over(1)" onMouseOut="out(1)"></a>            
                </li>
                <li class="stationery">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/stationery.png" name="stationery" onMouseOver="over(2)" onMouseOut="out(2)"></a> 
                </li>
                
            </ol>
    
    	</div>
        
        <div id="menu2">
        
            <ol id="line2">
                
                <li class="web">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/web.png" name="web" onMouseOver="over(3)" onMouseOut="out(3)"></a> 
                </li>
                <li class="photography">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/photography.png" name="photography" onMouseOver="over(4)" onMouseOut="out(4)"></a> 
                </li>
            
            </ol>
        
        </div>
    
        <div id="menu3">
        
            <ol id="line3">
                
                <li class="about">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/about.png" name="about" onMouseOver="over(5)" onMouseOut="out(5)"></a> 
                </li>
                <li class="news">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/news.png" name="news" onMouseOver="over(6)" onMouseOut="out(6)"></a> 
                </li>
                <li class="contact">
                    <a href="http://www.easidesigns.co.uk/" <img src="images/contact.png" name="contact" onMouseOver="over(7)" onMouseOut="out(7)"></a>
                </li>
            
            </ol>
        
        </div>
    
    </div>
    For multiple rollover images, this is optimal. It also preloads the image.

    @ Auslin, thank you for your input. I believe that you are correct when you say that a swap function parameter should have no more than two codes, IF the swap function is only meant for a single, double-sided rollover image. However, in this case where 8 images are used, a more complex function is needed.

    You can see the page working here: http://www.easidesigns.co.uk/test


  •  

    Posting Permissions

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