Premiär! Fyndchans i SweClockers Månadens Drop
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[javascript] Alpha / opacity?

1
Skriv svar
Permalänk
Medlem
●

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

Visa signatur

Bro!

Redigera
Citera flera Citera
Permalänk
Medlem
●
... onclick="this.style.opacity=0.5;this.filters.alpha.opacity=50;" ...
Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Bro!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Här finns lite info:
http://www.webmasterworld.com/css/3676444.htm

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

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';"
Visa signatur

Bro!

Redigera
Citera flera Citera
Permalänk
Medlem
●

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/

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●

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';"
Senast redigerat
Visa signatur

Bro!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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...

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara