HTML 코드로 롤오버 이미지를 만드는 방법

콘텐츠

• 지침
• 필요한 것

인터넷 상에 존재하는 수백만 개의 웹 사이트들로 인해 귀하의 것이 고유해야합니다. 웹 사이트에 동적 효과를 추가하는 데 사용되는 기술 중 하나는 "롤오버 버튼"이라고도하는 "롤오버 이미지"입니다. 본질적으로 방문자가 이미지 위로 마우스를 가져 가면 마우스가 제거되면 이미지가 변경되고 정상으로 돌아갑니다. 이미지 나 문자의 색상 변경과 같은 미묘한 효과에 사용할 수 있습니다. 다양한 디자인 프로그램에서 기본적인 HTML 형식으로 롤오버 이미지를 만들 수 있습니다.

지침

롤오버 이미지의 도움으로 동적 웹 사이트 만들기 (Jupiterimages / Photos.com / 게티 이미지)

1. Photoshop과 같은 이미지 편집 소프트웨어를 사용하여 원하는 크기 (픽셀 단위)의 새 문서를 만듭니다. 같은 크기 여야하는 정상 및 "롤오버"이미지를 만듭니다.

2. "파일"메뉴에서 "저장"을 선택하여 두 이미지를 개별적으로 저장하십시오. JPEG, GIF 또는 PNG 형식을 사용하십시오. 처음 두 가지가 가장 일반적으로 사용되지만 PNG는 투명성을 유지합니다. 이미지를 사이트의 로컬 루트 폴더에 저장하십시오.

3. Adobe Dreamweaver와 같은 적절한 디자인 소프트웨어를 엽니 다. 라이브러리의 "새로 고침"버튼을 클릭하여 사이트의 라이브러리 및 로컬 루트 폴더를 업데이트하십시오. 루트 폴더에서 이미지를 찾습니다.

4. 웹 페이지의 코드보기로 전환하십시오.

5. 유형 "

   

   "코드에서 시작 인용 부호없이.

6. "http://yoursite.com"을 귀하의 웹 사이트 주소로 대체하십시오. 또한 "IMAGE1"및 "IMAGE2"를 각각 정상 및 "롤오버"이미지의 이름으로 대체하십시오.

필요한 것

• 이미지 편집 소프트웨어
• 웹 디자인 소프트웨어