메뉴 건너뛰기

조회 수 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
402 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 279707
401 11장 6번 으엉 2019.11.27 187689
400 placeholder속성 1 khl 2017.04.08 85742
399 11장 6번 1 mj 2018.11.29 67584
398 실습문제 8-2 (3) 13412 2018.11.08 16074
397 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 14076
396 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 음음 2019.01.24 8848
395 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 7446
394 14장 예제 사라진 건가요 1 ... 2021.03.09 4078
393 localhost 관련 문의 3 소년정 2018.02.20 4040
392 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3878
391 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 3835
390 연습문제 답안지 2 vdncnck 2017.03.28 3266
389 짝수번 정답 3 idididid 2017.12.24 3136
388 8장 연습문제 실습문제 4장 2 student 2017.05.08 2872
387 10장 오픈챌린지 5 은성 2017.04.07 2247
386 open challenge 05 2 hardworking 2017.03.29 2225
385 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1997
384 HTML을 열심히 공부중인 학생입니다 3 열심히 하자 2018.05.30 1962
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로