MAPA PARA REPRESENTANTES HTML PHP
Bom, tinha um mapa para representantes a pessoa seleciona com o <select> e aparece os estados e as cidades que possui representantes. Pórem agora preciso de um mapa (imagem) que quando o usuario clica por exemplo em são paulo aparece todos os representantes de sp.
eu to com o mapa pronto só falta relacionar a função ! o codigo esta assim :
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Representantes</title>
<meta name="description" content="">
<?php include("inc/head.php");?>
<?php include("inc/analytics.php");?>
</head>
<style type="text/css">.active { display:inherit; }
ul#map {display: block; margin-top: 100px; padding: 0; width: 570px; height: 585px; background-image: url('img/map.gif');}
ul#map li {display: block; padding: 0; position: absolute;}
li#crs {margin-top: 485px; margin-left: 237px; }
li#csc {margin-top: 467px; margin-left: 292px;}
li#cpr {margin-top: 416px; margin-left: 281px;}
li#csp {margin-top: 375px; margin-left: 303px; z-index:9999; }
li#cms {margin-top: 336px; margin-left: 229px;}
li#crj {margin-top: 390px; margin-left: 422px; z-index:9999; }
li#ces {margin-top: 347px; margin-left: 467px; z-index:9999; }
li#cmg {margin-top: 292px; margin-left: 333px; z-index:9998; }
li#cgo {margin-top: 264px; margin-left: 301px; z-index:9999; }
li#cdf {margin-top: 311px; margin-left: 373px; z-index:9999; }
li#cba {margin-top: 207px; margin-left: 397px;}
li#cmt {margin-top: 189px; margin-left: 180px;}
li#cro {margin-top: 199px; margin-left: 104px; z-index:9998; }
li#cac {margin-top: 185px; margin-left: 0px;}
li#cam {margin-top: 46px; margin-left: 3px;}
li#crr {margin-top: 0; margin-left: 133px;}
li#cpa {margin-top: 40px; margin-left: 219px;}
li#cap {margin-top: 13px; margin-left: 278px;}
li#cma {margin-top: 94px; margin-left: 366px; z-index:9999;}
li#cto {margin-top: 156px; margin-left: 338px;}
li#cse {margin-top: 221px; margin-left: 519px; z-index:9998;}
li#cal {margin-top: 211px; margin-left: 518px; z-index:9999;}
li#cpe {margin-top: 188px; margin-left: 473px;}
li#cpb {margin-top: 169px; margin-left: 511px; z-index:9999;}
li#crn {margin-top: 151px; margin-left: 514px;}
li#cce {margin-top: 121px; margin-left: 473px;}
li#cpi {margin-top: 120px; margin-left: 406px; z-index:9997;}
ul#map li a {display: block; text-decoration: none; position: absolute;}
a#rs {width: 116px; height: 101px; }
a#sc {width: 81px; height: 53px; }
a#pr {width: 97px; height: 64px; }
a#sp {width: 115px; height: 60px; }
a#ms {width: 106px; height: 104px; }
a#rj {width: 58px; height: 40px; }
a#es {width: 53px; height: 54px; }
a#mg {width: 163px; height: 131px; }
a#go {width: 108px; height: 108px; }
a#df {width: 56px; height: 36px; }
a#ba {width: 136px; height: 148px; }
a#mt {width: 166px; height: 161px; }
a#ro {width: 104px; height: 87px; }
a#ac {width: 108px; height: 62px; }
a#am {width: 258px; height: 181px;}
a#rr {width: 87px; height: 103px; }
a#pa {width: 188px; height: 187px; }
a#ap {width: 73px; height: 85px; }
a#ma {width: 75px; height: 125px; }
a#to {width: 74px; height: 125px; }
a#se {width: 60px; height: 32px; }
a#al {width: 46px; height: 27px; }
a#pe {width: 97px; height: 34px; }
a#pb {width: 59px; height: 35px; }
a#rn {width: 53px; height: 33px; }
a#ce {width: 61px; height: 76px; }
a#pi {width: 84px; height: 130px; }
/ Código pronto via http://css.spritegen.com (com alterações nos seletores) /
a#pa:hover, a#pa:active, a#am:hover, a#am:active, a#mt:hover, a#mt:active, a#ba:hover, a#ba:active, a#ma:hover, a#ma:active,
a#mg:hover, a#mg:active, a#to:hover, a#to:active, a#pi:hover, a#pi:active, a#go:hover, a#go:active, a#ms:hover, a#ms:active,
a#rr:hover, a#rr:active, a#rs:hover, a#rs:active, a#ro:hover, a#ro:active, a#ap:hover, a#ap:active, a#sp:hover, a#sp:active,
a#ce:hover, a#ce:active, a#pr:hover, a#pr:active, a#ac:hover, a#ac:active, a#sc:hover, a#sc:active, a#es:hover, a#es:active,
a#rj:hover, a#rj:active, a#pb:hover, a#pb:active, a#pe:hover, a#pe:active, a#rn:hover, a#rn:active, a#se:hover, a#se:active,
a#al:hover, a#al:active, a#df:hover, a#df:active
{ display: block; background: url('img/sprite.gif') no-repeat; }
a#pa:hover, a#pa:active { background-position: -10px -0px; width: 188px; height: 187px; }
a#am:hover, a#am:active { background-position: -10px -197px; width: 258px; height: 181px; }
a#mt:hover, a#mt:active { background-position: -10px -388px; width: 166px; height: 161px; }
a#ba:hover, a#ba:active { background-position: -10px -559px; width: 136px; height: 148px; }
a#ma:hover, a#ma:active { background-position: -156px -559px; width: 102px; height: 139px; }
a#mg:hover, a#mg:active { background-position: -10px -717px; width: 163px; height: 131px; }
a#to:hover, a#to:active { background-position: -183px -717px; width: 74px; height: 125px; }
a#pi:hover, a#pi:active { background-position: -10px -858px; width: 83px; height: 124px; }
a#go:hover, a#go:active { background-position: -103px -858px; width: 108px; height: 108px; }
a#ms:hover, a#ms:active { background-position: -103px -976px; width: 106px; height: 104px; }
a#rr:hover, a#rr:active { background-position: -10px -992px; width: 87px; height: 103px; }
a#rs:hover, a#rs:active { background-position: -107px -1090px; width: 116px; height: 101px; }
a#ro:hover, a#ro:active { background-position: -10px -1201px; width: 104px; height: 87px; }
a#ap:hover, a#ap:active { background-position: -10px -1105px; width: 73px; height: 85px; }
a#sp:hover, a#sp:active { background-position: -124px -1201px; width: 131px; height: 84px; }
a#ce:hover, a#ce:active { background-position: -186px -388px; width: 61px; height: 76px; }
a#pr:hover, a#pr:active { background-position: -124px -1295px; width: 97px; height: 64px; }
a#ac:hover, a#ac:active { background-position: -10px -1298px; width: 108px; height: 62px; }
a#sc:hover, a#sc:active { background-position: -128px -1369px; width: 81px; height: 53px; }
a#es:hover, a#es:active { background-position: -208px -0px; width: 53px; height: 54px; }
a#rj:hover, a#rj:active { background-position: -186px -474px; width: 58px; height: 40px; }
a#pb:hover, a#pb:active { background-position: -10px -1370px; width: 59px; height: 35px; }
a#pe:hover, a#pe:active { background-position: -10px -1415px; width: 97px; height: 34px; }
a#rn:hover, a#rn:active { background-position: -186px -524px; width: 53px; height: 33px; }
a#se:hover, a#se:active { background-position: -208px -61px; width: 50px; height: 34px; }
a#al:hover, a#al:active { background-position: -208px -103px; width: 46px; height: 27px; }
a#df:hover, a#df:active { background-position: -208px -140px; width: 56px; height: 36px; }
/ Fim sprite /
ul#map li a img {border: 0; width: inherit; height: inherit;}
</style>
<ul id="map">
<li id="crs" estado="rs"><a href="#rs" id="rs" title="RS"><img src="img/null.gif" alt="RS" /></a></li>
<li id="csc" estado="sc"><a href="#sc" id="sc" title="SC"><img src="img/null.gif" alt="SC" /></a></li>
<li id="cpr" estado="pr"><a href="#pr" id="pr" title="PR"><img src="img/null.gif" alt="PR" /></a></li>
<li id="csp" estado="sp"><a href="#sp" id="sp" title="SP"><img src="img/null.gif" alt="SP" /></a></li>
<li id="cms" estado="ms"><a href="#ms" id="ms" title="MS"><img src="img/null.gif" alt="MS" /></a></li>
<li id="crj" estado="rj"><a href="#rj" id="rj" title="RJ"><img src="img/null.gif" alt="RJ" /></a></li>
<li id="ces" estado="es"><a href="#es" id="es" title="ES"><img src="img/null.gif" alt="ES" /></a></li>
<li id="cmg" estado="mg"><a href="#mg" id="mg" title="MG"><img src="img/null.gif" alt="MG" /></a></li>
<li id="cgo" estado="go"><a href="#go" id="go" title="GO"><img src="img/null.gif" alt="GO" /></a></li>
<li id="cdf" estado="df"><a href="#df" id="df" title="DF"><img src="img/null.gif" alt="DF" /></a></li>
<li id="cba" estado="ba"><a href="#ba" id="ba" title="BA"><img src="img/null.gif" alt="BA" /></a></li>
<li id="cmt" estado="mt"><a href="#mt" id="mt" title="MT"><img src="img/null.gif" alt="MT" /></a></li>
<li id="cro" estado="ro"><a href="#ro" id="ro" title="RO"><img src="img/null.gif" alt="RO" /></a></li>
<li id="cac" estado="ac"><a href="#ac" id="ac" title="AC"><img src="img/null.gif" alt="AC" /></a></li>
<li id="cam" estado="am"><a href="#am" id="am" title="AM"><img src="img/null.gif" alt="AM" /></a></li>
<li id="crr" estado="rr"><a href="#rr" id="rr" title="RR"><img src="img/null.gif" alt="RR" /></a></li>
<li id="cpa" estado="pa"><a href="#pa" id="pa" title="PA"><img src="img/null.gif" alt="PA" /></a></li>
<li id="cap" estado="ap"><a href="#ap" id="ap" title="AP"><img src="img/null.gif" alt="AP" /></a></li>
<li id="cma" estado="ma"><a href="#ma" id="ma" title="MA"><img src="img/null.gif" alt="MA" /></a></li>
<li id="cto" estado="to"><a href="#to" id="to" title="TO"><img src="img/null.gif" alt="TO" /></a></li>
<li id="cse" estado="se"><a href="#se" id="se" title="SE"><img src="img/null.gif" alt="SE" /></a></li>
<li id="cal" estado="al"><a href="#al" id="al" title="AL"><img src="img/null.gif" alt="AL" /></a></li>
<li id="cpe" estado="pe"><a href="#pe" id="pe" title="PE"><img src="img/null.gif" alt="PE" /></a></li>
<li id="cpb" estado="pb"><a href="#pb" id="pb" title="PB"><img src="img/null.gif" alt="PB" /></a></li>
<li id="crn" estado="rn"><a href="#rn" id="rn" title="RN"><img src="img/null.gif" alt="RN" /></a></li>
<li id="cce" estado="ce"><a href="#ce" id="ce" title="CE"><img src="img/null.gif" alt="CE" /></a></li>
<li id="cpi" estado="pi"><a href="#pi" id="pi" title="PI"><img src="img/null.gif" alt="PI" /></a></li>
</ul>AJUDEM POR FAVOR QUAL FUNÇÃO VOU USAR PARA FAZER ISSO !! , OBRIGADO !
Discussão (0)
Carregando comentários...