javascript - Using images / links to switch form select (dropdown) -

-

i'm building form client , they've requested map of city let visitors visually pick location, , have link city: dropdown/select area of form.

here's clients old, archaic & disgusting website showcasing want done, though, it's terrible. http://www3.telus.net/russellsrubbish/order_form.htm

i looking @ hidden form value change , i'm unsure if pushing in right direction?

if failed explain myself apologize, i'm pretty novice when comes jquery.

to make work make background sprite map , use image maps. use jquery react on clicking 1 of hotspots , change selected index in select box.

---------------------------------------- edit - working example ------------------------------

heres working example made you: example can click 2 regions in netherlands on map, "noord-brabant" , "gelderland".

html:

<div class="mymap">   <img alt="" src="map_overlay.png" usemap="#holland"> </div>  <map id="mymap" name="holland">   <area shape="circle" coords="280,230,30" alt="gelderland" />   <area shape="circle" coords="200,300,30" alt="brabant" /> </map>  <select class="mymapselect">   <option value="none">take pick on map</option>   <option value="brabant">brabant</option>   <option value="gelderland">gelderland</option> </select>

css:

  .mymap {     background: url('map.png');     width: 393px;     height: 449px;   }    .mymap.brabant {     background-position: -393px 0;   }    .mymap.gelderland {     background-position: -786px 0;   }

js:

<script type="text/javascript">     $('area', '#mymap').mouseover(function(){       $('.mymap').attr('class', 'mymap ' + $(this).attr('alt'));     });     $('area', '#mymap').mouseout(function(){       $('.mymap').attr('class', 'mymap');     });     $('area', '#mymap').click(function(){       $(".mymapselect").val($(this).attr('alt'));     }); </script>

so did make sprite background images map. use transparent img can add our image maps , make hovers on area's change class based upon alt attribute. need add styling regions , make sprite move.

hope helps :)


Comments

Post a Comment

Popular posts from this blog

Javascript line number mapping -

-
magically formatted comments change reported line number of javascript errors in browsers; this: //@line n "f" n line number , f file name. unfortunately, //@line appears ungoogleable. know there documentation on feature, , browsers support it? (i found references here , here .) from can find available in mozilla based browsers. it using js_setoptions command can turn these options on or off depending on values passed. https://developer.mozilla.org/en/js_setoptions
Read more

c# - Is it possible to remove an existing registration from Autofac container builder? -

-
something along lines: builder.registertype<mytype>().as<itype>(); builder.registertype<mytype2>().as<itype>(); builder.deregistertype<mytype>().as<itype>() var container = builder.build(); var types = container.resolve<ienumerable<itype>>(); assert.istrue(types.count == 1); assert.istrue(types[0].gettype == typeof(mytype2)); scenario: go through bunch of assemblies , go register types want make sure have 1 implementation of given type. need before create container. track on own nice if autofac me bit. this cannot done directly using containerbuilder , unless start on new one. mind you, having first built container should able construct new container filtering away unwanted types , reusing registrations first container. this: ... var container = builder.build(); builder = new containerbuilder(); var components = container.componentregistry.registrations .where(cr => cr.activator.limittype != typ...
Read more

php - Mysql PK and FK char(36) vs int(10) -

-
i have read mysql can handle indexes , searches better if tables keys integers rather char(36) uuid's. is worth converting int(10)? note: use 1 server , have have plans use multiple databases concurrently therefore removing 1 of big reasons using uuid. our tables innodb if makes difference. thanks in advance. usually rdbms can handle integer keys pk more efficient, other datatypes. reason how build index column, yes: long dont require string (or other typed) keys, should use integers. however: char(36) , int(10) far away being equal, because int(10) much smaller, char(36). dont know, if require many different keys, should keep in mind. update, complete last paragraph: int(10) 32-bit, char(36) 36 - ^byte^ (= 288-bit). not mean, int consumes less space, means, char(36) has 4 times more different keys.
Read more