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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    a little trouble getting a rollover script to work

    Hi all,

    I'm trying to get this script to work. It works on another page I have but for some reason I haven't been able to get it working here. To simplify matters I've commented out a large chunk because it is repetition of the same line just applied to different images -- so once i get one working the others will as well.

    here's the .js
    Code:
    function on1() 
    {if (!document.images) return; document.info.src = "images/info_BW.jpg"; document.title_display.src = "images/linkTest2.jpg";} 
    /*function on2() 
    {if (!document.images) return; document.b.src = "images/butt_2.gif"; document.label.src = "images/hotProd.jpg"; document.labelb.src = "images/labelbar_2.gif";}
    function on3() 
    {if (!document.images) return; document.c.src = "images/butt_3.gif"; document.label.src = "images/linecard.jpg"; document.labelb.src = "images/labelbar_3.gif";}
    function on4() 
    {if (!document.images) return; document.d.src = "images/butt_4.gif"; document.label.src = "images/prodSearch.jpg"; document.labelb.src = "images/labelbar_4.gif";}
    function on5() 
    {if (!document.images) return; document.e.src = "images/butt_5.gif"; document.label.src = "images/quote.jpg"; document.labelb.src = "images/labelbar_5.gif";}
    function on6() 
    {if (!document.images) return; document.f.src = "images/butt_6.gif"; document.label.src = "images/contact.jpg"; document.labelb.src = "images/labelbar_6.gif";}
    */
    function off1() 
    {if (!document.images) return; document.info.src = "images/info_BW.jpg"; document.title_display.src = "images/linkTest.jpg";} 
    /*function off2() 
    {if (!document.images) return; document.b.src = "images/butt_2.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
    function off3() 
    {if (!document.images) return; document.c.src = "images/butt_3.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
    function off4() 
    {if (!document.images) return; document.d.src = "images/butt_4.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
    function off5() 
    {if (!document.images) return; document.e.src = "images/butt_5.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
    function off6() 
    {if (!document.images) return; document.f.src = "images/butt_6.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
    */
    var imgslist = new Array(
    "images/linkTest2.jpg",
    /*"images/hotProd.jpg",
    "images/linecard.jpg",
    "images/prodSearch.jpg",
    "images/quote.jpg",
    "images/contact.jpg",
    "images/linkTest2.gif",
    "images/labelbar_2.gif",
    "images/labelbar_3.gif",
    "images/labelbar_4.gif",
    "images/labelbar_5.gif",
    "images/labelbar_6.gif"*/); 
    
    var imgs=new Array(); 
    for (x=0; x<imgslist.length; x++) 
     if (document.images) 
      {imgs[x]=new Image(); imgs[x].src = imgslist[x];}
    and here's how i'm applying it (see bold)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    
    
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/divToggler.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/link_titles.js"></script>
    
    </head>
    
    <body onload="zxcInitImages('logoC','links_BW')">
    <div id="pageContainer">
    	<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
    	<div id="logoC">
    		<img src="images/logoButtons/info_C.gif" >
    		<img src="images/logoButtons/YPP_C.gif" >
    		<img src="images/logoButtons/social_C.gif" >
    		<img src="images/logoButtons/med_C.gif" >
    		<img src="images/logoButtons/legal_C.gif" >
    		<img src="images/logoButtons/J2K_C.gif" >
    		<img src="images/logoButtons/street_C.gif" >
    	</div>
    	<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
    	<div id="linkHolder"><img src="images/linkTest.jpg" name="title_display"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" name="info" onmouseover="on1(); onmouseout="off1()">
    		<img src="images/logoButtons/YPP_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
    		<img src="images/logoButtons/social_BW.jpg" >
    		<img src="images/logoButtons/med_BW.jpg" >
    		<img src="images/logoButtons/legal_BW.jpg" >
    		<img src="images/logoButtons/J2K_BW.jpg" >
    		<img src="images/logoButtons/street_BW.jpg" >
    	</div>
    	<div class="clear"></div>
    	<div id="contentarea"></div>
    </div>
    </body>
    </html>
    if you need me to post pictures, etc I can... but for now I'm not getting any errors... the only thing is that in this application i'm not onmouseover'ing a link (i.e: <a href...>) but rather an image.

    notes:
    linkTest.jpg = a blank image to display when nothing is onmouseover'd
    linkTest2.jpg = a dummy but colored image to test the functionality with

    What have I messed up in the transition?
    Last edited by canadianjameson; 07-13-2007 at 09:31 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Hey... you are an old guy on Forum... You forgot to tell us what your code should do, and what went wrong...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hahaha! consider it a senior moment then

    www.enviromark.ca/english/index.html

    if you rollover the blue squares an arrow moves and a text-image changes depending on what link you roll over.

    I need to get the effect of the link rollover --> text-image change on another website i'm designing... and when I moved over the JS file and modified it as I though I needed to, it no longer worked.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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