jquery img src selector


안녕하세요.
고코더 입니다.


개발을 하던 중에 이미지의 src 속성 
이미지의 주소를 선택하여 수정할 일이 생겼는데
쓸모가 많은 방식인거 같아 
블로그를 남겨드립니다.

제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다.
제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다.

https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg


▼ 이미지 src를 선택하는 3가지 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
1. 이미지 주소 전체를 넣어 검색
    - 하나의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']")
2. 이미지 주소 앞 에서부터 매칭.
    - 같은 폴더 기준이나 같은 URL의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net']")
 
 
3. 이미지 주소 뒤 에서부터 매칭.
    - 이미지 파일명을 사용하여 선택할때 유용 합니다.
    ex) $("img[src$='epantheo.jpg']")
cs

▼ 제가 작성한 예제 파일도 한번 확인해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    function src_selector1(){
      $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']").css("width","200");
    }
    function src_selector2(){
      $("img[src^='https://tistory1.daumcdn.net']").css("width","300");
    }
    function src_selector3(){
      $("img[src$='epantheo.jpg']").css("width","400");
    }
    </script>
</head>
<body>
    <img src="https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg" width="100">
    <br>
    <input type="button" onclick="src_selector1();" value="src 전체 이름으로 선택">
    :: https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg
    <br>
    <input type="button" onclick="src_selector2();" value="src 앞에서부터 검색으로 선택">
    :: https://tistory1.daumcdn.net
    <br>
    <input type="button" onclick="src_selector3();" value="src 뒤에서부터 검색으로 선택">
    :: epantheo.jpg
    <br>
</body>
</html>
cs

▼ 웹상에서 확인한 화면 입니다. 


특정 이미지만 선택하여
작업이 필요할때 src로 선택하면 다른 CSS의 속성과 얽히지 않게 코딩이 가능합니다.



마무리


블로그 스킨 수정할때 딱 좋더라고요


댓글을 달아 주세요



웹상에서 해외 접속 상태 확인하는 방법


해당 사이트에 접속 해보자

▼ 해당 인풋에 확인 하고 싶은 사이트 주소를 넣고 START


아래처럼 전세계에서 해당 사이트 접속이 가능한지
모니터링 결과값이 나옵니다.



중간 중간 Not available 는
접속 여부를 파악 못한것입니다.


해외에서도 사이트 잘 접속 되냐고 물어온다면 간단하게 
해당 사이트를 통해 알아보세요





댓글을 달아 주세요



프레임(frame)으로 홈페이지 구동하기


이유가 어찌 됐든 frame 안에
사이트를 구동하여 서비스 하게될 계기가 있습니다.
URL 갖다 쓰는 구조라던가 템플릿 구조라든지

아래 HTML에 SRC 속성에 사이트 주소를 주면
깜쪽 그 페이지에 있던 사이트 마냥 홈페이지가 구동 될 것입니다.

▼ 아래 소스를 실행해보자
1
2
3
4
5
6
7
8
9
10
11
12
<HTML>
<HEAD>
    <TITLE></TITLE>
</HEAD>
<frameset rows="0,*" border=0 framespacing=0 frameborder=0>
    <frame name="space" scrolling="no" noresize src="space.htm" >
    <frame name="main" src="http://gocoder.tistory.com">
</frameset>
<BODY topmargin=0 leftmargin=0>
</BODY>
 
</HTML>
cs



▼결과 화면

HTML 페이지에 지금 보는 제 블로그

포스트가 빈틈없이 노출되고 있는게 보입니다.


댓글을 달아 주세요