[js] layer alpha opacity

[Willem]

Heb een JS functie waarbij de style filter = alpha(opacity=x); wordt toegekend.

code:

function layerstyle (layerNaam , opacityWaarde) {
  if ( IE4 )
    document.all [ layerNaam ].style.filter = 'alpha(opacity = [opacityWaarde])' ;

Als ik doe

code:

onmouseover="layerstyle('square01','50'); return true;"

Dan wordt -bij onmouseover- de img die in de layer staat 100% i.p.v. 50 (standaard staat 'ie op 15%).

Als ik doe

code:

onmouseout="layerstyle('square01','15'); return true;"

dan gaat 'ie bij onmouseover niet terug naar opacity 15.
Snappen jullie wat ik bedoel ?
Hoe kan ik dat oplossen...

[Pelle]

Huh, wat bedoel je precies? Je hebt een layer met een opacity van 15. Nu wil je met een rollover daar 100 van maken, en onmouseout weer terug naar 15?

Post eens een linkje, dan ken ik ff kijken.

[Willem]

Op woensdag 14 november 2001 14:40 schreef Pelle het volgende:
Huh, wat bedoel je precies? Je hebt een layer met een opacity van 15. Nu wil je met een rollover daar 100 van maken, en onmouseout weer terug naar 15?

Post eens een linkje, dan ken ik ff kijken.

Ehm ja.
Dat is wel de bedoeling.. ik liep een beetje hard van stapel omdat mijn functie dus niet werkt, maar wat jij zegt is wel de intentie van het verhaal ja.

Een layer (met een plaatje) van 15% opacity die als mouseover 100% wordt en mouseout weer 15%.

En dat werkt dus niet met de JS functie hierboven.

[RM-rf]

code:

function layerstyle (layerNaam , opacityWaarde) {
  if ( IE4 )
    document.all [layerNaam].style.filter = 'alpha(opacity='+opacityWaarde+')' ;
  else if (document.getElementById)
    document.getElementById(layerNaam).style.setAttribute("moz-transparancy", opacityWaarde)
}

misschien helpt dit al, verder meldt microsoft zelf een officiele propertie waarde van:

code:

 object.style.filter =
"progid:DXImageTransform.Microsoft.Alpha(sProperties)"

voor msie5.5 en later
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha.asp

en levert de aanroep een error op als directX uitstaat.

heb op de lichte gok nog de mozilla-toepassing van transparantie toegevoegd (tja, we houden het een beetje crossbrowser) die geldt als tijdelijke oplossing zolang css zelf nog geen transparantie properties kent

[McVirusS]

Die DX methode moet je niet gebruiken.......is IE5.5+ terwijl jouw methode wel in oudere IE's werkt...

Jouw code:

code:

document.all [ layerNaam ].style.filter = 'alpha(opacity = [opacityWaarde])' ;

Moet je veranderen in:

code:

document.all [ layerNaam ].style.filter = 'alpha(opacity = '+opacityWaarde+')' ;

Maar ook dat had RM-rf inmiddels gemeldt.

http://mcviruss.nl/got/alpha.html ; werkt dus .

[Pelle]

Wellicht is het ook handig op integers en string van elkaar gescheiden te houden.

Als je een getal aan een functie wilt geven, dan doe je dat zo:

code:

functieNaam(15);

En niet zo:

code:

functieNaam('15');

Nu denkt JS namelijk dat 15 een string is, en met een string kan je niet zo goed rekenen, of in dit geval een waarde toekennen aan de opacity.

Als je het erg makkelijk wilt doen, dan kun je ook nog zoiets proberen:

code:

function changeClass(what, how) {
    document.all[what].className = how;
}   

<a href="#" onMouseOver="changeClass('sjaak', 'class100')" onMouseOut="changeClass('sjaak', 'class15')">dus</a>

Met 2 classes (class15 en class100, waarbij je in allebei de classes een andere opacity zet).