[JSP] mouseOver와 이미지5개

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page trimDirectiveWhitespaces="true"%>

<%@ include file="/WEB-INF/jsp/com/tagLib.jsp"%>

<script type="text/javascript">

$(document).ready(function() {

var chanMenuNum = document.listForm.chanMenuNum.value;

fn_mouseOver(chanMenuNum);

});

function fn_mouseOver(id) {

// $("#videoChanCd").val(id).toString();

// $(this).attr(src, $(this).attr(src).replace("_out", "_over"));

if (id == "CHAN_01") document.getElementById("CHAN_01").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img1_over.png";

if (id == "CHAN_02") document.getElementById("CHAN_02").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img2_over.png";

if (id == "CHAN_03") document.getElementById("CHAN_03").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img3_over.png";

if (id == "CHAN_04") document.getElementById("CHAN_04").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img4_over.png";

if (id == "CHAN_05") document.getElementById("CHAN_05").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img5_over.png";

if (id == "CHAN_06") document.getElementById("CHAN_06").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img6_over.png";

if (id == "CHAN_07") document.getElementById("CHAN_07").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img7_over.png";

if (id == "CHAN_08") document.getElementById("CHAN_08").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img8_over.png";

if (id == "CHAN_09") document.getElementById("CHAN_09").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img9_over.png";

}

function fn_mouseOut(id) {

if (id == "CHAN_01") document.getElementById("CHAN_01").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img1_out.png";

if (id == "CHAN_02") document.getElementById("CHAN_02").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img2_out.png";

if (id == "CHAN_03") document.getElementById("CHAN_03").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img3_out.png";

if (id == "CHAN_04") document.getElementById("CHAN_04").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img4_out.png";

if (id == "CHAN_05") document.getElementById("CHAN_05").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img5_out.png";

if (id == "CHAN_06") document.getElementById("CHAN_06").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img6_out.png";

if (id == "CHAN_07") document.getElementById("CHAN_07").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img7_out.png";

if (id == "CHAN_08") document.getElementById("CHAN_08").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img8_out.png";

if (id == "CHAN_09") document.getElementById("CHAN_09").src = "${pageContext.request.contextPath}/images/layout/channel/tab_img9_out.png";

var chanMenuNum = document.listForm.chanMenuNum.value;

fn_mouseOver(chanMenuNum);

}

/* 글 목록 화면 function */

function fn_egov_selectList() {

document.listForm.pageIndex.value = '1';

document.listForm.action = "${pageContext.request.contextPath}/www/chan/chanMain.do";

document.listForm.submit();

}

/* 채널분류 네모이미지 클릭 */

function fn_menu_link_page(id) {

$("#chanMenuNum").val(id);

$("#videoChanCd").val(id);

document.listForm.pageIndex.value = '1';

document.listForm.action = "${pageContext.request.contextPath}/www/chan/chanMain.do";

document.listForm.submit();

}

/* 상세 화면 function */

function fn_egov_link_select(videoId) {

$("#videoId").val(videoId).toString();

document.listForm.action = "${pageContext.request.contextPath}/www/mainPlayDetail.do";

document.listForm.submit();

}

/* pagination 페이지 링크 */

function fn_egov_link_page(pageNo) {

document.listForm.pageIndex.value = pageNo;

document.listForm.action = "${pageContext.request.contextPath}/www/chan/chanMain.do";

document.listForm.submit();

}

</script>

<!-- content 시작 -->

<div class="sub_contents">

<form name="listForm" method="post" onsubmit="return false">

<input type="hidden" name="videoId" id="videoId" value="" />

<input type="hidden" name="chanMenuNum" id="chanMenuNum" value="${param.chanMenuNum}" />

<input type="hidden" name="videoChanCd" id="videoChanCd" value="" />

<!-- // 타이틀 -->

<div class="searchArea">

<ul>

<li class="search_title">SEARCH</li>

<li class="search_cntResult">

<input type="text" name="searchKeyword" class="txt" title="searchKeyword" value="${param.searchKeyword}" onkeydown="if(event.keyCode == 13) fn_egov_selectList();" />

</li>

<li class="search_btn" style="height: 33px;">

<span>

<a href="#" onClick="fn_egov_selectList();">

<img src="${pageContext.request.contextPath}/images/layout/search_img.png" alt="search_img">

</a>

</span>

</li>

