0)
블로그를 사용하다보면, 여러개 이미지를 한줄에 표시해야할 때가 있는데요,
이미지를 올리다보면, 자리변경(?)도 다시 해봐야하고,
크기를 얼마로 맞춰야할지 잊어먹는 경우가 있어서요..
1)
그래서, 이미지 갯수가 2개 이상일 때
해당 줄(?) 내의 이미지 크기를 조정하도록
IE8 기준으로 만들어봤습니다.
가로 기준값은 700 으로 했습니다.
..
2)
<script>
function execThis130915_1(srcv) {
var
s1=srcv.innerText
, outv=document.getElementById('outv130915_1')
, ev1=/(^|<br\s*\/?>|<p(\s+[^>]+)*\s*>)(([^<]+|<(?!br[\s>/]|\/?p[\s>])[^>]+>)+)($|<br\s*\/?>|<\/p(\s*[^>]+)*>)/i
, ev2=/<img\s*style="[^w]+width:[^;]+;[^;]+;[^"]+"\s*src="[^"]+"\s*\/?>/i
, ev3=/(<img)(\s*style="[^w]+)(width:[^;]+;[^;]+;)([^"]+"\s*src="[^"]+"\s*\/?>)/gi
, rv1, rv2, cv, ov=''
;
while (rv1=ev1.exec(s1)) {
s2=rv1[3]; cv=0;
while (rv2=ev2.exec(s2)) {
cv++;
s2=s2.substring(rv2.lastIndex, s2.length);
}
if (cv>=2) {
ov+=s1.substring(0, rv1.lastIndex-rv1[0].length)+rv1[1]+rv1[3].replace(ev3, '$1 width={wv}$2$4'.replace(/{wv}/, parseInt(700/cv)) )+rv1[5]; }
else ov+=rv1[0];
s1=s1.substring(rv1.lastIndex, s1.length);
}
outv.innerText=ov;
}
</script>
<table><tr><td>
src<br/>
<textarea id=srcv onclick=execCommand('selectAll');execCommand('Paste');execThis130915_1(this); style="width:400px; height:400px;" ></textarea>
</td><td>
out<br/>
<textarea id=outv130915_1 onclick=execCommand('selectAll');execCommand('Copy'); style="width:400px; height:400px; background-color:#eeeeee;" ></textarea>
</td></tr></table>
-- 새 창에 띄우기.. --
..
3)
src |
out |
..
4)
regExp 와 HTML 소스 조정법으로
왼쪽을 클릭하면 복사해둔 HTML 소스 Text 를 붙여넣도록 해놨구요,
오른쪽을 클릭하면, 변환해둔 HTML 소스 Text 를 클립보드에 복사하도록 해놨습니다.
( onclick=execCommand(..);.. 부분..)
5)
.. 문제는, regExp 를 사용하면서 탐색식이 좀 복잡한(?) 까닭에,
중간에 멈추는 경우가 종종 있더라구요.
(<br 태그와 <p 태그로 구분하도록 설정해놨죠..)
제작 의도(?)에 가까이 하기위해서 개선해야할 바탕은 그 부분이 아니겠지만,
.. 이후 더 개선해봐야 한다는 생각은 나게된 결과였죠.
..
wantHate killofki@.
'image area' 카테고리의 다른 글
imageResize] 한줄에 있는 이미지 높이를 하나로 맞춰봅니다. (0) | 2013.12.09 |
---|---|
부분보기] 재능 결여자를 위한 그림 연습 5.. (0) | 2013.11.13 |
rotate] 이미지 회전시키기.. (0) | 2013.09.14 |
filter & position in IE8] filter 적용범위에 관한 내용입니다. (0) | 2012.12.06 |
줄기준 블럭식 배치]..를 Excel 과 붙여넣기용으로 넣어본 Sample.. for IE8 (0) | 2012.12.03 |