HTML&CSS

HTML&CSS&Javascript로 글자에 마우스 올리면 사진 보이게 하기

Linda~! 2020. 3. 3. 00:17

<html>

    <head>

        <meta charset="UTF-8">

        <title>이미지태그</title>

       

            <style>

            body{background-color:linen; color:green;

            margin-left:40px; margin-right:40px;}

            h3{text-align:center; color:darkred;}

            

        </style>

        <script>

            function show(){//<img>에 이미지 달기

                document.getElementById("dog").src="a dog.jpg"

                //Id가 'dog' 인 html요소를 가져와라 document = HTMl문서

            }

            function hide(){//<img>에 이미지 제거

                document.getElementById("dog").src="";

                //Id가 'dog' 인 html요소를 가져와라 document = HTMl문서

            }

            

        </script>

    </head>

    <body>

        <h3 onmouseover="show()" onmouseout="hide()">A happy dog</h3>

        "A happy dog"에 마우스 올려보세요~!

        <img width ="500" height ="400" id="dog" src="">        

        </body>

</html>