Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Micilini Roll

passou o mouse mudou a cor de fundo

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

Pessoal o que eu quero fazer e mais ou menos assim

 

http://www.gauerdobrasil.com.br/onde-comprar/

 

Se vc passar o mouse acima no mapa ele muda de cor e outra coisa ele seleciona certinho o local sem nenhuma falha,no caso o que eu quero fazer e bem diferente,pense comigo:

 

A) imaginen um circulo e este circulo esteja dividio em 6 partes triangulares,como se fosse um pedaco de pizza cortado,imagine se eu passar o mouse em cada um destes pedacoes a cor deles iriam mudar,captaram é isso que quero fazer,pra poder implementar em meu site php

 

Sera que vcs conhece algum tutorial pela net que ensina a fazer isso ou alguma coisa pra pelo menos eu ter uma nocao de como fazer este efeito?

Compartilhar este post

Link para o post
Compartilhar em outros sites

vacaman    6

vacaman
Postado

olha, só você falasse 'quadrados' seria facil, mas uma pizza? é mais complicadinho.

quadrados são aceitaveis?

quadrados vc pode fazer direto no html, usando javascript.

agora uma forma mais complexa tipo a pizza vc poderia usar o flash (no caso esse mapa usa o flash), mas dai pode ser um pouco mais complicado pra você se nunca usou o flash, mas nada impossivel.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Morpheus#2005    1

Morpheus#2005
Postado

Bom eu faria usando Jquery com CSS, ficaria mais ou menos assim:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	
	<script language="javascript">
		$(document).ready(function(){
					
			$(".squarebai").mouseover(function(){
				 $(".squarebai").css("background","#f00");
				})
				
			$(".squarebai").mouseout(function(){
				 $(".squarebai").css("background","#FF6633");
				})
				
		})
	</script>

<style type="text/css">

#pizza{
	width: 75px;	
	height: 75px;
	border-radius: 75px 0px 0px 0px;
	color:#0FC;
	}
.squarecima{
    width: 90px;
    height: 90px;
    margin-top: 0px;
	margin-left:50%;
    margin-bottom: 0px;
    background-color: #99f;
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.squareesq{
    width: 90px;
    height: 90px;
    margin-top: -22px;
	margin-left:47%;
    margin-bottom: 0px;
    background-color: #309;
	-webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.squaredir{
    width: 90px;
    height: 90px;
    margin-top: -75px;
	margin-left:930px;
    margin-bottom: 0px;
    background-color: #FF0000;
	-webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.squarebai{
    width: 90px;
    height: 90px;
    margin-top: -22px;
	margin-left:877px;
    margin-bottom: 0px;
    background-color:  #FF6633;
	-webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}


</style>

</head>

<body>
<div id="pizza" class="squarecima"></div>
<div id="pizza" class="squareesq"></div>
<div id="pizza" class="squaredir"></div>
<div id="pizza" class="squarebai"></div>

</body>
</html>

 

Bons estudos...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito