SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Arrow preload or roll-over image is not working? why?

    Preloading image button is not working.

    hi guys i found out a complete instruction regarding "Preloading Rollover Image"
    and it works very fine.

    but when i implemented on my webpage which is a little nested with <DIVs>
    It doesn't work properly or the image doesn't show up.

    here is the link to that page that i'm currently working
    http://www.czone01.com/index2.htm

    noticed that the first button is suppose to be "Home" button is not visible.

    here is the javascript codes below;
    Code:
    <script type="text/javascript">
    <!--
      if (document.images)
       {
         pic1on = new Image(130,25);
         pic1on.src="images/home_button1.jpg";
    
         pic1off= new Image(130,25);
         pic1off.src="images/home_button2.jpg";
       }
    
    function homeON(imgName)
     {
       if (document.images)
        {
          imgOn=eval(imgName + "on.src");
          document[imgName].src= imgOn;
        }
     }
    
    function homeOFF(imgName)
     {
       if (document.images)
        {
          imgOff=eval(imgName + "off.src");
          document[imgName].src= imgOff;
        }
     }
    
    //-->
    </script>
    here are the codes the HREF under the <BODY> and inside multiple <DIVs>
    Code:
    <body>
    <div id='pagewrap'>
      <div id="header">
    	  <div id="header_logo"> 
    	    <div align="left"></div>
    	  </div>	
      </div>
    
    <div id="body1">  
    	<div id="menu">
    		<div id="home2">
    			<a HREF="http://www.czone01.com" onMouseover="homeON('home')" onMouseout="homeOFF('home')">
    			<img src="images/home_button1.jpg name="home" width="130" height="25" border="0"/></a>
    		</div>
    
    ....... more codes here
    
    </body>
    I hope someone will help me this, i'm really not very skillful when it comes to
    javascript.


    THANK YOU VERY MUCH!!! in advance!!!

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears to be the way you are naming your images. Instead of

    Code:
    document[imgName].src = imgOn;
    try

    Code:
    document.images.imgName.src = imgOn;
    or

    Code:
    document.images[imgName].src = imgOn;
    Check out this page for more information.

    Dave

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Dave i think you are the one taught me the link on "Preload roll over tutorial" and thanks for the help, and it really works.
    Here is the codes for that;

    Code:
    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript">
    <!--
      if (document.images)
       {
         pic1on = new Image(300,200);
         pic1on.src="image2.jpg";
    
         pic1off= new Image(300,200);
         pic1off.src="image1.jpg";
       }
    
    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>
    </HEAD>
    <BODY>
    	<center>
    	<a HREF="http://www.askjames01.com/roll-over/" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
    	<img SRC="http://www.askjames01.com/roll-over/image1.jpg" name="pic1" width="300" height="200" border="0">
    	</a>
    	</center>
    </BODY>
    </HTML>
    actually i tried it and it really works.
    now maybe because of the nested <DIVs> inside my webpage it made it
    invinsible.

    I hope BRO you will help me again, i'm really very noobs on javascript.
    I consider myself a little intermediate on it. i hope you will help me to figure it out.

    Thanks again in advance.

    -don't worry i'll try the first suggestion that you gave me.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suggestion

    Try this:

    Code:
    <script type="text/javascript">
    <!--
      if (document.images)
       {
         pic1on = new Image(130,25);
         pic1on.src="images/home_button1.jpg";
    
         pic1off= new Image(130,25);
         pic1off.src="images/home_button2.jpg";
    
         pic2on = new Image(130,25);
         pic2on.src="images/whatever1.jpg";
    
         pic2off= new Image(130,25);
         pic2off.src="images/whatever2.jpg";
    
         pic3on = new Image(130,25);
         pic3on.src="images/else1.jpg";
    
         pic3off= new Image(130,25);
         pic3off.src="images/else2.jpg";
    
       }
    
    function homeON(imgName)
     {
       if (document.images)
        {
          switch(imgName) {
                case "home":
                     imgOn = pic1on;
                     break;
                case "whatever":
                     imgOn = pic2on;
                     break;
                case "else":
                     imgOn = pic3on;
                     break;
           }
           document[imgName] = imgOn;
        }
     }
    
    function homeOFF(imgName)
     {
       if (document.images)
        {
          imgOff=eval(imgName + "off");
          document[imgName] = imgOff;
        }
     }
    
    //-->
    </script>

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is eval() in there? How about:

    document[imgName] = imgName + "off";

  6. #6
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks i will try it.


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
  •