메뉴 건너뛰기

조회 수 323 댓글 2

page 46 그대로 따라 작성한 후 이미지 파일을 같은 폴더에 ElvisPresley.png 이미지 넣은 후 html 작성해 봤더니 마우스 올려대도 이미지가 안나오네요.

혹시 제가 잘못 작성한게 있을까요?

<!DOCTYPE html>
<html>
<head>
<title>웹 페이지의 구성 요소</title>
<style>
    body {background-color: linen; color : green;
            margin-left: 40px; margin-right: 40px;}
    h3 { text-align: center; color : darkred; }
    hr {height: 5px; border : solid grey;
        background-color: grey}
    span{color : blue; font-size: 20px;}
</style>
<script>
    function show(){
        document.getElementById("fig").src="ElvisPresley.png";
    }
    function hide(){
        document.getElementById("fig").src"";
    }
</script>
</head>
<body>
<h3 onmouseover = "show()" onmouseout="hide()">
    Elvis Presley</h3>
<hr>
<div><img id="fig" src=""></div>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>"
</body>
</html>

c드라이브 web폴더를 만들어 거기에 html과 이미지 파일 같이 넣어놨습니다

?
  • ?
    공부중 2020.09.10 16:08
    다시 싹다 지우고 작성해보니 요번에는 그림이 나오네요 오류였던건가요?
  • ?
    관리자 2020.09.10 18:24
    1. 잘못 타이핑된 부분이 있습니다. 아래서 = 이 빠졌네요.

    function hide(){
    document.getElementById("fig").src""; // =이 빠졌네요

    -->
    function hide(){
    document.getElementById("fig").src = ""; .// 여기에 = 삽입하였습니다.

    2. 그리고 보내준 2.jpg를 보면 아래 라인 끝에 빨갛게 오류가 났다고 표시되어 있는데 이곳에 마우스를 올리며 오류 메시지를 보여 줍니다. 잘 관찰하면 문제를 해결할 수 있어요.
    <h3 onmouseover = "show()" onmouseout="hide()">

    오류 메시지는 "show() is not defined" 인데 show() 함수가 선언되어 있지 않다고 합니다.
    선언안된 함수를 부르니까 마우스 올리면 오류가 나서 이미지가 출력되지 않아요.
    분명이 show() 함수를 만들었는데 라고 생각들겠죠.
    그러니까 show() 함수의 선언부 가까운 다른 곳에 오류가 있으면 show() 함수까지 영향을 받아요

    또 오른쪽 상단에 크롬에서 x14라고 빨갛게 표시된 부분이 보이는데 이곳을 누르면 오류난 곳을 알려줍니다.
    이 기능을 활용하면 오류를 빨리 찾고 수정할 수 있습니다.

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18282
403 오픈챌린지 5장 ces 2024.04.19 23
402 책을 종이책으로 구매했는데 1 ddd 2024.03.21 103
401 저기 황기태 저자님 1 방문자 2024.02.10 150
400 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 아인슈페너 2023.11.24 77
399 연습문제 3장 5번 문제 1 seungjun 2023.10.26 129
398 2장 오픈챌린 cmc 2023.09.17 148
397 웹서버소프트웨어 1 file park 2023.04.15 199
396 Sublime Text, VS code IDE설명 update바랍니다 1 삼오칠 2023.04.15 93
395 Atom은 IDE 리스트에서 삭제해주세요. 1 삼오칠 2023.04.15 84
394 예제 2-25 <video>태그로 비디오 삽입 2 file 코딩어렵다 2023.04.13 87
393 예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p) 2 file 코딩어렵다 2023.04.12 54
392 비정형 표 만들기 다운로드 1 애치 2023.04.04 103
391 오픈챌린지 5 file ab 2023.02.17 171
390 오픈챌린지 1 ab 2023.02.16 140
389 form 태그 1 열공이 2023.01.31 88
388 예제 2-21 질문입니다. 1 file 열공이 2022.12.23 117
387 계산기 문제 변형 문의 file Mikael 2022.12.13 56
386 6장 이론문제 9번 지역,전역,블록변수 질문이요. 문신 2022.12.10 60
385 2장 이론 문제 답 문의 MIKAEL 2022.12.09 241
384 2장 이론문제 4번 답 문의 MIKAEL 2022.12.09 84
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로