CSS를 사용하여 텍스트-이미지 효과 구현_CSS/HTML

텍스트의 경우, 텍스트를 마우스로 클릭하면 텍스트가 사라지지만, 원래 텍스트가 그림으로 바뀌었던 곳은 마우스가 그림을 클릭하면 그림이 사라지고 원본 텍스트가 나타납니다. 마술처럼 흥미롭지 않나요?! 이 효과는 Dreamweaver의 Behavirs 기능을 사용하여 얻을 수도 있지만 이를 위해서는 분명히 많은 코드가 추가되는 JavaScript 프로그램을 추가해야 합니다. CSS를 사용하여 이 효과를 만들려면 훨씬 적은 양의 코드가 필요합니다.

원리: CSS 속성 값이 동적으로 변경될 수 있다는 점을 활용하세요.

아이디어: HTML 요소의 CSS 속성 중 두 가지 속성 값을 정의한 다음 이벤트를 사용하여 이를 트리거하면 해당 이벤트가 발생하면 HTML 요소의 속성 값이 원하는 목적을 달성하도록 변경됩니다. .

제작방법 :

1. 웹페이지에 텍스트를 입력하고 "Span" 태그로 묶은 다음 CSS "ID" 속성을 추가합니다. 즉, 텍스트에 "Text1"과 같은 코드명을 지정합니다. , 식별용) 다른 그림을 삽입하고 "Span"으로 묶은 다음 ID="image1";

과 같이 "ID" 속성을 추가합니다.

2. 웹 페이지 소스 코드의 〈head〉와 〈/head〉 사이에 다음 CSS 코드를 추가합니다.

　〈style type="text/css"〉

　

　〈/style〉

위 코드에서 "top"과 "left"의 값은 웹 페이지에서 텍스트와 그림의 위치를 ​​지정하는 데 사용되며 "backgroud-color"는 텍스트의 배경색을 결정하는 데 사용됩니다. . 이러한 속성 값은 실제 상황에 따라 수정되어야 합니다. 가시성은 현재 객체가 표시되는지 여부를 결정하는 CSS 속성입니다. 이 예에서는 효과를 얻기 위해 이 속성의 값이 동적으로 변경됩니다.

3. "Text1"의 "span"에 CSS ".style2"를 로드하고 해당 텍스트가 처음에 표시되도록 한 다음 "onclick" 트리거 이벤트를 로드합니다. 이 이벤트가 발생하면 두 가지 작업을 수행합니다. "Text1"이 CSS ".style1"을 채택하여 텍스트를 숨기도록 하는 것이고, 다른 하나는 "image1"이 CSS ".style4"를 채택하여 이미지를 표시하도록 하는 것입니다. 이렇게 하면 "Text1" 및 해당 텍스트에 대한 코드는 다음과 같습니다. 〈span　id="text1" class="style2" onclick="document.all.text1.className=''style1''; document.all. image1.className=''style4'' "〉〈font color="#0000FF"〉 이 텍스트를 마우스로 클릭하시면 텍스트가 사라지고 이미지가 됩니다. 이미지를 클릭하시면 이미지가 사라지고 텍스트로 돌아옵니다. 〈/글꼴〉

　〈/span〉

　4. 또한 "image1"의 "span"에 CSS ".style3"을 로드하여 처음에는 이미지가 숨겨지도록 하고 또 다른 "onclick" 트리거 이벤트를 로드합니다. 이벤트가 발생하면 두 가지 작업이 수행됩니다. 하나는 "Text1"이 CSS ".style2"를 채택하여 텍스트를 표시하도록 하는 것이고, 다른 하나는 "image1"이 CSS ".style3"을 채택하여 이미지를 숨기도록 하는 것입니다. 이런 식으로 "image1"과 해당 이미지에 대한 코드는 다음과 같습니다.

　〈span id="image1" class="style3" onclick="document.all.text1.className=''style2'';document.all.image1.

　className=''style3'' "〉〈img src="image/line.gif" width="316"

height="26"〉〈/span〉

위 코드에서 'img'에 있는 코드는 실제 제작 시 삽입되는 이미지에 따라 변경됩니다.