고민상담 매크로 관련 질문은 아니지만 질문 드립니다! (웹사이트 제작 관련)
페이지 정보
본문
현재 제작중인 웹사이트가 주택을 주문제작하는 사이트 입니다.
자동차 인디오더 하는것처럼 주택도 인디오더를 하는 방식을 구현하고 싶은데요.
각각의 옵션을 선택 했을때 프리뷰를 보여지게 하는 기능을 어떻게 구현해야 할지 모르겠습니다..
옵션이 한가지가 아니고 여러가지여서 교차선택?을 했을때 그에 맞는 이미지가 나오게 하는 기능만 구현되면
어렵지 않은 것일텐데 프로그래밍이나 HTML에 지식이 없는 일반인이라서 조금은 어렵네요..
워드프레스로 제작 중 이구요. 도움이 되실까봐 벤치마킹 중인 사이트 링크도 올려드리겠습니다
감사합니다.
현재 제작 중인 사이트: tomscavin.com
벤치마킹 중인 사이트(테슬라): https://www.tesla.com/ko_kr/model3/design#paint
- 이전글Re: Lee1 님 지식인에 물어보셨던 소스요~ 20.03.13
- 다음글홈페이지에서는 게임 스크립트를 올려도 되나요? 20.03.12
댓글목록
엔지엠소프트웨어님의 댓글의 댓글
엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date
이미지를 각각 전부 만들어야 합니다. 그리고, div에서 스위치 해야 할거 같아요.
이 부분은 jQuery로 가능할거구요.
당연하지만 ajax (sync)로 구현하셔야겠죠^^;
아래처럼 이미지가 각각 서버에 존재해야 합니다.
https://static-assets.tesla.com/configurator/compositor?&options=$W38B,$PPMR,$DV2W,$MT308,$IN3B2&view=STUD_3QTR&model=m3&size=1441&bkba_opt=1&version=v0027d202003051352&version=v0027d202003051352
https://static-assets.tesla.com/configurator/compositor?&options=$W39B,$PMNG,$DV2W,$MT308,$IN3B2&view=STUD_3QTR&model=m3&size=1441&bkba_opt=1&version=v0027d202003051352&version=v0027d202003051352
엔지엠소프트웨어님의 댓글의 댓글
엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date
ajax는 비동기 통신하는거예요^^;
예를 들어서 전체 화면이 있잖아요? 여기서 자동차 영역만 새로고침하고 싶은 경우에 ajax를 사용합니다.
네이버나 위 참고 사이트처럼 전체 사이트에서 일부분만 새로 고쳐야 하는 경우에 사용되는 기술이에요.
div 안에 img를 넣는데요. 요소(element)의 이미지를 교체할 수 있어요.
물론, 스텍이나 블록, 절대, 상대등등... 많은 속성들이 있어서 디자인 구성에 영향을 주지 않도록 사용하셔야 합니다.
핵심은~ 에이작스(아작스)를 이용해서 이미지 부분만 서버로부터 받아와서 jQuery로 div노드 아래 이미지를 교체해야 한다는 것입니다.