레벨 아이콘 사이즈 조정
본문
질문을 남겼었는데 궁금한부분이 있어서
원하는건 댓글, 게시판 리스트, 게시글 뷰에 넣은 레벨 아이콘 사이즈를 각각 사이즈 조절과 위치를 조금 움직이는 것입니다.
이미지에 클래스 지정해서 하면 된다는 답변을 받았는데
레벨 아이콘이 포인트 얻을때마다 레벨이 올라가면서 바뀌는 아이콘입니다.
만약에 한가지 이미지 아이콘이면 그냥 경로 지정해서 예를들어 abc.gif 지정해서 하면 되는데
조건부로 변하는 아이콘이라서 어떻게 지정해야할지 모르겠습니다.
현재 lib 폴더에 level_icon_lib.php를 받아 수정하여 넣어 놓은 상태인데
<?php
if (!defined('_GNUBOARD_')) exit;
// 포인트별 아이콘 부여
function get_level_icon($mb_id) {
global $g5;
$max_level = 50; // 마지막레벨
$mb = get_member($mb_id, "mb_id, mb_point, mb_level");
$ic_mb_id = $mb['mb_id'];
$is_admin = is_admin($ic_mb_id);
if ($ic_mb_id) {
if ($is_admin == 'super') {
$mb_icon = "<img src='".G5_IMG_URL."/level/g.gif' align='absmiddle' title='관리자' width='20px' height='20px'>";
}
else if($mb['mb_level'] == 10){
$mb_icon = "<img src='".G5_IMG_URL."/level/sp.gif' align='absmiddle' title='관리자2'
width='20px' height='20px'>";
}
else if ($ic_mb_id == 'test' || $ic_mb_id == 'test2') { // 특정회원들
$mb_icon = "<img src='".G5_IMG_URL."/level/sp.gif' align='absmiddle' title='특별회원
width='20px' height='20px'>";
} else {
$mb_point = $mb['mb_point'];
// 포인트가 가장 높은 조건부터 체크
if ($mb_point >= 118000)
$mb_level = 50;
중략
else
$mb_level = 1;
$level = ($mb_level > $max_level) ? $max_level : $mb_level;
$mb_icon = "<img src='".G5_IMG_URL."/level/".$level.".gif' align='absmiddle' title='포인트레벨
width='20px' height='20px'" .$level."".number_format($mb_point)."점'>";
}
}
else {
// 비회원
$mb_icon = "<img src='".G5_IMG_URL."/level/0.gif' align='absmiddle' title='손님'>";
}
return $mb_icon;
//echo $mb_icon;
}
이렇게 넣었거든요
여기서 사이즈를 수정하여 넣으면 바뀌긴 하는데 모든 아이콘 사이즈가 공통으로 수정되어서.....
level_icon_lib.php 여기에 코드를 넣어서 수정해야하는것인지 생각해봤는데 그건 아닌거 같기도하구요
혹시 어떻게 해야할까요
답변 2
다음은 css 로 같은 크기의 이미지에 임의의 class 를 지정하고 표현하는 예제 입니다.
1.png ~ 6.png
style.css
/* -------------------------------- common */
.level_icon { vertical-align: middle; }
/* -------------------------------- test_1 */
.test_1 .level_icon { width: 20px; height: 20px; }
/* -------------------------------- test_2 */
.test_2 .level_icon[src="1.png"] { width: 60px; height: 60px; }
.test_2 .level_icon[src="2.png"] { width: 50px; height: 50px; }
.test_2 .level_icon[src="3.png"] { width: 40px; height: 40px; }
.test_2 .level_icon[src="4.png"] { width: 30px; height: 30px; }
.test_2 .level_icon[src="5.png"] { width: 20px; height: 20px; }
.test_2 .level_icon[src="6.png"] { width: 10px; height: 10px; }
/* -------------------------------- test_3 */
.test_3 .level_icon[src="1.png"] { margin-left: 10px; margin-top: 10px; }
.test_3 .level_icon[src="2.png"] { margin-left: 20px; margin-top: 20px; }
.test_3 .level_icon[src="3.png"] { margin-left: 30px; margin-top: 30px; }
.test_3 .level_icon[src="4.png"] { margin-left: 40px; margin-top: 40px; }
.test_3 .level_icon[src="5.png"] { margin-left: 50px; margin-top: 50px; }
.test_3 .level_icon[src="6.png"] { margin-left: 60px; margin-top: 60px; }
test.html
<link type="text/css" href="style.css" rel="stylesheet">
<fieldset>
<legend>test_1</legend>
<div class="test_1">
<img class="level_icon" src="1.png">
<img class="level_icon" src="2.png">
<img class="level_icon" src="3.png">
<img class="level_icon" src="4.png">
<img class="level_icon" src="5.png">
<img class="level_icon" src="6.png">
</div>
</fieldset>
<fieldset>
<legend>test_2</legend>
<div class="test_2">
<img class="level_icon" src="1.png">
<img class="level_icon" src="2.png">
<img class="level_icon" src="3.png">
<img class="level_icon" src="4.png">
<img class="level_icon" src="5.png">
<img class="level_icon" src="6.png">
</div>
</fieldset>
<fieldset>
<legend>test_3</legend>
<div class="test_3">
<img class="level_icon" src="1.png">
<img class="level_icon" src="2.png">
<img class="level_icon" src="3.png">
<img class="level_icon" src="4.png">
<img class="level_icon" src="5.png">
<img class="level_icon" src="6.png">
</div>
</fieldset>
result
친절한 답변 너무 감사드립니다. 많은 도움이 되었습니다^^
해보다가 잘 안되가지고 포기하려던 찰라 이것저것 해보고 아웃로그인 이미지가 다른거보고
띵하고 확인하고 넣어봤습니다. 제가 활용을 못하던 거더라구요 감사드립니다 ㅎㅎ
레별별. 이미지마다 class를 추가하고 css설정을 해주면 되겠네요
lib화일 내에서 하면됩니다
답변 감사드립니다. 설명듣고 무슨 말인지는 알겠는데 막상 쓰려니까 잘안되더라구요 ㅎㅎ
다시 한번 도움 받고 갑니다!!
답변을 작성하시기 전에 로그인 해주세요.