</ul>

</div>

<div class="tab_imgArea">

<ul class="snav_list">

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_01');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img1_out.png" alt="행정" id="CHAN_01" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_02');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img2_out.png" alt="외교" id="CHAN_02" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_03');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img3_out.png" alt="통일ㆍ국방" id="CHAN_03" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_04');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img4_out.png" alt="경제일반ㆍ재정" id="CHAN_04" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_05');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img5_out.png" alt="산업ㆍ교통" id="CHAN_05" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_06');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img6_out.png" alt="공공질서ㆍ사회복지" id="CHAN_06" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_07');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img7_out.png" alt="과학기술" id="CHAN_07" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_08');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img8_out.png" alt="교육ㆍ문화ㆍ관광" id="CHAN_08" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

<li>

<a href="#" onClick="fn_menu_link_page('CHAN_09');">

<img src="${pageContext.request.contextPath}/images/layout/channel/tab_img9_out.png" alt="지식ㆍ정보" id="CHAN_09" onmouseover="fn_mouseOver(this.id);" onmouseout="fn_mouseOut(this.id);">

</a>

</li>

</ul>

</div>

<!-- 플레이목록 시작 -->

<div class="mplay_list_Area">

<div class="play_movielist1">

<div id="detail_list_title" style="font-size: 19pt; color: #; font-weight: 600; text-transform: uppercase; padding: 34px 0 20px 0;">${videoChanCd.codeNm}동영상</div>

<c:set var="i" value="0" />

<c:set var="j" value="2" />

<div class="lsit_img1">

<c:forEach var="result" items="${videoList}" varStatus="status">

<c:if test="${i%j == 0 }">

<ul>

</c:if>

<li>

<div class="lsit_img1">

<img src="${pageContext.request.contextPath}/uploadfile/thumbnail/${result.videoImageId}" style="width: 100%; height: 100%; z-index: 99">

<div class="list_btn" style="position: absolute; z-index: 100; margin-top: -113px; margin-left: 88px;">

<a href="#" onClick="fn_egov_link_select('${result.videoId}');">

<img src="${pageContext.request.contextPath}/images/layout/play_btn_small.png" alt="btn_play">

</a>

</div>

<div class="list_time" style="z-index: 100; margin-top: -35px">${result.videoPlayTime}</div>

</div>

<div class="list_txt">

<a href="javascript:fn_egov_link_select('${result.videoId}');" title="${result.videoTitle}"> ${result.videoTitle} </a>

</div>

</li>

<c:if test="${i%j == j-1 }">

</ul>

</c:if>

<c:set var="i" value="${i+1 }" />

</c:forEach>

</div>

</div>

<div class="brd_bottom">

<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_egov_link_page" />

<input type="hidden" id="pageIndex" name="pageIndex" value="${param.pageIndex == null ? '1' : param.pageIndex}" />

</div>

<div class="play_movielist1">

<div id="detail_list_title" style="font-size: 19pt; color: #; font-weight: 600; text-transform: uppercase; padding: 34px 0 20px 0;">${videoChanCd.codeNm}인기동영상</div>

<c:set var="i" value="0" />

<c:set var="j" value="2" />

<div class="lsit_img1">

<c:forEach var="result" items="${videoRankList}" varStatus="status">

<c:if test="${i%j == 0 }">

<ul>

</c:if>

<li>

<div class="lsit_img1">

<img src="${pageContext.request.contextPath}/uploadfile/thumbnail/${result.videoImageId}" style="width: 100%; height: 100%; z-index: 99">

<div class="list_btn" style="position: absolute; z-index: 100; margin-top: -113px; margin-left: 88px;">

<a href="#" onClick="fn_egov_link_select('${result.videoId}');">

<img src="${pageContext.request.contextPath}/images/layout/play_btn_small.png" alt="btn_play">

</a>

</div>

<div class="list_time" style="z-index: 100; margin-top: -35px">${result.videoPlayTime}</div>

</div>

<div class="list_txt">

<a href="javascript:fn_egov_link_select('${result.videoId}');" title="${result.videoTitle}"> ${result.videoTitle} </a>

</div>

</li>

<c:if test="${i%j == j-1 }">

</ul>

</c:if>

<c:set var="i" value="${i+1 }" />

</c:forEach>

</div>

</div>

</div>

<!-- 플레이목록 End -->

</form>

</div>