처음 올려주신 SHERLOCK 님의 게시물
http://todayhumor.com/?pony_49872
셜록님이 올려주신 추천 반대 태그 이미지 변경이 CSS 스타일의 content:url 을 쓰더군요
뭐 전문적인 용어는 그만쓰고 본론만 말하자면
이건 크롬과 사파리 브라우저를 제외하면 작동하지 않는 코드입니다
(이미지 태그에 이미지 덮어쓰기로 사용 시)
그래서 저와같이 파이어폭스를 쓰는 사람들이나 IE를 쓰시는 분들은 바뀐 아이콘을 볼 수가 없죠
그래서 약간 변형을 해봤습니다
기본적으로 편법에 가까운 방식이지만 content:url 을 사용하지 않아
모든 브라우저에서 작동하며 대부분의 게시판들 처럼 자바스크립트를 쓸 수 없는 게시판에서 써먹기엔 딱 좋은 방법입니다
뭐 요약하면 브라우저 안가리고 잘 돌아간다구요
아무튼 아래 코드를 잘라서 꼬릿말 같은데 붙여주시면 작동합니다
<style>#okNokBookDiv img{width:0px;height:0px;padding-left:114px;padding-top:136px;}#okNokBookDiv>img{background:url("http://thimg.todayhumor.co.kr/upfile/201308/1375965853nX5l9YqOU3X1NvHC52EjVPJVKrBP.png") no-repeat;}#okNokBookDiv>img+img{background: url("http://thimg.todayhumor.co.kr/upfile/201308/1375965853uBRHUNjAuG.png") no-repeat;}#okNokBookDiv a > img{background: url("http://thimg.todayhumor.co.kr/upfile/201308/1375965853Ey75pLYuO1t.png") no-repeat;}</style>
※ 코드 고치실분들 수정하실때 주의할점 IE8 이하에서 돌리기 위해 selector를 제한적으로 사용했습니다(child 계열 셀렉터 미사용)
붙이실때 줄맞춤 하신다고 코드 중간에 엔터 같은거 치시면 작동 안합니다 그냥 붙여넣어 주세요
이 아래 코드 이미지 링크부분을 제외해놨습니다 추천,반대,뒷북 이라고 써있는 부분에 필요하신 이미지 URL을 쓰시면
자신만의 이미지로 바꾸실 수 있습니다
<style>#okNokBookDiv img{width:0px;height:0px;padding-left:114px;padding- top:136px;}#okNokBookDiv>img{background:url("추천") no-repeat;}#okNokBookDiv>img+img{background: url("반대") no-repeat;}#okNokBookDiv a > img{background: url("뒷북") no-repeat;}</style>
적용된 화면은 이글의 추천 반대 부분을 보시면 됩니다
안돌아가는 브라우저 있으시면 바로 수정해 드리겠습니다
단 제가 매킨토시는 없으니 사파리는 못고쳐요
ps. 모바일은 애초에 화면이 다른 곳이라 아직 안됩니다 나중에 시간나면 모바일쪽도 만들어 둘게요
ps2. 아까 코드 복사해가신분들 다시 복사해 주세요 IE7 8에서 작동 안하던 문제 수정함
