이미지와 링크, alt가 랜덤하게 노출되는 간단한 배너를 만들어보자.

일단 방금 만들었던 소스를 예제로 아래에 넣어보았다.

function randomImage(){
	var bannerImages=new Array();
		bannerImages[0]="/blog/WertyImg/banner_holdholic.jpg";
		bannerImages[1]="/blog/WertyImg/banner_mylocation.jpg";
		bannerImages[2]="/blog/WertyImg/banner_touchlock.jpg";
	var bannerlink = new Array();
		bannerlink[0] = "http://goo.gl/t58iI";
		bannerlink[1] = "http://goo.gl/jElia";
		bannerlink[2] = "http://goo.gl/2DkdP";
	var bannerTitle = new Array();
		bannerTitle[0] = "통화중 화면 잠금 어플 - 홀드홀릭 다운받기";
		bannerTitle[1] = "간편하고 빠르게 내 위치 전송 어플 다운받기";
		bannerTitle[2] = "화면 터치를 잠그는 터치잠금 어플 다운받기";
	var bannerAlt = new Array();
		bannerAlt[0] = "통화중 화면 잠금 어플 - 홀드홀릭";
		bannerAlt[1] = "간편하고 빠르게 내 위치 전송 어플";
		bannerAlt[2] = "화면 터치를 잠그는 터치잠금 어플";

	var ranNum=Math.floor(Math.random()*bannerImages.length);

	$('#top-ad2 img').attr({src : bannerImages[ranNum],
				alt: bannerAlt[ranNum]});
	$('#top-ad2 a').attr({href : bannerlink[ranNum],
				title: bannerTitle[ranNum]});
				
}
randomImage();
//randomImage

 images[0]~images[2]에는 이미지 경로를 입력한다.

bannerlink[0]~bannerlink[2]에는 이미지에 맞춰 클릭시 이동시킬 url을 넣는다.

bannerTitle[0]~bannerTitle[2]에는 앵커에 대한 타이틀을 넣어준다.

bannerAlt[0]~bannerAlt[2]에는 alt에 넣을 텍스트를 입력한다.

위에는 예시로 총 3개의 배너를 정의한 것인데 추가하려면  images[2] 밑에  같은 형식으로 images[3] 으로 추가한다.

물론 bannerlink, bannerTitle, bannerAlt 들도 따라서 추가해야한다.

위 스크립트는 #top-ad2라는 id를 가진 div안의 이미지와 앵커를 변경하는 것이다.

html 페이지에서는 아래 코드를 노출할 body안에 넣는다.

<div id="top-ad2">
	<a href="http://goo.gl/t58iI" target="_blank" title="HoldHolic 다운받으러가기"><img src="/blog/WertyImg/holdholicbanner150.jpg" border="0" alt="HoldHolic"></a>
</div>

 앵커안에는 스크립트로 이미지가 노출시키기 전에 기본적으로 보여질 이미지와 앵커다. 기본적으로 보여주지 않으려면 아래처럼 값을 빼면 된다.

<div id="top-ad2">
	<a href="" target="_blank" title=""><img src="" border="0" alt=""></a>
</div>