드림위버 이야기

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
반응형