Saven.nl > [gez] Afbeeldingen zwart/wit maken

Pagina:

Gepost op maandag 7 december 2009, om 19:59

	Knijn Newbie 6 posts		Hoi, aller eerst ben ik nieuw op saven dus moet nog ff wennen en zo. Maar goed, ik had een vraagje over javascript. Ik wil mijn portfolio pagina opnieuw doen en wil daar een zwart/wit effect in hebben. Alle afbeeldingen moeten in zwart/wit zijn totdat je er met je muis overheen gaat. Ik weet dat je dit heel simpel in CSS kunt oplossen maar dan moet je voor elke afbeelding een aparte zwart/wit versie maken... Lijkt met niet zo handig... Is hier dus een oplossing voor in de vorm van een (java) script? Knijn

Advertentie

	Botje Adverteerder

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op maandag 7 december 2009, om 20:39

	Leone Actieve Member 312 posts		zoiets? http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op maandag 7 december 2009, om 22:28

	Sharp :') Admin 3722 posts		Waarom niet gewoon elke image de hue en saturation wegfilteren in PS en dan gewoon mouseover effect
			oldskool http://⇀⇊.⇒.ws

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op maandag 7 december 2009, om 23:28

	Knijn Newbie 6 posts		Quote: Sharp Waarom niet gewoon elke image de hue en saturation wegfilteren in PS en dan gewoon mouseover effect Nou, dat bedoelde ik dus, dan moet ik dat allemaal gaan doen en van elke afbeelding dus 2 versies maken... Niet zo veel zin in en neemt weer meer ruimte in beslag Quote: Leone zoiets? http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/ ~~Kijk, dat is dus precies waarnaar ik opzoek ben! Enig idee door welke browsers dit allemaal ondersteund word?~~ Sorry, was iets te snel met kijken. Ook hier gebruiken ze 2 afbeeldingen.... Is er geen manier dat je maar 1 afbeelding kunt gebruiken die door een script met een filters ofzo zwart/wit word gemaakt? [Laatst bewerkt door Knijn* op maandag 7 december 2009, om 23:50*]

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 00:23

	Thaan Aka "Gerwin" Admin 2254 posts		Waarom filters gebruiken? Gewoon in photoshop naar Image > Mode > grayscale.
			Ja ik ben kut, en ja ik heb gelijk.

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 17:14

	Painmaker AKA God Saven Player 721 posts		Hij bedoelt ipv 2 afbeeldingen te maken, een script op de site die het rollover effect voor hem doet. Heb zelf geen idee hoe, volgens mij heb je meer gekloot dit aan het werk te krijgen als het al lukt, dan dat je gewoon 2 afbeeldingen maakt.

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 19:13

sandr
aka Chuck Norris

Ultimate
5312 posts

C o d e


<img src="zwartwit.jpg" onmouseover="this.src='kleur.jpg'" onmouseout="this.src='zwartwit.jpg'" />

> Error: plaatje kon niet worden geladen <

al die moeilijke keuzes in het leven

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 19:28

	Bart Hoeren :'( HIV Positive 1542 posts		Knijn, afgekort van Konijn ?

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 21:00

	Knijn Newbie 6 posts		Quote: Painmaker Hij bedoelt ipv 2 afbeeldingen te maken, een script op de site die het rollover effect voor hem doet. Heb zelf geen idee hoe, volgens mij heb je meer gekloot dit aan het werk te krijgen als het al lukt, dan dat je gewoon 2 afbeeldingen maakt. Kijk, dat probeerde ik dus uit te leggen! Heeft iemand enig idee of dit uberhaupt kan trouwens, ik kan het natuurlijk wel vragen maar kan het? Quote: Bart Knijn, afgekort van Konijn ? Jup

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 21:52

	Sharp :') Admin 3722 posts		Je wilt met een javascript de afbeelding zelf b/w maken? Is veel omslachtiger dan wat sandr zei
			oldskool http://⇀⇊.⇒.ws

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 22:47

	BaXiess Spammer 1386 posts		Als je bijv 100 afbeeldingen hebt kan ik me wel voorstellen dat je niet elke afbeeldingen apart grijswaarden wil maken, ik heb geen idee hoe je zoiets zou moeten maken though..
			Altijd al n00b willen zijn? Klik dan hier ^n00b

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op dinsdag 8 december 2009, om 23:47

	Saven Beheerder 6316 posts		Volgens mij gaat dit niet zomaar. Moet je misschien met PHP en gdlib werken ofzo, maar met html en css gaat dat niet lukken zonder handmatig zwart/wit maken
			2 x KRK RP8 G2

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op woensdag 9 december 2009, om 00:10

	Knijn Newbie 6 posts		Tsja... @saven: wat het dan ook nog is, ik heb html & CSS redelijk(in de zin van ik begin er net mee) onder controle, php en javascript ben ik absoluut een n00b in ... Wat is trouwens gdlib eigenlijk? Heb het vaker zien staan maar geen idee wat het nou is. Iemand anders nog een idee waar ik nog zou kunnen zoeken?

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op woensdag 9 december 2009, om 09:36

	Headshot Minispammer 943 posts		Quote: Knijn Tsja... @saven: wat het dan ook nog is, ik heb html & CSS redelijk(in de zin van ik begin er net mee) onder controle, php en javascript ben ik absoluut een n00b in ... Wat is trouwens gdlib eigenlijk? Heb het vaker zien staan maar geen idee wat het nou is. Iemand anders nog een idee waar ik nog zou kunnen zoeken? Met GDLib kun je dynamische afbeeldingen maken. Dus bijvoorbeeld een signature met hoeveel keer die bekeken is.
			Bomplayer.nl

