Meu professor pediu pra fazer um retrato falado com html, css e javascript, e eu nao sei por onde começar? Alguém ja fez algo parecido pra me ajudar?
A ideia é simples:
Com javascript você pode sobrepor uma imagem na outra, com CSS você pode trocar as cores.
Então como eu faria?
Faria um painel para a pessoa escolher o formato da cabeça (javascript) com um painel de cores que, ao clicar, chamaria outro perfil css para aquele objeto.
Depois um painel para olhos, nariz, boca, orelhas, barba, óculos, brincos, cicatrizes, tatuagens etc.
Ao aplicar esses outros objetos, com javascript, você pode mover eles por cima da imagem original (na realidade um grande canvas)
Por fim, o sistema tem que exportar a imagem produzida (sobrepor todas as camadas do canvas e salvar num único arquivo).
Não deve ser difícil de codificar. Trabalhoso sim, mas difícil não creio.
to tentando fazer, mas nao tá dando nada certo não consigo colocar as imagens tá péssimo. vou colocar aqui o código.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="retrato.css">
<title>Simulador de retrato falado</title>
</head>
<body>
<div id="geral">
<div id="form">
<form>
<center><label>Cabelo:</label>
<select >
<option value="castanho">casatanho</option>
<option value="liso">liso</option>
<option value="cacheadoS">cacheado</option>
<option value="cabelo4">cabelo4</option>
<option value="cabelo5">cabelo5</option>
<option value="cabelo6">cabelo6</option>
</select>
<label>Sombracelha:</label>
<select>
<option value="Opção1">Opção1</option>
<option value="Opção2">Opção2</option>
<option value="Opção3">Opção3</option>
<option value="Opção4">Opção4</option>
</select>
<label>Olhos:</label>
<select>
<option value="olhos">Olhos</option>
</select>
<label>Óculos:</label>
<select>
<option value="oc1">Opção1</option>
<option value="oc2">Opção2</option>
<option value="oc3">Opção3</option>
</select>
<label>Nariz:</label>
<select>
<option value="Opção1">Opção1</option>
<option value="Opção2">Opção2</option>
<option value="Opção3">Opção3</option>
<option value="Opção4">Opção4</option>
</select>
<label>Barba:</label>
<select>
<option value="barba2">bigode</option>
<option value="barba1">barba grande</option>
</select>
<label>Boca:</label>
<select>
<option value="bc1">boca1</option>
<option value="bc2">boca2</option>
<option value="bc3">boca3</option>
<option value="bc4">boca4</option>
</select>
<label>Tatuagem:</label>
<select>
<option value="tatu1">Tatuagem1</option>
<option value="tatu2">Tatuagem2</option>
<option value="tatu3">Tatuagem3</option>
</select></center>
</form>
</div>
<div id="form">
<div id="face">
<div id="cabelo">
<img src="cab2.png">
</div>
<div id="sobrancelha">
</div>
<div id="olhos">
</div>
<div id="nariz">
</div>
<div id="barba">
</div>
<div id="boca">
</div>
</div>
</div>
</div>
</body>
</html>
css
#geral{
width: 70%;
height: 800px;
background-color: gray;
border: 1px solid black;
float: left;
}
#form{
width: 49%;
height: 90%;
background-color: white;
border: 1px solid black;
margin-top: 30px;
float: left;
margin-left: 10px;
text-align: center;
font-family: Arial;
font-size: 40px;
background-image: url(face.jpg);
}
#face{
width: 500px;
height: 500px;
margin-top: 40px;
float: left;
border-radius: 90px;
border: 1px solid black;
margin-left: 15%;
}
#cabelo{
width: 100%;
height: 20%;
background-color: pink;
}
#sobrancelha{
width: 70%;
height: 10%;
background-color: greenyellow;
float: left;
margin-left: 15%;
}
#olhos{
width: 70%;
height: 10%;
background-color: black;
float: left;
margin-left: 15%;
}
#óculos{
width: 60%;
height: 10%;
background-color: purple;
float: left;
margin-left: 15%;
}
#nariz{
background-color: darkred;
width: 30%;
height: 15%;
float: left;
margin-left: 35%;
}
#barba{
background-color: blue;
width: 70%;
height: 10%;
float: left;
margin-left: 15%;
}
#boca{
background-color: gray;
width: 70%;
height: 10%;
float: left;
margin-left: 15%;
}
#tatuagem{
width: 15%;
height: 10%;
background-color: gray;
float: left;
margin-left: 75%;
}