• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Color Picker

Bei HTML5-Color fähigen Browsern:

Code: 
<input type="color">

Für die älteren Browser dann noch ein JQuery oder JS Fallback anbieten :)
 
Also die einfachste Möglichkeit wäre, wie dort auf der Seite zu sehen ist, das input-Element "color" zu nutzen:
HTML: 
<input type="color" value="#ff0000">

Wenn du das wie mit dem Hexagon möchtest dann wird das JS werden, ich würde dann z. b. wenn die einzelnen Kacheln DIVs werden siesen noch ein z. B. data-color="#ff0" geben und auf Klick diesen Wert auslesen und weitegeben. Aber an sich würd ich eher das input-Element nehmen^^

Edit:
Mir war vorhin langweilig also hab ich das mal gemacht ^^

Mit JS würde das z. B. so gehen:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Color Picker</title>      
        <link rel="stylesheet" type="text/css" href="./color-picker.css">       
        <script type="text/javascript" src="./color-picker.js"></script>       
    </head>
   
    <body>
        <div class="square red" data-color="#f00"></div>
        <div class="square blue" data-color="#00f"></div>
        <div style="clear: left;"></div>
        <p>Ziel-Container:</p>
        <div id="target-square" class="square"></div>
    </body>
   
</html>
JS:
Code: 
window.onload = function() {

    var colorSquares = document.querySelectorAll('.square');

    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor(this);
        });
    }
};

function setColor(element) {
    var targetSquare    = document.getElementById('target-square');
    var colorValue      = element.getAttribute('data-color');
    targetSquare.style.background = colorValue;
}

CSS:
Code: 
.square {
    float: left;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid black;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
 
Zuletzt bearbeitet:
kaepten schrieb:
Erstmal lieben dank für deine Antwort.
Aber ich bin Anfänger und verstehe nicht wirklich was du meinst :(
Zum Vergrößern anklicken....
Siehe meine Antwort. Also gemeint ist damit, dass das input-Element "color" nicht von älteren Browsern unterstützt wird. Würdest du wollen das so ein Color-Picker auch in älteren Browsern geht, müsstest du das mit Java Script selbst schreiben, eine Möglichkeit habe ich dir mal geschrieben (weil ich das auch machen wollte und mir langweilig war :D).
Wie die Dateien heißen müssen entnimmst du den Angaben im head.
 
Achja , noch eine Anmerkung. Bei Browsern die, das mit html5 eingeführte color als type für ein input-Feld nicht umsetzen, wird stattdessen ein input vom typ text bereitgestellt. Darum unbedingt serverseitig valiidieren , da sonst alles mögliche übertragen werden kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben