HTML 스크립터 없이 간단한 새창 띄우기

HTML코드 에서 일반적인 새창띄우는 방법은 보통


<a href="http ://ooppa.tistory.com" target="_blank"> 새창열기 </a> 입니다.


그리고 스크립터를 이용하는 방법은 

<script language="JavaScript">
function openNewWindow(window) { 
open (window,"Mail","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=550, height=500"); 
}
</script>

상단 <head> ~ </head> 사이에 넣고

<a href="javascript:openNewWindow('http://ooppa.tistory.com')"> 새창열기</a>를 하면 창의 크기를 결정하여 새창으로 열수가 있습니다.


하지만, 

스크립터 없이 창의 크기도 지정하면서 새창으로 열고 싶다면 이렇게 적용하면 됩니다.

<a href="#" onclick="window.open('http://ooppa.tistory.com', '_blank', 'width=550 height=500')"> 크기지정 하고 새창열기 </a>

이러면 스크립터 없이 링크마다 다른 크기로 새창열기가 가능하겠죠. 

하나 더,

<a href="http://ooppa.tistory.com"  onclick="window.open(this.href); return false"> 크기지정 없이 새창열기 </a>

한가지 팁,

그럼 원하는 위치로 이동하는 방법은 이라고 궁금해 하시는 분도 있습니다.
그런 이렇게 하세요.

<a href="#1"> 원하는 위치로 이동</a> 하려는 링크를 만들고,
"<a name="1"> 여기가 원하는 위치" 에 요렇게 넣어주시면 됩니다.



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 7

*

*

    • 비밀댓글입니다

    • 사이트를 직접운영 하시는 건지 궁금하고 직접운영하지 않고 제품을 올리기만 하신다면 이건 사이트 담당에게 물어보셔야 하고 일반 판매사이트의 경우, 이미지 위에 마우스를 올리면 확대표시가 되도록 하고 실제 1번 클릭 팝업된 뒤, 이미지 위에 마우스를 올리면 확대표시가 생성이 되네요

      결국, 이미지가 너무 크네요.

      원래 크기
      820 x 5789
      파일 크기
      790.09 KB (809055 bytes)
      MIME type
      image/jpeg
      EXIF info
      Orientation 1
      XResolution 72
      YResolution 72
      ResolutionUnit 2
      Software Adobe Photoshop CS5 Windows
      DateTime 2017:08:29 15:15:58
      ExifIFDPointer 164
      ColorSpace 1
      PixelXDimension 820
      PixelYDimension 5789

    • transform:scale 을 이용하면 되기는 하는데, 이게 원하는 방법인지는 모르겠습니다

      transform:scale(1.1); /* default */
      -webkit-transform:scale(1.1); /* 크롬 */
      -moz-transform:scale(1.1); /* FireFox */
      -o-transform:scale(1.1); /* Opera */

      이미지를 1.1배 확대 한다.


      <style>
      .shadow{
      width:100px;
      height:100px;
      margin:10px auto;
      overflow:hidden;
      border:1px solid black;
      }

      .shadow img{
      width:100px;
      height:100px;
      }

      .shadow img:hover{
      cursor:pointer;
      -webkit-transform:scale(1.1); /* 크롬 */
      -moz-transform:scale(1.1); /* FireFox */
      -o-transform:scale(1.1); /* Opera */
      transform:scale(1.1);
      transition: transform .35s;
      -o-transition: transform .35s;
      -moz-transition: transform .35s;
      -webkit-transition: transform .35s;
      }
      </style>
      <div class="shadow">
      <img src="//***.png" width="250" height="250">
      </div>

이전 글

다음 글