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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with multiple rollovers...

    OK, I finally got A rollover to work but now I'm having trouble with multiple ones. The first one works fine, but none of the others do, just says that there is an error on the page. Please help as I'm about to go bold from ripping my hair out... I mean everything looks good to me. But I don't know much so here.


    Here is the <head></head> part:


    Code:
    <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
    	<!-- Hide script from old browsers
    
    	if (document.images) {
    		links1Home1 = new Image
    		links1Home = new Image
    		
                    links2Forums1 = new Image
                    links2Forums = new Image
                    
                    links3Rarticles = new Image
                    links3Articles = new Image
    
                    links4Faqs1 = new Image
    		links4Faqs = new Image
    
    
    links1Home1.src = "http://www.geocities.com/dr_montagues_research/links/1home.jpg"
    links1Home.src = "http://www.geocities.com/dr_montagues_research/links/home.gif"
    links2Forums1.src = "http://www.geocities.com/dr_montagues_research/links/1forum.jpg"
    links2Forums.src = "http://www.geocities.com/dr_montagues_research/links/forum.gif"
    links3Rarticles.src = "http://www.geocities.com/dr_montagues_research/links/rarticles.jpg"
    linksArticles.src = "http://www.geocities.com/dr_montagues_research/links/over.gif"
    links4Faqs1.src = "http://www.geocities.com/dr_montagues_research/links/1faqs.jpg"
    links4Faqs.src = "http://www.geocities.com/dr_montagues_research/links/faqs.gif"	}
         
    else {
    
    	links1Home1 = ""
    		links1Home = ""
    
    		linksForums1 = ""
    		linksForums = ""
    
    		linkRasrticles = ""
    		linksArticles = ""
    
                    linksFaqs1 = ""
    		linksFaqs = ""
    		
                    document.links1 = ""
    
                    document.links2 = ""
    
                    document.links3 = ""
    
                    document.links4 = ""
    	}
    
    	// End hiding script from old browsers -->
    	</SCRIPT>

    Then my links... sorry that it expends the page...


    Code:
    <A HREF="next.html" onMouseover="document.links1.src=links1Home1.src" onMouseout="document.links1.src=links1Home.src"><IMG SRC="links/home.gif" BORDER="0" NAME="links1" ALT="Home"></A>
    <A HREF="http://pso.proboards.com" onMouseover="document.links2.src=linksForums1.src" onMouseout="document.links2.src=linksForum.src"><IMG SRC="links/forum.gif" BORDER="0" NAME="links2" ALT="Forums"></A>
    <A HREF="articles.html" onMouseover="document.links3.src=linksRarticles.src" onMouseout="document.links3.src=linksArticles.src"><IMG SRC="links/over.gif" BORDER="0" NAME="links3" ALT="Articles"></A>
    <A HREF="faqs.html" onMouseover="document.links4.src=linksFaqs1.src" onMouseout="document.links4.src=linksFaqs.src"><IMG SRC="links/faqs.gif" BORDER="0" NAME="links4" ALT="Faqs"></A>

    Thank you

  • #2
    New to the CF scene
    Join Date
    Jan 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *bump*

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Moncton, N.B., Canada
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    Your naming of these images were confusing you. I think you might want to try a better naming method. Even when you called the image swap you got confused as to what you called the images. I had to look in your directory: http://www.geocities.com/dr_montagues_research/links/
    to see what you had for images.

    http://www.geocities.com/dr_montague...nks/1forum.jpg doesn't exist so the rollover won't work no matter what.

    Your over image for articles is:
    http://www.geocities.com/dr_montague...inks/1char.jpg

    I got the rest to work though.

    Code:
    if (document.images) {
    	links1Home1 = new Image();
    	links1Home = new Image();
    	links2Forums1 = new Image();
       links2Forums = new Image();
       links3Rarticles = new Image();
       links3Articles = new Image();
       links4Faqs1 = new Image();
    	links4Faqs = new Image();
    	links1Home1.src = "http://www.geocities.com/dr_montagues_research/links/1home.jpg"
    	links1Home.src = "http://www.geocities.com/dr_montagues_research/links/home.gif"
    	links2Forums1.src = "http://www.geocities.com/dr_montagues_research/links/1forum.jpg"
    	links2Forums.src = "http://www.geocities.com/dr_montagues_research/links/forum.gif"
    	links3Rarticles.src = "http://www.geocities.com/dr_montagues_research/links/rarticles.jpg"
    	links3Articles.src = "http://www.geocities.com/dr_montagues_research/links/over.gif"
    	links4Faqs1.src = "http://www.geocities.com/dr_montagues_research/links/1char.jpg"
    	links4Faqs.src = "http://www.geocities.com/dr_montagues_research/links/faqs.gif"
    }
    else {
    	links1Home1 = ""
    	links1Home = ""
    	linksForums1 = ""
    	linksForums = ""
    	linkRasrticles = ""
    	linksArticles = ""
    	linksFaqs1 = ""
    	linksFaqs = ""
    	document.links1 = ""
    	document.links2 = ""
    	document.links3 = ""
    	document.links4 = ""
    }
    Code:
    <td><a onmouseover="document.links1.src=links1Home1.src"
          onmouseout="document.links1.src=links1Home.src"
          href="http://www.geocities.com/dr_montagues_research/next.html"><img
          alt="Home" src="Dr Montague's Research_files/home.gif" border="0"
          name=links1></a><a onmouseover="document.links2.src=links2Forums.src"
          onmouseout="document.links2.src=links2Forums1.src"
          href="http://pso.proboards.com/"><img alt="Forums"
          src="Dr Montague's Research_files/forum.gif" border=0 name="links2"></a><a
          onmouseover="document.links3.src=links3Rarticles.src"
          onmouseout="document.links3.src=links3Articles.src"
          href="http://www.geocities.com/dr_montagues_research/articles.html"><img
          alt="Articles" src="Dr Montague's Research_files/over.gif" border="0"
          name="links3"></a><a onmouseover="document.links4.src=links4Faqs1.src"
          onmouseout="document.links4.src=links4Faqs.src"
          href="http://www.geocities.com/dr_montagues_research/faqs.html"><img
          alt="Faqs" src="Dr Montague's Research_files/faqs.gif" border="0"
          name="links4"></a><a
          href="http://www.geocities.com/dr_montagues_research/sucks/html"><img
          src="Dr Montague's Research_files/drops.gif"></a><a
          href="http://www.geocities.com/dr_montagues_research/sucks.html"><img
          src="Dr Montague's Research_files/links.gif"></a>
          </td>
    I have an easier way to do this. When you make your images for the rollovers you can call them menu0, menu1, menu2, menu3 etc. when you save them. For your page, menu0 would be the "Home" gif, menu1 would be the "Home" over gif. "Forum" would be menu2 etc. Make sure you save them all as either gifs or jpgs. Then in your js script you would code:

    Code:
    var myMenu = new Array(12); 
    // 12 for the number you have, or some other number depending on the total
    if(document.images) 
    {
    	var mLen = myMenu.length;
    	for(var i = 0; i < mLen; i++)
    	{
    		myMenu[i] = new Image();
    		myMenu[i].src = "images/tMenu" + i + ".gif";
    	}
    }
    
    function chgImg(imgName, imgSrc)
    {
        if(document.images) { 
        document.images[imgName].src = imgSrc; 
        }
    
    }
    In your table you could do something like this:

    Code:
    <td>
    		<a href="Skills_Training.htm" onmouseout="chgImg('Skills', myMenu[0].src)"
    				onmouseover="chgImg('Skills', myMenu[1].src)">
    			<img src="images/tMenu0.gif" width="137" height="37" name="Skills"
    			border="0" alt="Skills and Training" /></a></td>
    		<td>
    		<a href="Portfolio.htm" onmouseout="chgImg('Portfolio', myMenu[2].src)"
    				onmouseover="chgImg('Portfolio', myMenu[3].src)">
    			<img src="images/tMenu2.gif" width="91" height="37" name="Portfolio"
    			border="0" alt="Portfolio" /></a></td>
    		<td>
    		<a href="Javascript.htm" onmouseout="chgImg('Javascript', myMenu[4].src)"
    				onmouseover="chgImg('Javascript', myMenu[5].src)">
    			<img src="images/tMenu4.gif" width="145" height="37" name="Javascript"
    			border="0" alt="Javascript and DHTML" /></a></td>
    		<td>
    		<a href="CPP.htm" onmouseout="chgImg('CPP', myMenu[6].src)"
    				onmouseover="chgImg('CPP', myMenu[7].src)">
    			<img src="images/tMenu6.gif" width="83" height="37" name="CPP"
    			border="0" alt="C++ and Java Code" /></a></td>
    		<td>
    		<a href="Links.htm" onmouseout="chgImg('Links', myMenu[8].src)"
    				onmouseover="chgImg('Links', myMenu[9].src)">
    			<img src="images/tMenu8.gif" width="148" height="37" name="Links"
    			border="0" alt="Links and Resources" /></a></td>
    		<td>
    			<img src="images/wddBig_08.gif" width="52" height="37" alt="right" /></td>
    It's a lot less confusing, the for loop and simple mouseover/mouseout function will take care of most of it as long you remember to name your images menu0, menu1 etc.

    - Terry

  • #4
    New to the CF scene
    Join Date
    Jan 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Terry thanks, you’re awesome!

    It took me awhile to figure out how to use your script, I couldn’t get it to work in the beginning then I realized that my rollover images were .jpg’s. After I got that sorted It was all down hill from there. It is a lot more convenient and as you said not so confusing. I'm still thinking about what graphic I should change on the rollover. If you want to see what I've done so far check this. I think I'll go with the Forum one, I like the twist. No content yet, just the basic layout, tell me what you think. Anyway Thanks again!


  •  

    Posting Permissions

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