(예시를 위에 구글에서 아무거나 쳐서 가져온 사진)
제가 홈페이지를 제작하고 있는데 궁금한점이 생겨서 이렇게 글을 올립니다.
저런식으로 어떠한 사진을 올렸을때 (예시를 오토바이로 들겠습니다.)
저렇게 바퀴에 마우스를 올리면 해당 부분위에 테두리가 빛나게 하고싶습니다..
이게 사진이 사각형인경우 마우스 오버해서 오버 이벤트를 주면 되는데..
곡선, 원 이런게 포함되니까 어찌해야할지 감이 안잡힙니다.. ㅠㅠ
(예시를 위에 구글에서 아무거나 쳐서 가져온 사진)
제가 홈페이지를 제작하고 있는데 궁금한점이 생겨서 이렇게 글을 올립니다.
저런식으로 어떠한 사진을 올렸을때 (예시를 오토바이로 들겠습니다.)
저렇게 바퀴에 마우스를 올리면 해당 부분위에 테두리가 빛나게 하고싶습니다..
이게 사진이 사각형인경우 마우스 오버해서 오버 이벤트를 주면 되는데..
곡선, 원 이런게 포함되니까 어찌해야할지 감이 안잡힙니다.. ㅠㅠ
그 위에 바퀴만 있는 이미지를 똑같은 위치에 하나를 더 올려놓고 그 이미지에 mouse over 이벤트를 걸어 놓으면 되겠지요..
어차피 색깔이 바뀐다면 바퀴 부분바뀌는 것이니 그 이미지에 border를 줘도 되고, 이미지를 교체해도 되고요..
image map의 경우 shape=circle로 두면 되긴 하지만 이건 클릭이 있을 때 이벤트가 발생을 하니까 이 상황에 적용을 하긴 그렇고요..
바퀴부분만 일반 이미지와 백그라운드 후광이 있는 이미지 2장으로 Mouseover 이벤트를 활용하면 되겠네요.
저는 배경을 투명으로 날리고 css를 입힙니다.
이미지 div 넣고 포지션 absolute 한다음 img 넣고
바퀴 영역 div 넣고 포지션 absolute 넣어서 bottom , right 넣은 다음 영역 지정하고
css 에서 마우스 오버시 div 영역을 라운드처리 하거나 애니메이션 처리하면 됩니다.
현재까지 애니메이션은 키프레임 어쩌고 하는걸로 쓰는거로 알고있네요
아니라면 이미지맵 이라고 치면 나올꺼에요 이걸 이용해도 될겁니다.