jquery 이미지에 커서올리면 테두리 생성시키기 > script

테두리 생성하는 스타일 만듬

<style>
.rect_img_border
{
 position:absolute;
 border:4px solid #000;
 filter:alpha(opacity=80);
 opacity:0.8;
 -moz-opacity:0.8;
 -khtml-opacity:0.8;
}
</style>

커서 올리면 작동할 스크립트

<script>
function rect_img_border(lid) {
 $(".rect_img" + lid).append(function (i, html) {
 $(this).html('<li class="rect_img_border" id="imgborder"' + lid + '"></li>' + html);
 $('li', $(this)).css({ width: "256px", height: "277px" });
 });

 $("#imgurl" + lid).val($("#imgborder" + lid).html().toLowerCase());

 var imgUrl = $("#imgurl" + lid).val();
 var aImgUrl = $("#imgurl" + lid).val().split("<img");

 if (aImgUrl.length > 1) {
  $("#imgurl" + lid).val("<img " + aImgUrl[1]);
 }

 $("#chk").val("1");
}
</script>

이미지
<li id="imgborder1" class="rect_img1"><img src="/img/port/p_ex1.jpg" style="cursor:pointer;"/></li>

희든값
<input type="text" id="chk" value="0" style="display:none;"/>
<input type="text" id="imgurl1" value="" style="display:none; width:400px;"/>

이벤트

<script>
$(function () {
$(document).on("mouseenter", "#imgborder1", function () { if ($("#chk").val() == "0") { rect_img_border("1"); } });
$(document).on("mouseleave", "#imgborder1", function () { $(this).html($("#imgurl1").val()); $("#chk").val("0"); });

});
</script>