Imagem com vários produtos a serem marcados

3 respostas
alandiniz

Eu preciso fazer uma tela que possibilita o seguinte.:

o sistema é tipo um mercado livre, osCommerce, Magento da vida…

alguém irá cadastrar uma imagem… por exemplo um computador aberto… mais ela não irá vender o computador aberto… ela irá “marcar” nessa imagem as peças e cada peça é um produto com um preço etc…

O produto já estará cadastrado no sistema… ai alguém irá fazer a foto do conjunto e marcar os produtos…

ai o cliente final irá entrar no site… escolher um “conjunto” e selecionar as “peças” que ele quer comprar e adicionar ao carrinho…

tem alguma coisa q faz isso? eu mexo com primefaces e não vi nada do tipo…
o que chega mais perto eh o Crop da imagem… que você consegui selecionar uma area na foto… + nao sei se tem como usar esta ideia pra fazer o que quero…

agora outros frameworks como richfaces não conheço (e pelo que vi na demo) nao da pra fazer também…

alguem tem idéia?

3 Respostas

E

Isso te ajuda?

http://www.w3schools.com/html5/tag_map.asp

alandiniz

evefuji
muito obrigado pela sua resposta… acho que já ganhei de mão beijada como fazer para exibir a imagem com os lugares para selecionar…

… agora a parte que eu acho que é mais difícil… em questão de interface… como vou fazer para marcar os itens? por exemplo

nesse exemplo aqui: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_map

como faço para marcar o sol? ou venus por exemplo? ^^
por exemplo, no crop do primefaces vc clica e arrasta na imagem e seleciona uma area…

E

parece que vc está utilizado faces, no faces não conheço nenhuma biblioteca que faça isso diretamente, mas com javascript você poderia pegar a posição dos clicks, e subtrair as posição da imagem, e com isso obter os valores que necessita:

Onclick por exemplo:
function coordenadas(event) {
 x=event.clientX;
 y=event.clientY;

 elemento = document.getElementById("minha imagem");
 x -=elemento.offsetLeft;
 y-= elemento.offsetTop;
}

Nunca fiz isso que você quer fazer, mas acho que assim solucionaria.

Criado 11 de abril de 2012
Ultima resposta 11 de abr. de 2012
Respostas 3
Participantes 2