Plaatje van zwart naar wit laten faden..

[Mooya]

Ik wil voor een site een achtergrond maken.
Ik heb een plaatje van zo'n 800x400 en die wil ik linksboven in de hoek zetten. En dan over laten lopen naar wit.

Dus ik er een extra layer in gegooid van 1024x768 en een extra transparante layer over het plaatje heen die van zwart naar wit loopt. Maar nu zit je duidelijk de scheiding van het plaatje en het witte...


Hopelijk is het duidelijk omschreven..
Hoe krijg je dit goed? (ps ik gebruik hiervoor Fireworks MX)

[DeFeCt]

F1 -> gradient

[Verwijderd]

paint shop pro, maak een animatie en bewaar als gif/jpg (of ieder ander pakket waar je een anim mee kan maken)

[Mooya]

Ik heb de bovenste laag tet gradient gedaan, maar dit is precies hetzelfde als een "rectangle layer" (bij mij dan). Dus ik zie nog steeds de overgang van het plaatje naar de witte achtergrond.

En " De Digitale Kip " is wil geen animatie maken maar gewoon een JPG die van kleur overloopt.

[Verwijderd]

www.dynamicdrive.com

Kan je Javascripts downloaden o.a. wat jij zoekt.

[Mooya]

hmm, dynamic drive kende ik al, maar er staat niks over een plaatje laten faden..

Deze is wel cool http://www.dynamicdrive.com/dynamicindex4/reflect.htm

[Bosmonster]

Dit is niet echt gebruikelijk.. en er zijn een aantal dingen die je kan doen (kan onzin tussen zitten, want heb het zelf nog nooit gebruikt )

- PNG gebruiken, die kan met Alpha-channels wel meerdere niveau's van transparantie aan ( ). Maar dan waarschijnlijk alleen in sommige browsers of met speciale plugins.

- Microsoft filters gebruiken.. Geen idee welke en of er een tussen zit die een overloop in transparantie kan geven, maar kijk even op msdn.microsoft.com zou ik zeggen.

Handiger is overigens het gewoon in Photoshop of whatever al over te laten lopen als je er toch niks dynamisch mee wilt doen. Dus met gradient/quickmask of zo.

[Mooya]

jaaaaaa gelukt,
ik heb het toch met de gradient voor elkaar gekregen. en dan een kleur transparant zetten (ik wits niet dat dat zo kon )

Maar TNX allemaal

[Millennyum]

Mooya schreef op 18 oktober 2002 @ 11:44:
jaaaaaa gelukt,
ik heb het toch met de gradient voor elkaar gekregen. en dan een kleur transparant zetten (ik wits niet dat dat zo kon )

Maar TNX allemaal

Moet je ff goed opletten hoe het overkomt, want ik zie wel eens sites die gradient hebben gebruikte wat niet mooi is als je hoge kleuren (16 bits) ipv ware kleuren (32 bits) hebt ingesteld....

[BeaM-R]

Hier een voorbeeldje hoe ik het met 3 foto's gedaan heb die in- en uit faden. (sorry voor de layout)

code:

<style>
H1  {
    font-size : 20;
    font-family : Times;
    color : 444444;
    }
    
A   {
    text-decoration: underline;
    color : 444444;
    }
    
A:Visited   {
    text-decoration: underline;
    color : 444444;
    }
    
A:Hover{
    text-decoration: none;
    font-family : Times;
    color : FF0000;
    }
    
A:Active    {
    text-decoration: underline;
    color : 444444;
    }
</style>

</head>
<script language=javaScript>
<!-- Beginning of JavaScript -

img0 = new Image();
img0.src = "pic1.jpg";

img1 = new Image();
img1.src = "pic2.jpg";

img2 = new Image();
img2.src = "pic3.jpg";

var i_strngth=1
var i_image=0

var imageurl = new Array()
imageurl[0] ="pic1.jpg"
imageurl[1] ="pic2.jpg"
imageurl[2] ="pic3.jpg"


function showimage() {      
    if(document.all) {
        if (i_strngth <=80) {
            testimage.innerHTML="[img]"+imageurl[i_image]+"[/img]";
            i_strngth=i_strngth+3
            var timer=setTimeout("showimage()",200)
        }   
        else {
            clearTimeout(timer)
            var timer=setTimeout("hideimage()",200)
        }
    }   
    
    if(document.layers) {
            clearTimeout(timer)
            document.testimage.document.write("[img]"+imageurl[i_image]+"[/img]")
            document.close()
            i_image++
            if (i_image >= imageurl.length) {i_image=0} 
            var timer=setTimeout("showimage()",200)
                
    }   
}


function hideimage() {      
    if (i_strngth >=-3) {
        testimage.innerHTML="[img]"+imageurl[i_image]+"[/img]";
        i_strngth=i_strngth-4
        var timer=setTimeout("hideimage()",100)
    }   
    else {
        clearTimeout(timer)
        i_image++
        if (i_image >= imageurl.length) {i_image=0}
        i_strngth=1
        var timer=setTimeout("showimage()",100) 
    }
}


</script>
<body bgcolor="#000000" onLoad="showimage()" text="#00FF00" link="#FF9933" vlink="#FFFF00">



<div id="testimage" style="position: absolute; visibility: visible; top: 0; left: 0; width: 200; height: 200">
  
      </tr>
    </table>
    </center>
  </div>
</body>