2013-06-14 4 views
0

내 사이트 탐색에 사용되는 간단한 "순서도"를 그려야합니다. 지금 내가 해왔 던 것은이 MSPaint를 그려 본 다음 픽셀 맵을 추가하여 클릭 한 사진의 위치에 따라 사용자를 다른 페이지로 이동시킵니다.탐색 메뉴로 웹 페이지의 순서도 그리기

사용자가있는 페이지가 색이 바뀌 었다고 (예를 들어, 사용자가 3 단계를 클릭하면 3 페이지로 이동하고 3 페이지가 녹색으로 변경됨).

Navigation Flow Chart

이를 구현하는 가장 좋은 방법은 무엇입니까? SVG? 캔버스? 자바 스크립트? CSS?

올바른 방향으로 나를 가리킬 수있는 모든 대답은 매우 환영합니다.

답변

0

여기에서 가장 먼저 실수 한 것은 픽셀 맵을 사용하고 있다는 것입니다. 뭔가 간단하기 때문에, 그냥 순수한 HTML/CSS 엔티티로 만들 것을 권하고, 실제로 .active 클래스 나 다른 페이지와 동등한 것을 제공하는 것이 좋습니다. 이것은 내 책에서 일을하는 가장 쉬운 방법이며 이미지가 어떤 이유로 든로드되지 않으면 정상적으로 저하되는 이점이 있습니다.

그런 식으로하고 싶지 않고 어떤 이유에서든 정적 이미지에 실제로 첨부 된 경우 특정 단계가 강조 표시된 이미지의 변형이있을 수 있으며 적절한 이미지가 표시 될 수 있습니다 해당 페이지에 대해 그렇게하면 원하는 것을 성취 할 수는 있지만 권장하지는 않습니다. HTML 솔루션과 비교할 때 네트워크 사용량 측면에서 매우 무거워요.

캔버스로이 그림을 그릴 수 있다는 것을 명심하십시오. 그러나 기본적으로 navbar를 그리는 경우이 상황에서 과도한 것처럼 보입니다. 이미 전체 순서도를 작성하고 해당 코드를 재사용하고 싶다면 다른 이야기 일 것입니다. 이 경우 정적 인 이미지로 HTML 만 사용하면됩니다. 더 빠르고 쉽게 사용할 수 있습니다.

+0

안녕하세요, CSS 코드로 도형을 그려야한다는 뜻입니까? .active 클래스를 사용하여 원하는 효과를 주거나 예를 들어 그림을 그립니다. 일러스트 레이터, 그리고 그들이 HTML/CSS와 함께 togethere "접착제"? – williamwmy

+0

어느 쪽이든! 이전 버전과의 호환성을 위해 여러분이 만든 배경 이미지를 사용하고 그냥 a로 변경해도 둘 다 작동합니다. 활성 클래스. – moberemk