psyao/index.html

## index.html
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CSS - Positionnement</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div id="page">
    <h1>Palette de couleurs</h1>

    <p>Cliquez sur l'image <br/>pour faire apparaître la palette de couleur.</p>

    <div id="colorPicker">
        <img src="images/w-0.png" alt=""/> Couleur

        <div>
            <img src="images/couleurs.png" alt=""/>
            <img src="images/a-1.png" alt=""/>
            <img src="images/b-1.png" alt=""/>
            <img src="images/c-1.png" alt=""/>
            <img src="images/d-1.png" alt=""/>
            <img src="images/e-1.png" alt=""/>
            <img src="images/f-1.png" alt=""/>
            <img src="images/g-1.png" alt=""/>
            <img src="images/h-1.png" alt=""/>
            <img src="images/i-1.png" alt=""/>
            <img src="images/j-1.png" alt=""/>
            <img src="images/k-1.png" alt=""/>
            <img src="images/w-1.png" alt=""/>
            <img src="images/x-1.png" alt=""/>
            <img src="images/y-1.png" alt=""/>
            <img src="images/y-2.png" alt=""/>
            <img src="images/y-3.png" alt=""/>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>

## main.js
// On document ready
$(function () {
    // Variables initialisation and declaration
    var $container = $('#colorPicker');
    var $image = $container.find('> img');
    var $picker = $container.find('> div');

    var duration = 500;
    var lastColor = $image.attr('src');

    // Toggle on button click
    $image.click(function (e) {
        $picker.fadeToggle(duration);

        e.stopPropagation();
    });

    // Fade out on click out of the button if the clicked element is a children of #colorPicker
    // or on keypress (backspace, enter, esc, space, del)
    $(document)
        .click(function (e) {
            if ($picker.is(':visible') && (!$(e.target).is($picker) && !$(e.target.parentNode).is($picker))) {
                $picker.fadeOut(duration);
            }
        })

        .keydown(function (e) {
            if ($picker.is(':visible')) {
                $.each([8, 13, 27, 32, 46], function (key, value) {
                    if (value === e.keyCode) {
                        $picker.fadeOut(duration);

                        return false;
                    }
                });
            }
        });

    // Change color on mouse hover and click
    $picker.find('img:not(:first)')
        .mouseenter(function () {
            $image.attr('src', $(this).attr('src'));
        })

        .mouseleave(function () {
            $image.attr('src', lastColor);
        })

        .click(function () {
            lastColor = $image.attr('src');
            $image.attr('src', $(this).attr('src'));
        });
});

## style.css
body {
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

div#page {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 6px #aaa;
    margin: 10px auto;
    padding: 50px;
    text-align: left;
    width: 300px;
}

/*************************************************************
 * Color picker
 ************************************************************/
#colorPicker {
    position: relative;
}

/* Picker activating image */
#colorPicker > img {
    cursor: pointer;
    vertical-align: middle;
}

/* Div containing all color picking images
 * TODO: an unordered list will be more semantically correct
 */
#colorPicker > div {
    background-color: white;
    box-shadow: 0 0 8px 2px #aaa;
    display: none;
    position: absolute;
    left: 20px;
    padding: 1px;
    top: 20px;
    width: 88px;
}

/* Color picking images */
#colorPicker > div img {
    float: left;
    height: 20px;
    margin: 1px;
    width: 20px;
}

/* Textual image placement*/
#colorPicker > div img:first-child {
    float: right;
    height: 86px;
}

/* Color picking images (minus textual one) hover effect */
#colorPicker > div img:not(:first-child):hover {
    cursor: pointer;
    opacity: .6;
}
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>CSS - Positionnement</title>
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body>

	<div id="page">
	<h1>Palette de couleurs</h1>

	<p>Cliquez sur l'image <br/>pour faire apparaître la palette de couleur.</p>

	<div id="colorPicker">
	<img src="images/w-0.png" alt=""/> Couleur

	<div>
	<img src="images/couleurs.png" alt=""/>
	<img src="images/a-1.png" alt=""/>
	<img src="images/b-1.png" alt=""/>
	<img src="images/c-1.png" alt=""/>
	<img src="images/d-1.png" alt=""/>
	<img src="images/e-1.png" alt=""/>
	<img src="images/f-1.png" alt=""/>
	<img src="images/g-1.png" alt=""/>
	<img src="images/h-1.png" alt=""/>
	<img src="images/i-1.png" alt=""/>
	<img src="images/j-1.png" alt=""/>
	<img src="images/k-1.png" alt=""/>
	<img src="images/w-1.png" alt=""/>
	<img src="images/x-1.png" alt=""/>
	<img src="images/y-1.png" alt=""/>
	<img src="images/y-2.png" alt=""/>
	<img src="images/y-3.png" alt=""/>
	</div>
	</div>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	// On document ready
	$(function () {
	// Variables initialisation and declaration
	var $container = $('#colorPicker');
	var $image = $container.find('> img');
	var $picker = $container.find('> div');

	var duration = 500;
	var lastColor = $image.attr('src');

	// Toggle on button click
	$image.click(function (e) {
	$picker.fadeToggle(duration);

	e.stopPropagation();
	});

	// Fade out on click out of the button if the clicked element is a children of #colorPicker
	// or on keypress (backspace, enter, esc, space, del)
	$(document)
	.click(function (e) {
	if ($picker.is(':visible') && (!$(e.target).is($picker) && !$(e.target.parentNode).is($picker))) {
	$picker.fadeOut(duration);
	}
	})

	.keydown(function (e) {
	if ($picker.is(':visible')) {
	$.each([8, 13, 27, 32, 46], function (key, value) {
	if (value === e.keyCode) {
	$picker.fadeOut(duration);

	return false;
	}
	});
	}
	});

	// Change color on mouse hover and click
	$picker.find('img:not(:first)')
	.mouseenter(function () {
	$image.attr('src', $(this).attr('src'));
	})

	.mouseleave(function () {
	$image.attr('src', lastColor);
	})

	.click(function () {
	lastColor = $image.attr('src');
	$image.attr('src', $(this).attr('src'));
	});
	});
	body {
	font-size: 10px;
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

	div#page {
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 6px #aaa;
	margin: 10px auto;
	padding: 50px;
	text-align: left;
	width: 300px;
	}

	/*************************************************************
	* Color picker
	************************************************************/
	#colorPicker {
	position: relative;
	}

	/* Picker activating image */
	#colorPicker > img {
	cursor: pointer;
	vertical-align: middle;
	}

	/* Div containing all color picking images
	* TODO: an unordered list will be more semantically correct
	*/
	#colorPicker > div {
	background-color: white;
	box-shadow: 0 0 8px 2px #aaa;
	display: none;
	position: absolute;
	left: 20px;
	padding: 1px;
	top: 20px;
	width: 88px;
	}

	/* Color picking images */
	#colorPicker > div img {
	float: left;
	height: 20px;
	margin: 1px;
	width: 20px;
	}

	/* Textual image placement*/
	#colorPicker > div img:first-child {
	float: right;
	height: 86px;
	}

	/* Color picking images (minus textual one) hover effect */
	#colorPicker > div img:not(:first-child):hover {
	cursor: pointer;
	opacity: .6;
	}