Re: [gez] Afbeeldingen zwart/wit maken

Gepost op woensdag 9 december 2009, om 11:14

Knijn
Newbie
6 posts

Oke, ik denk dat ik een oplossing heb gevonden maar dat weet ik niet zeker.
Klik!
Demo, Klik!

Als ik dit zo lees dan klinkt het heel erg logisch en hoe de code werkt snap ik ook nog wel het een en ander.
Alleen, als je de demo bekijkt dan zie je dat er onderaan maar één knop staat. Als je daarop klikt dan word het 2e plaatje zwart/wit, precies op de manier zoals ik wil.

Wat ik alleen niet zou weten is hoe je dit script zo aanpast dat het ook weer kan omkeren en dat het via een hover effect werkt.

Als je met je muis over de afbeelding gaat word de afbeedling in kleur en als je met je muis van de afbeelding af gaat word hij weer zwart/wit.

Het liefst ook nog met een soort fade effect..

Dit is de index.html:

C o d e


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>





<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JavaScript Demos - Desaturate Image using JavaScript</title>



<script type="text/javascript" src="index_bestanden/jquery-1.js"></script>

<link href="index_bestanden/main.css" type="text/css" rel="stylesheet">



<script type="text/javascript">

    $(document).ready(function(){

        $('#toggleDesaturate').click(function(){

            var imgObj = document.getElementById('image');

            

            if($.browser.msie){

                grayscaleImageIE(imgObj);

            } else {

                imgObj.src = grayscaleImage(imgObj);

            }           

        });

    });



    function grayscaleImageIE(imgObj)

    {

        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

    }



    function grayscaleImage(imgObj)

    {

        var canvas = document.createElement('canvas');

        var canvasContext = canvas.getContext('2d');

        

        var imgW = imgObj.width;

        var imgH = imgObj.height;

        canvas.width = imgW;

        canvas.height = imgH;

        

        canvasContext.drawImage(imgObj, 0, 0);

        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        

        for(var y = 0; y < imgPixels.height; y++){

            for(var x = 0; x < imgPixels.width; x++){

                var i = (y * 4) * imgPixels.width + x * 4;

                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

                imgPixels.data[i] = avg; 

                imgPixels.data[i + 1] = avg; 

                imgPixels.data[i + 2] = avg;

            }

        }

        

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

        return canvas.toDataURL();

    }

</script>



</head><body>



    <div id="page">

        <h1>How to Desaturate Images using JavaScript</h1>

        <p>Click the button below the image to desaturate it.</p>

        

        <div>

            <p>

                <strong>Original image:</strong><br>

                <img src="index_bestanden/nature-1.jpg" alt="">

            </p>           

            <p>

                <strong>Image which will be desaturated:</strong><br>

                <img src="index_bestanden/nature-1.jpg" alt="" id="image">

            </p>           

        </div>

        <form><button id="toggleDesaturate" type="button">Desaturate Image</button></form>

        

        

        <div class="clear"></div>

        <p class="tutorial">View Full Tutorial: <strong><a href="http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html" title="Permalink">How to Desaturate Images using JavaScript</a></strong></p>

        <p class="about">The <a href="http://www.ajaxblender.com/about-us.html">ajaxBlender team</a>

specializes in web development to build advanced, interactive

JavaScript/AJAX web applications driven by jQuery, MooTools, Ext.JS,

and script.aculo.us on various server-side platforms including PHP and

ASP.NET.</p>

    </div>

</body></html>

Hier staat de hele javascript code in die nodig is... Zou iemand me hierbij willen helpen?
Knijn

[Laatst bewerkt door Knijn op woensdag 9 december 2009, om 12:44]

Pagina: