드림위버 이야기
2차 롤오버 수정 중
Design Kim See
2022. 3. 24. 12:02
반응형
Image Preview with jQuery.html
0.00MB
<body>
<p>
<img onmouseover="<img src='http://gi.esmplus.com/monarchy02/modu/modu.jpg' />'"
style="CURSOR: hand"
onclick="window.open('https://thumb1.photo.mybox.naver.com/3472473792592780356?type=m1280_1280_2&nocache=1335112403','_blank','width=840,height=700,scrollbars=yes');"
onmouseout="this.src='https://thumb1.photo.mybox.naver.com/3472473792592780356?type=m1280_1280_2&nocache=1335112403' width="400" height="300""
src="http://gi.esmplus.com/monarchy02/modu/modu.jpg" border="0" />
</p>
</body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-menu", this).hide();
$("#menu li").hover(function(){
$(".dropdown-menu", this).slideDown(100);
}, function(){
$(".dropdown-menu", this).stop().slideUp(100);
});
})
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Main menu</a>
<ul class="dropdown-menu">
<li><a href="#">Sub menu</a></li>
<li><a href="#">Sub menu2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
마우스롤오버
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
h1 {
text-align: center;
}
img {
max-width: 100%;
}
.jb-a {
width: 400px;
margin: 0px auto;
position: relative
}
.jb-c {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.jb-a:hover .jb-c {
display: block;
}
</style>
</head>
<body>
<h1>Hover Effect</h1>
<div class="jb-a">
<img src="http://gi.esmplus.com/monarchy02/modu/modu.jpg" alt="" class="jb-b">
<img src="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_69/1648112662915tX4Ty_JPEG/49248490743386404_1600384232.jpg"width="860", "height="auto"" alt="" class="jb-c">
</div>
</body>
</html>
사진 바꾸는거
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="1.jpg" class="preview" title="Lake and a mountain"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview" title="Fly fishing"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview" title="Autumn"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview" title="Skiing on a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_69/1648112662915tX4Ty_JPEG/49248490743386404_1600384232.jpg"width="860px" height="auto" class="preview"><img src="http://gi.esmplus.com/monarchy02/modu/modu.jpg
" width="200px" height="auto"alt="gallery thumbnail" /></a></li>
</ul>
<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_69/1648112662915tX4Ty_JPEG/49248490743386404_1600384232.jpg" "width="860px" height="auto"class="preview" title="Lake and a mountain"><img src="http://gi.esmplus.com/monarchy02/modu/modu.jpg
"width="200px" height="auto" alt="gallery thumbnail" /></a></li>
</ul>
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="Image%20Preview%20with%20jQuery_files/jquery.js" type="text/javascript"></script>
<script src="Image%20Preview%20with%20jQuery_files/main.js" type="text/javascript"></script>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_69/1648112662915tX4Ty_JPEG/49248490743386404_1600384232.jpg" class="preview"><img src="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_58/1648128486635xeT8E_PNG/49264329292276932_190370943.png
g" alt="gallery thumbnail"></a></li>
</ul>
<script src="Image%20Preview%20with%20jQuery_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>
</body></html>최종
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="Image%20Preview%20with%20jQuery_files/jquery.js" type="text/javascript"></script>
<script src="Image%20Preview%20with%20jQuery_files/main.js" type="text/javascript"></script>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_69/1648112662915tX4Ty_JPEG/49248490743386404_1600384232.jpg" class="preview" title="Lake and a mountain"><img src="https://sell.smartstore.naver.com/shop1.phinf.naver.net/20220324_132/1648128690890eF3TL_JPEG/49264533603730799_1768761427.jpg" alt="gallery thumbnail"></a></li>
</ul>
<script type="text/javascript" src="Image%20Preview%20with%20jQuery_files/blogsponsor.js"></script><script type="text/javascript" src="Image%20Preview%20with%20jQuery_files/adpacks.js" id="_adpacks_js"></script><style>.bsap{float:left;position:fixed;z-index:1000;top:20px;right:20px;width:300px;overflow:hidden;}.bsa_it_ad{overflow:hidden;}</style>
<script src="Image%20Preview%20with%20jQuery_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>
</body></html>728x90
반응형