이미지/링크를 사용하여 양식 선택 전환 (드롭 다운)

Question

나는 클라이언트를위한 양식을 작성 중이며 방문자가 시각적으로 위치를 선택하고시 : 드롭 다운에 대한 링크를 가질 수 있도록 도시지도를 요청했습니다./양식 영역 선택.

여기에 고객이 오래된, 고풍스러운 & 웹 사이트가 멋지게 보여주고 싶은 진절머리 나는 웹 사이트가 있습니다. http://www3.telus.net/russellsrubbish/order_form.htm

나는 이걸 Hidden Form Value Change으로보고 있었는데 올바른 방향으로 나아갈 수 있을지 확신 할 수 없었습니다.

제대로 설명하지 못한 경우 사과 드리며 jQuery는 매우 초보자입니다.

Answer 1

이 작업을 수행하려면지도로 배경 스프라이트를 만들고 image maps을 사용하십시오. jquery를 사용하여 핫스팟 중 하나를 클릭하여 반응하고 선택 상자에서 선택한 색인을 변경하십시오.

---------------------------------------- 편집 - 실례 - ----------------------------

실례가 당신을 위해 만든 것입니다 : Example 두 영역을 클릭 할 수 있습니다. "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 a pick on the 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> 

그래서 내가 실제로 무슨 짓을했는지지도에 대한 배경 이미지로 스프라이트를 만들 수 있습니다. 투명한 img를 사용하여 이미지 맵을 추가하고 alt 속성을 기반으로 클래스의 변경을 가리킬 수 있습니다. 모든 지역에 스타일을 추가하고 스프라이트를 이동하면됩니다.

희망이 도움이 :)

Answer 2

당신이 오래된 형태는이 같은 뭔가를 할 수 jQuery를에 사용되는 자바 스크립트 ...

html로 변환하고자하는 경우 :

... 
<map name="zones" id="zones"> 
    <area shape="poly" coords="23,47,26,85,64,103,157,48,129,19,70,19" alt="Richmond"> 
... 
</map> 

을

jQuery를 스크립트 :

$('#zones area').each(function() { 
    $(this).click(function(e) { 
     $('#city').val($(this).attr('alt')); 
    }); 
}); 

당신이 = "CIT 도시 드롭 다운에게 ID를 부여해야합니다 Y "를 확인하십시오 면적 요소의 ALT 태그를 사용하면지도/지역 요소와 이미지 맵의 leiu에 CSS 이미지 맵을 사용할 수 있습니다 가능하면 도시 값을

---

드롭 다운 일치합니다. CSS 이미지 맵은 호버 효과를 사용하는 옵션을 제공합니다. A List Apart: Articles: Night of the Image Map에 대한 자세한 내용보기. 일부는지도/면적 요소를 사용하는 이미지지도가 죽어가는 품종이라고 말할 수도 있습니다.