Trabalhando com elementos e cliques

[CrazyLOL 2]

To com uma bronca galera, preciso fazer uma aplicação que será usado em uma pizzaria, até ai está ok, porém estou numa duvida em algo que gostaria de fazer, sabemos que em pizzas vem sabores combinados pizza metade um sabor e metade outro o que eu estava querendo é fazer o seguinte, iria apresentar o formato da pizza (redondo) e nela teria 2 divisoes meio a meio (poderia ter também 3 divisoes, mas isso outro caso), enfim, gostaria de quando o cara clicasse em uma metade eu iria ter um callback chamando um modal com as imagens de sabores na hora que eu clicasse adicionaria nessa metade a imagem do sabor, e assim seria mesma coisa no outro sabor...

 

A minha duvida está sendo em como fazer isso, tentei buscar algo no google, porém não consegui encontrar algo nesse sentido.

 

Alguem ja precisou de algo parecido? Que possa compartilhar?

Agradeço ajuda!

[Sergio Tomas 16]

Boa Tarde Crazy, bem legal seu aplicativo a idéia é fantastica, amigo na internet vc não vai encontrar nada parecido mesmo pois é algo bem específico, mas não é dificil de implementar, vou lhe dar algumas dicas.

 

 

1 - Criando a imagem da pizza e as suas metas

Bom aqui é o seguinte para fazer o efeito de que a metade da pizza está sendo pintada com alguma cor ou plano de fundo com os ingredientes (Algo que seria legal :)) você pode criar uma imagem no qual vc tera um fundo branco e no meio um circulo com fundo transparente.

 

Em seguida na hora de passar para o código essa imagem você irá fazer da seguinte maneira:

<div id="pizza">
     <div id="pizza_lado_direito"></div>
     <div id="pizza_lado_esquerdo"></div>
     <div id="pizza_background"></div>

     <button id="botao_lado_direito" onclick="escolherSaborDireito();"></button>
     <button id="botao_lado_esquerdo" onclick="escolherSaborEsquerdo();"></button>
</div>

<style>
#pizza{width: 200px; height: 200px; position: relative;}
#pizza_lado_direito{position: absolute; width: 50%; height: 100%; top: 0; right: 0; background-color: red;}
#pizza_lado_esquerdo{position: absolute; width: 50%; height: 100%; top: 0; left: 0; background-color: blue;}
#pizza_background{width: 100%; height: 100%; background-image: url('caminho_da_imagem_criada'); 
position: absolute; z-index: 2}
/*posiciono os botoes de click pois n da para ativar o click nas divs direito e esquerdo, pois elas estarao em baixo da div 
pizza_background */
#botao_lado_direito{position: absolute; width: 50%; height: 100%; top: 0; right: 0; border: none; background: none;}
#botao_lado_esquerdo{position: absolute; width: 50%; height: 100%; top: 0; right: 0; border: none; background: none;}
</style>

Bom feito seu HTML e CSS vc pode chamar a modal pelo javascript

 

2 - Alterando os valores dos lados da pizza

Agora nesse ponto quando você for abrir a modal você tem que pegar os IDS dos botoes e armazena em algum lugar o ingrediente escolhido, vc pode colocar inputs hidden ou até mesmo em algum objeto json ai você deve escolher a melhor opção, eu aconselho guardar no proprio button, mas ai é a sua escolha.

 

 

Bom creio que seja isso, espero que te ajude!, abraços!

[CrazyLOL 2]

E ai Sergio, beleza?

Agradeço pela sua ajuda!!!!

 

Bom, eu consegui entender em partes ..kkkk

Copiei o seu codigo e joguei aqui so que ficou quadrado, e colocando a imagem no caminho que você citou não ficou certo, fiz um circulo com o meio dele png mas nao ficou no lugar correto, a imagem ficou bem no canto.

 

eu estava pensando aqui fazer o seguinte talvez...

se fazer uma div em formato de meia lua, e outra div em formato de meia lua (os dois daria um circulo) nesse caso conseguiria por acoes dentro da div né?