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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2003
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    filter multiple images onMouseover

    I have a few navigation buttons, namely "nav1", "nav2", "nav3" and a group of images associated with the buttons: "nav1a", "nav1b", "nav2a", "nav2b", "nav3a", "nav3b".

    The group of images are originally filtered to an opacity of 40%.
    (In the stylesheet, filter:alpha(opacity=40))

    How can I make it so that when I rollover "nav1", both "nav1a" and "nav1b" return to an opacity of 100%? I tried naming both images the same name, but then "document.imgname...." doesn't recognize more than one image. Plus, I have not a clue how "filtering" is done in javascript (only in css).

    In reality, I have a lot more images so I don't want to use image-ons and image-offs, taking more time to load. Thanks.

  • #2
    New Coder
    Join Date
    Mar 2003
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i figured out most of if finally. my only questions now is...

    i have lets say 3 images with the same name
    <img src="theimage0.jpg" name="thename">
    <img src="theimage1.jpg" name="thename">
    <img src="theimage2.jpg" name="thename">

    I refer to them by:
    document["thename"][0].src = "new.jpg";
    document["thename"][1].src = "new.jpg";
    document["thename"][2].src = "new.jpg";

    How can I refer to all 3 images by a single line?
    I tried document["thename"].src = "new.jpg"; but it doesn't work.
    Thanks.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts

    i think this is what you are looking for??

    <img src=img\1.bmp id=img1 onmouseover="chngFilter('img1','img2');" onmouseout="Fltr('img1','img2');" style="filter:alpha(opacity:40,style:0);">
    <img src=img\2.bmp id=img2 onmouseover="chngFilter('img2','img3');" onmouseout="Fltr('img2','img3');" style="filter:alpha(opacity:40,style:0);">
    <img src=img\3.bmp id=img3 onmouseover="chngFilter('img3','img1');" onmouseout="Fltr('img3','img1');" style="filter:alpha(opacity:40,style:0);">



    <script language=javascript>

    function chngFilter(prim,sec){
    document.images[prim].style.filter='';
    document.images[sec].style.filter='';
    }
    function Fltr(prim,sec){
    document.images[prim].style.filter="alpha(opacity:40,style:0)";
    document.images[sec].style.filter="alpha(opacity:40,style:0)";
    }

    </script>





    in the above i just set the filter to nothing filter='';
    this works fine if all you want is to reset opacity to 100%

    if you wanted to change it to anything else you would have to do this

    document.images[sec].style.filter="alpha(opacity:80,style:0)";
    instead of
    document.images[sec].style.filter='';




    hope this helps

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    As for reffering all the images in one line...
    maybe a loop?

    for(i=0;i<theimage.lenght;i++){
    document["theimage"][i].something
    }

    or something like that.
    Shawn

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Northern California
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This will give you an Idea of how to apply filters with javascript. It is an uncompleted script though! Further information can be found here http://www.webreference.com/js/column68/

    Code:
    <html>
    <head>
    	<title>Test</title>
    	
    	<script language="Javascript">
    	function menuShow(ele){
    		
    	
       		var d=document.getElementById(ele);
    				d.filters[0].Apply();
    				if(d.className=="hidden")d.className="display";
    				else d.className="hidden";
    				d.filters[0].Play();
    			           
    		
    	}
    	
    	function menuToggle(ele,clss){
       	var d=document.getElementById(ele);
       		with(d){
    	
    			className=clss
    	
    		 }
    	}
    	</script>
    <style>
    #menu{position:absolute; top:80; left:175;}
    #menu1{position:absolute; top:10; left:10;}
    #menu2{position:absolute; top:10; left:120;}
    #menu3{position:absolute; top:10; left:230;}
    #menu4{position:absolute; top:10; left:340;}
    #menu5{position:absolute; top:10; left:450;}
    #div1{position:absolute; top:32; left:10;}
    #div2{position:absolute; top:32; left:120;}
    #div3{position:absolute; top:32; left:230;}
    #div4{position:absolute; top:32; left:340;}
    #div5{position:absolute; top:32; left:450;}
    
    .menuOff{background-color:#003366;
    	border:2px solid #666666;
    	cursor:hand;
    	color:white;
    	text-align:left;
    	font-weight:lighter;
    	width:100px;
    	
    	}
    .menuOn{background-color:#0066CC;
    	border:2px solid #666666;
    	cursor:hand;
    	color:white;
    	text-align:left;
    	font-weight:bolder;
    	width:100px;
    
    	}
    .submenuOff{background-color:#003366;
    	cursor:hand;
    	color:white;
    	text-align:left;
    	font-weight:lighter;
    
    	}
    .submenuOn{background-color:#0066CC;
    	cursor:hand;
    	color:white;
    	text-align:left;
    	font-weight:bolder;
    
    	}
    .hidden{
    	cursor:hand;
    	border:2px solid  #666666;
    	border-top-style:none;
    	background-color:#003366;
    	color:white;
    	width:100px;
    	display:none;	
    	filter:progid:DXImageTransform.Microsoft.Fade(duration=1.2,overlap=1.0);
    }
    .display{display:block;
    	cursor:hand;
    	border:2px solid  #666666;
    	border-top-style:none;
    	background-color:#003366;
    	color:white;
    	width:100px;
    	filter:progid:DXImageTransform.Microsoft.Fade(duration=1.2,overlap=1.0);
    	}
    </style>
    </head>
     
    <body bgcolor="black">
    <div id="menu">	
    	
    	
    	<div onclick="menuShow('div2')" onmouseover ="menuToggle(this.id,'menuOn')" 
    	onmouseout="menuToggle(this.id,'menuOff','0')" class="menuOff" id="menu2">&nbsp;Menu2</div>
    	
    	<span class="hidden" id="div2">
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu7" class="submenuOff">&nbsp;Submenu7</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu8" class="submenuOff">&nbsp;Submenu8</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu9" class="submenuOff">&nbsp;Submenu9</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu10" class="submenuOff">&nbsp;Submenu10</div>
    	
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu11" class="submenuOff">&nbsp;Submenu11</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu12" class="submenuOff">&nbsp;Submenu12</div>
    
    	</span>
    	
    	<div onclick="menuShow('div3')" onmouseover ="menuToggle(this.id,'menuOn')" 
    	onmouseout="menuToggle(this.id,'menuOff','0')" class="menuOff" id="menu3">&nbsp;Menu3</div>
    	
    	<span class="hidden" id="div3">
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu13" class="submenuOff">&nbsp;Submenu13</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu14" class="submenuOff">&nbsp;Submenu14</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu15" class="submenuOff">&nbsp;Submenu15</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu16" class="submenuOff">&nbsp;Submenu16</div>
    	
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu17" class="submenuOff">&nbsp;Submenu17</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu18" class="submenuOff">&nbsp;Submenu18</div>
    
    	</span>
    	
    	<div onclick="menuShow('div4')" onmouseover ="menuToggle(this.id,'menuOn')" 
    	onmouseout="menuToggle(this.id,'menuOff','0')" class="menuOff" id="menu4">&nbsp;Menu4</div>
    	
    	<span class="hidden" id="div4">
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu19" class="submenuOff">&nbsp;Submenu19</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu20" class="submenuOff">&nbsp;Submenu20</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu21" class="submenuOff">&nbsp;Submenu21</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu22" class="submenuOff">&nbsp;Submenu22</div>
    	
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu23" class="submenuOff">&nbsp;Submenu23</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu24" class="submenuOff">&nbsp;Submenu24</div>
    
    	</span>
    
    	<div onclick="menuShow('div5')" onmouseover ="menuToggle(this.id,'menuOn')" 
    	onmouseout="menuToggle(this.id,'menuOff','0')" class="menuOff" id="menu5">&nbsp;Menu5</div>
    	
    	<span class="hidden" id="div5">
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu25" class="submenuOff">&nbsp;Submenu25</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu26" class="submenuOff">&nbsp;Submenu26</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu27" class="submenuOff">&nbsp;Submenu27</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu28" class="submenuOff">&nbsp;Submenu28</div>
    	
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu29" class="submenuOff">&nbsp;Submenu29</div>
    
    		<div onmouseover="menuToggle(this.id,'submenuOn')"  
    		onmouseout="menuToggle(this.id,'submenuOff')" id="submenu30" class="submenuOff">&nbsp;Submenu30</div>
    
    	</span>	
    </div>
    </body>
    </html>
    Last edited by scriptkeeper; 10-13-2003 at 08:14 AM.


  •  

    Posting Permissions

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