접기
function detailView(src) {
$("#detail_img ").attr("src" , src);"#product_popup" ).show();
$(function (){"#pop_close" ).click(function (){"#detail_imgt_pop" ).hide();
<div id="detail_imgt_pop" style="display:none;">
<span id="pop_close"><img src="/img/btn/btn_close.png" /></span>
<img src="/img/contents/basic_image.jpg" alt="" id="detail_img" />
</div>
<img src="/upload/MidImg/sample.jpg" border="0" onclick="detailView('/upload/BigImg/sample.jpg');">
접기 접기
<img style="WIDTH: 650px" onclick="window.open(this.src)" alt="클릭하시면 조금더 커집니다.." hspace="0" src="">
위의 태그를 사용하는 데요... width 쪽에 있는 숫자는 현제창에 표시될 이미지 사이즈(가로폭)고... alt 뒤에 "~~" 에 들어가있는 말은 마우스포인트가 이미지 위에 올라왔을때의 글자고.. src 뒤의 "~~" 에는 티스토리에서 라든지 링크 시킬 이미지의 주소를 적어주시면되요~_~
접기 접기
<html>
<head>
<style type="text/css">
td{border:2px solid;width:10px; height:10px;}
div{ width:200px; height:200px; position:absolute; visibility:hidden; }
.s1{left:400;top:50;}
</style>
<script language="javascript">
function a(n) {
divObj.style.visibility="visible";
document.getElementById("bigImg").src = n.src;
}
</script>
</head>
<body>
<script>
var img = ["first", "second", "third", "fourth", "fifth", "sixth","seventh","eighth","ninth"];
var count=0;
for (var i=0; i < 3; i++) {
document.write("<table><tr>");
for(var j=0; j<3;j++){
document.write("<td><img id=img src=" + img[count] + ".gif width='20px' height='20px' onclick='a(this)'>");
count++;
}
document.write("</tr></table>")
}
document.write("");
</script>
<div class="s1" id="divObj">
<img id="bigImg" width="500px" height="400px" src="first.gif">
</body>
</html>
접기