SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2000
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On several occasions, I have attempted to create rollovers using JavaScript. When previewed through Dreamweaver (Browsers IE and Netscape), the scripts work great, but when I post them to my server, I get "variables navc and navcover, undefined". Note, I didn't use the Dreamweaver scripting tools; I am trying to create my own code, using several different scripts I found in Javascript manuals. I I can't figure out what is happening after I load it on my server. My host says the server should make no difference because it's a client-side script. Okay so??
    Please, some advice.

    In the following example, I am using the same original and rollover images for all of my links.

    <html>
    <head>
    <script language="JavaScript">
    <!--
    if (document.images) {
    var navc=new Image (52,32);
    var navcover=new Image(52,32);
    navc.src="Images/navcenter.gif";
    navcover.src="Images/navcenterp.gif";
    }
    else {
    navc="";navcover=""; navb="";navbover=""; document.navcenter1="";document.navcenter2=""; document.navcenter3="";document.navcenter4="";
    }</script>

    //-->
    </head>
    <body>

    <a href="index.htm" onMouseOver="document.navcenter1.src=navcover.src" onMouseOut="document.navcenter1.src=navc.src" ><img name="navcenter1" src="Images/navcenter.gif" width="52 height="32"></a>

    <a href="about.htm" onMouseOver="document.navcenter2.src=navcover.src" onMouseOut="document.navcenter2.src=navc.src"><img name="navcenter2" src="Images/navcenter.gif" width="52" height="32"></a>

    and so on...
    </body>
    </html>

    Thanks in advance. This is killing me.

  2. #2
    SitePoint Member
    Join Date
    Oct 2000
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the if statement isn't necessary and it may be causing the problems. try taking it out.
    go to www.kubmedia.com, a great web page design site, and sign up to be the first to find out when it launches!

  3. #3
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are several problems with your code. Let me suggest reading my article on MouseOvers. It's pretty easy to read and there's lots of sample code for you to use.

    Mouseovers Tutorial on Sausage Island
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  4. #4
    SitePoint Zealot HotDog's Avatar
    Join Date
    May 2000
    Location
    Salt Lake City, UT
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using this simple mouseOver code. It's well documented and very versatile. You can use it to switch any image on your page from any anchored element.

    Joe



    Code:
    <html>
    <head>
    <!--Scripts by Joe Eliason.  You can use this script freely as long as this comment stays
        intact with the code.  Any questions or comments please email me at papito@yahoo.com.-->
     
    <script type="text/javascript" language="javascript">
    
    <!--
    //Roll over commands//
    
    	//command for mouseOver
    function on_img(loc,img)
    {
    	loc.src=menuimg[img].src;
    }
    	//command for mouseOut...Same function as on_img.  Can use one or both functions, works the same.
    function off_img(loc,img)
    {
    	loc.src=menuimg[img].src;
    }
    
    //Define and setup image array:   (your variable)menuimg = new Array (2) <-- the number of images in the array
    menuimg = new Array(2);
    
    //List your images in the array.//
    
    //FIRST IMAGE  
    //The first line (menuimg[0]= new Image (42,499);) defines it as an Image with its width and height
    menuimg[0]= new Image (42,499);
    //The second line (menuimg[0].src="Images/lineBar0.gif";) defines the image source location
    menuimg[0].src="Images/lineBar0.gif";
    
    //SECOND IMAGE
    menuimg[1]= new Image (42,499);
    menuimg[1].src="Images/lineBar1.gif";
    
    //add more arrays just like above for more images
    //-->
    </script>
    </head>
    
    <body bgcolor="#ffffff" text="#000000" id=all>
    <table align="left" border=0 cellpadding=0 cellspacing=0>
    	<tr>
    		<td rowspan=1 colspan=1 width=183 height=34>
    			<!--On the onMouseOver command run the function from the above script...on_img(imageName,Array Number);-->
    			<!--Use the [self.status'']command for text in the status bar at the bottom.  Leave blank for no text.-->
    			<!--On the onMouseOut command  run the "off_img()" command to return to to the orriginal image.-->
    			<a href="directoryIndex.html" onmouseover="on_img(lineBar,1);on_img(directory,10);self.status='Company Directory';return true"onmouseout= "off_img(directory,11);self.status='';return true">
    			<!--Give you image a name to be refered by (name="whatever"-->
    			<img src="Images\directory1.gif" name="directory" width=183 height=34 border=0></td>
    	</tr>
    
    <!--Your image name must be the same as the name you put in the anchor
     tag command [onMouseOut="on_image(imageName,Array Number)] associated
     with the image you want to switch.  If you put a different image name
     in the anchor tag mouseOver command you will switch the image with that
     name.  Play around with it. -->
    </table>
    </body>
    </html>
    Last edited by HotDog; May 23, 2001 at 12:19.
    Joe Eliason
    Just a dog learnin' PHP from cat.

  5. #5
    SitePoint Member
    Join Date
    Aug 2000
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your suggestions. Anxious to try them all. Great tutorial Kevin. Thanks for the code, Joe.


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
  •