fade effect probleempje

Status
Niet open voor verdere reacties.

Ed121212

Gebruiker
Lid geworden
1 mrt 2007
Berichten
32
Ik heb een fade effect ("gradualshine") aangebracht bij een plaatje. In een test .html file werkte het ok: het plaatje wordt vervaagd weergegeven (lage opacity), en wordt bij mouse-over helder van kleur (100% opacity).
Vervolgens heb ik het script op m'n website ondergebracht in een externe .css file en een externe .js file. Het script werkt ok, alleen hapert het nu bij aanvang: In plaats van dat de afbeelding bij het verversen van de .html pagina vervaagd wordt weergegeven, wordt het nu helder (normaal) van kleur weergegeven. Pas als ik eerst een keer over de afbeelding ga, werkt het mouse-over gedrag wel zoals het hoort. Rara wat kan er loos zijn??
 
Wat er loos is is moeilijk te zeggen zonder broncode. :) Heb je een link naar de pagina? Of je kan het hier posten.

Werkt het zo?
PHP:
<img src="plaatje.jpg" style="filter: alpha(opacity=50);" onmouseover="this.filters.alpha.opacity = 100;" onmouseout="this.filters.alpha.opacity = 50;">
Misschien is opacity fout geschreven in het stylesheet, zonder filter: alpha(); krijg je een javascript foutmelding.
PHP:
<img src="plaatje.jpg" style="filter: gray();" onmouseover="this.filters.gray.enabled = 0;" onmouseout="this.filters.gray.enabled = 1;">
Grijs / kleur, ook wel leuk. ;)


Vr.Gr. Egel.
 
Bijgaand de code:

== 1.) In externe .css file: ==

.gradualshine{filter:alpha(opacity=30); -moz-opacity:0.3;}

== 2.) In externe .js file (javascript): ==

var baseopacity=30
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}
function slowlow(which2){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

== 3.) In .html file (Dreamweaver) in de HEAD: ==

<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="gradualshine.js" language="javascript" type="text/javascript"></script>

== 4.) In .html file (Dreamweaver) in de BODY: ==

<img src="plaatje.jpg" alt="foto" width="150" height="150" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" />

Noot: als ik .js en .css in interne style sheet zet werkt het wel goed.

Enig idee voor een oplossing? :rolleyes:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan