초보코딩 질문합니다
본문
포트폴리오를 만들고있는데 메인ㅍㅔ이지에서 어바웃페이지로 어떤이미지를 클릭하면 이동하게 하고싶은데
코딩을 어떻게 해야 될까요 ㅠ
<body>
<div id="wrap">
</div>
<!--메인페이지-->
<div id="con1_box">
<img id="flag1" src="images/flag1.png" />
<img id="flag2" src="images/flag2.png" />
<img id="balloon" src="images/balloon.png" />
<img id="cloud1" src="images/cloud1.png" />
<img id="cloud2" src="images/cloud2.png" />
<img id="cloud3" src="images/cloud3.png" />
</div>
<!-- about-->
<div id="about">
<a href="#"></a>
</div>
</body>
</html>
* { margin:0; padding:0; list-style:none; }
body { position:relative; background-image: url(../images/home_bg.jpg); }
#wrap { width:1920px; height:100%; margin:0 auto; }
/* main */
#balloon { position:absolute; top:122px; left:668px; }
#cloud1 { position:absolute; top:328px; left:1425px; }
#cloud2 { position:absolute; top:498px; left:123px; }
#cloud3 { position:absolute; top:228px; left:333px; }
#click { display:block; }
#flag1 { position:absolute; top:772px; left:1780px; }
#flag2 { position:absolute; top:790px; left:1796px; cursor: pointer;}
/* about */
#about { display:block; background-image: url(../images/about_bg.jpg); }
$(document).ready(function() {
// main icon
setInterval(function(){
$('#balloon').animate({ top: 100}, 'slow');
$('#balloon').animate({ top: 122}, 'slow');
$('#cloud1').animate({ left: 1400}, 'slow');
$('#cloud1').animate({ left: 1425}, 'slow');
$('#cloud2').animate({ left: 100}, 'slow');
$('#cloud2').animate({ left: 123}, 'slow');
$('#cloud3').animate({ left: 313}, 'slow');
$('#cloud3').animate({ left: 333}, 'slow');
},500);
//about
$('#flag2').click(function(){
var img = $(this).find("img").attr("src");
$("#about").find("img").attr("src", img);
});
});
일단 제가 해본건데 아무것도 안되네요.. 어떻게 해야될지 도움좀 주세요 ㅠㅠ 부탁드립니다ㅠ
