연습 문제를 추적하는 운동 웹 사이트를 구축 중입니다. 각 운동은 신체의 특정 부위에 대한 매핑을 가지고 있습니다. (벤치 프레스 -> 가슴)이미지의 영역을 강조 표시하는 방법에 대한 제안을 찾고
저는 이것을 시각화하는 방법을 생각해보고자하는 사람의 이미지를 두는 아이디어를 생각했습니다. "강조 표시 "영향받은 근육. 정렬의이 같은 : 어떤 지역은 강조하지 않고 내가 좋은 사진을 발견했다
alt text http://aquaviews.net/wp-content/uploads/2009/12/Quadriceps.png
가정하면, 자바 스크립트 (클라이언트 측) 또는 함께 사진에 동적으로 "하이라이트"영역 (빨간색 부분)에 어쨌든있다 C# (서버 측) 또는 모든 운동마다 별도의 그림이 필요합니까? 당신은 위에 링크의 위치를 CSS를 사용할 수
SVG or a <canvas> element으로 기본 이미지를 오버레이 할 수 있습니다.
그러나 브라우저 간 문제, 정렬 문제, 그리고 아마도 치즈 같은 표정이 있습니다.
나는 예술적인 경향이있는 사람이 하이라이트를 각 운동마다 별도의 그래픽으로 사용하도록했습니다.
별도의 이미지가 아닌 단일 파일 (예 : CSS Sprite)로 유지/결합하십시오. 그런 다음 전문적인 모양과 훌륭한 크로스 브라우저 지원 및 쉽고 간단한 코딩을 얻을 수 있습니다.
말했다 근육 그룹과 강조되어있는 부분 부분을 보여 롤오버를 사용하는이 ...
편집 : 나는 정교해야 추측 죄송합니다. CSS로 요소를 배치하고 이미지 롤오버를 사용하여 이미지의 해당 섹션을 해당 이미지의 강조 표시된 섹션으로 바꿀 수 있습니다. 각 근육 그룹을 자신의 div에 넣고 해당 근육 그룹의 이미지를 배경 이미지에 넣음으로써이 작업을 수행 할 수 있습니다. 그런 다음 롤오버를 스왑 아웃합니다. 또는 z- 인덱스를 사용할 수 있고 필요한 경우 롤오버 요소를 절대적으로 배치하고 필요할 때 z- 인덱스를 변경할 수 있습니다.
별도의 이미지를 요구하지 않고이 작업을 수행하는 방법을 찾고 있다고 생각합니다. 그렇다면 대답은 아니오입니다. 적어도 강조 표시된 영역에 대해 별도의 이미지를 만들어야합니다. 아마도 브라우저 간 문제가있는 CANVAS 요소를 사용하지 않을 경우 이미지 요소의 임의의 영역에 필터를 적용 할 방법이 없다고 생각합니다. 당신은 다양한 이미지를 일단
그리고 당신은 알파 필터를 적용 할 수 있더라도, 당신은 여전히 모든 형태의 형상을해야하므로 노력/일이 아마도 동일
...잡다한 방법이 있습니다 그 후 그 문제에 접근해라.
흥미롭게도, 나는 개인 트레이너 였지만, 똑같은 일을했지만 플래시로 그랬다. 그건 내 추천입니다. 당신이 JS 및 CSS와 함께 할하려는 경우
그러나, 스프라이트의 브록의 제안 가능성이 갈 수있는 방법입니다.
당신이 무엇을 할 수 있는지, 매우 간단하게, 특정 지역에 대한 강조 표시된 섹션이 해당 이미지의 동일한 버전의 배경 이미지에 대해 교환하는 JS의 함수를 호출 이미지 맵을하는 것입니다. 여러 개의 작은 이미지가 아니라 동일한 이미지가 있지만 한 부분 만 강조 표시됩니다.
하나의 질문이지만 두 섹션을 강조 표시해야하는 복합 연습을 수행 할 예정입니까? 예를 들어, 경사 기자는 가슴 부분과 삼각주 부분을 강조 표시합니다. 이것은 롤 오버의 특수성으로 인해 전체 제안을 더욱 복잡하게 만듭니다.
이것은 카운티지도에서 강조 표시 한 것처럼 간단한 구현입니다. 이미지 맵을 사용하십시오. 그런 다음 (mapper.netzgesta.de) mapper.js와 같은 강조 스크립트를 찾으십시오. 당신이해야 할 일은 제대로 설정된 이미지 맵 (이미지가 div에 의해 suuounded되어야 함)과이 스크립트에 대한 링크가 있어야합니다. 강조 표시가 즉시 시작됩니다. 라이센스를 확인하십시오. Ther은 javascript css와 jquery를 사용하여 동일한 효과를 얻는 스크립트입니다. 단지 Google에서 이미지지도를 강조 표시합니다. 미안 해요, 직장에 대한 보안 사이트에 당신에게 내 구현에 대한 링크를 제공합니다. 행운을 빕니다.
당신은 정확합니다, 나는 여러 영역이 강조 표시된 특정 연습을 원할 것입니다. 나는 그것이 더 복잡한 것을 소개하지 않을 것 인 것이라고 상상했다. 그러나 나는 과소 평가했을지도 모른다. 당신의 플래시 솔루션에 대해 좀 더 통찰력을 줄 수 있습니까? – leora
@ooo - 그 특정 응용 프로그램은 몇 년 전에 만들어졌으며 더 이상 필요하지 않지만 비슷한 클라이언트를 위해 만든 다른 응용 프로그램이 있습니다. 이 예에서 고객은 척추 통증과 관련된 정보를 찾기 위해 몸의 특정 부분을 뒤집을 수 있기를 원했습니다. 꽤 빨리 아이디어를 얻을 수 있습니다. 이 http://build.jhousemedia.com/body_map.swf 내가 기꺼이보다 더하려는에 도울 : 이는 온 클릭 핸들러는 더 이상 아무것도하지 않도록 더 큰 페이지의 일부 프로젝트가 필요한 경우 – jerebear