Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

[javascript] Alpha / opacity?

Jag försöker få till en halvgenomskinlig effekt vid ett knapptryck i ett html-dokument mha javascript, men får inte riktigt till syntaxen.

Jag behöver det nämligen inline (dvs. inte genom ett funktionsanrop, utan I själva taggen som ska göras genomskinlig).

Jag har testat en hel del variationer användande opacity och alpha, men inget vill sig.

onclick="this.style.opacity=0.5;" onclick="this.style.opacity='0.5';" onclick="this.style.opacity=50;" onclick="this.style.opacity='50';" onclick="this.style.alpha=0.5;" ...osv..

Nån som har den exakta syntaxen, tro?

Bro!

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2003

... onclick="this.style.opacity=0.5;this.filters.alpha.opacity=50;" ...

Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

Jäklar, det var en lång mask till kod. Men den funkar inte...gör den verkligen det för dig?

enkelt test ger ingen respons:

<html><head></head><body> <div onclick="this.style.opacity=0.5;this.filters.alpha.opacity=50;"> testing, testing </div> </body></html>

Bro!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av DanTheMAN!
enkelt test ger ingen respons:

Det där funkar bra i de webbläsare som stödjer egenskapen opacity. Vilket IE inte gör.

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

Ja, den här funkade ju ex. i IE

<html><head> <style type="text/css"> .shadow { background-color: transparent; opacity: 0.4; /* IE 6 & 7 */ filter: alpha(opacity=40); zoom: 1.0; } </style> </head><body> <p class="shadow">TESTING</p> </body></html>

Men hur gör jag om det till något anropbart från js?

Jag har försökt mig på följande:

onclick="this.style.backgroundColor='transparent';this.style.opacity='0.5';this.filters.alpha.opacity='50';this.style.zoom='1.0';"

Men det funkar inte.

Däremot har jag för mig att man kan byta css-id från js, fast minns inte hur exakt. I stil med

onclick="this.css.id='shadow';"

Bro!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Undvik att byta ID på ett element i run-time. Lägg till eller ta bort klasser istället. Anledningen till att din långa, jättefula rad (:P) inte fungerar, är antagligen att IE inte fattar opacity och därför avbryter körningen där (alltså kommer inte det med filtret med).

Jag tycker du ska prova att använda jQuery istället. Detta är kod för att manipulera ett element med jQuery:

<!-- först ett HTML-element --> <p id="shadow">Text</p>

// nu JavaScript $(function(){ // on DOM ready var shadow = $('#shadow'); // get element shadow.css('opacity', 0.50); // opacity 50 % shadow.animate({ opacity: 0.50 }, 1000); // animera opacity 50 % });

Bra resurs: http://visualjquery.com/

Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

Kan tyvärr inte använd jquery eftersom det är till en widget för wm 6.5 (som har ungefär samma begränsningar som ie, tydligen) :/

Så det får bli css-class swapping:

onclick="this.className='shadow';"

..eller css-id swapping:

onclick="this.id='shadow';"

Bro!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av DanTheMAN!
Kan tyvärr inte använd jquery eftersom det är till en widget för wm 6.5 (som har ungefär samma begränsningar som ie, tydligen) :/

Testat? http://community.softteq.com/blogs/nick/archive/2009/06/19/wh...