...
PDA

filter multiple images onMouseover

loonatik
10-12-2003, 03:06 AM
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.
loonatik
10-12-2003, 04:53 AM
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.
brandonH
10-13-2003, 01:14 AM
<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
shlagish
10-13-2003, 05:53 AM
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.
scriptkeeper
10-13-2003, 08:07 AM
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/


<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>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum