[마꾸] 18. 댓글 랜덤 이미지 설명

* 출처 *
됐거든?님의 게시물 - http://mypi.ruliweb.daum.net/mypi.htm?id=ky352729&num=17631

* 설명 *
랜덤 이미지라고 말하고 있지만 실제로 랜덤하게 이미지가 출력되는것은 아닙니다.
간단하게 설명하자면 해당 당사자의 마이피 주소 뒤에 보이는 회원 번호에 의해
출력 이미지가 결정되게 됩니다.
만약 ID의 가장 뒤에 숫자가 '1'이라면 [href$="1"]에 설정된 이미지가 출력되고,
'2'라면 [href$="2"]의 이미지가 출력되는 방식입니다.


* 방법 *
밑에 소스를 메모장에 복사하셔서 댓글 이미지 설정과 댓댓글 이미지 설정에 보이는
p-osition의 p와 o사이에 -를 지웁니다.
그리고 이미지 링크 주소를 전부 입력하시고, 소스를 스타일 시트에 복사하셔서 적용하시면 됩니다.


* 주의 *
소스를 사용하기 전에는 반드시 댓글 이미지 설정과 댓댓글 이미지 설정에 보이는
p-osition의 p와 o사이에 -를 지우고 사용하셔야 합니다.


* 추가 내용 *
이미지는 크기와는 상관 없이 가로, 세로 비율만 맞춰주시면 됩니다.

만약 특정 대상에게 따로 이미지를 등록고하고 싶으시다면,
[href$=" "]안에 있는 " "사이에 해당 대상자의 마이피 주소 뒤쪽에 보이는 번호를 입력하시면 됩니다.
( 예 : 제 루리웹 회원 번호 입력 [href$="16924"] )
그리고 반드시 랜덤 이미지 소스 보다 밑에 작성한 소스를 추가하셔야 합니다.

더 많은 랜덤 이미지를 등록하시고 싶으시다면 회원 번호의 끝자리 두자리를 입력하셔서 (00 ~ 99)

100개의 이미지를 등록해주시면 됩니다.

* 소스 *


/* 댓글 꾸미기 설정 */
#mypiRead .mypiReply{background-color:#fff;}
.readcomment, .mypiZmenu { padding-left: 70px; }

/* 댓글 이미지 설정 */
#mypiRead .mypiReply .mypiZmenu .cm01 a img {width: 0; height: 0; p-osition: absolute; padding: 40px 40px 0 0; top: 15px; left: 10px;}

/* 댓글 랜덤 이미지 링크 */
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="1"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="2"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="3"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="4"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="5"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="6"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="7"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="8"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="9"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="0"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}



/* 댓댓글 꾸미기 설정 */
.mypiComm{background: #f6f6f6;}
.mypiZmenu2, .readcomment2{ background-color:#f9f9f9; padding-left: 100px;}

/* 댓댓글 이미지 설정 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a img {width: 0; height: 0; p-osition: absolute; padding: 40px 40px 0 0; top:15px; left: 40px;}

/* 댓댓글 랜덤 이미지 링크 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="1"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="2"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="3"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="4"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="5"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="6"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="7"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="8"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="9"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="0"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}

[Fluffy♥]

참고할게요. 감사드립니다. :D

[스타오션3]

Fluffy♥님 감사합니다. 부족한점이 많아서 나중에 보완할 수 있으면 해보겠습니다.

[비타777]

깔끔하게 잘 요약하셧네요

[스타오션3]

비타777님 감사합니다.

[사냥꿈]

좋은거 배워갑니다!
잘 쓸게용

[스타오션3]

사냥꿈님 감사합니다.

[▶◀ ΟㅏОㅑ]

_da 붙는건 빼고 해도 크게 상관없다 싶어서 안했었는데
그랬더니 너무 중복되게 나오는 이미지들이 많아지는 문제가 발생하는군요.

주의 사항 보고 수정했더니 확실히 훨씬 다양하게 나오네요.

[스타오션3]

닉네임 뒷쪽에 '_da'가 붙은 분들이 생각보다 많으셔서 중복률이 높더라고요.
가능하면 '_da'붙은 소스도 추가해주시는게 좋을것 같아서 쪽지 드렸었습니다.

[Renoir.]

좋은 자료 감사합니다^ㅁ^ 많이 참고가 되었네요~ㅎㅎ

[스타오션3]

Renoir.님 감사합니다!