이미지 url주소값만 변경하기
[code]
$search = '<img border="0" src="http://aaa.com/0.jpg" width="100" height="100">
<br><img border="0" src="http://aaa.com/1.jpg" width="100" height="100">
<br><img border="0" src="http://aaa.com/2.jpg" width="100" height="100">';
$replace = '<img border="0" src="위에서 추출한 이미주소 첫번째" width="100" height="100">
<br>안녕하세요~
<br><br>날씨가 많이 춥네요
<br><img border="0" src="위에서 추출한 이미주소 두번째" width="100" height="100">
<br>감기조심하세요
<br><img border="0" src="위에서 추출한 이미주소 세번째" width="100" height="100">';
class UrlChange {
var $matches, $i = 0, $regex = '/(?<=src=")[^"]+/', $val = '';
function __construct($search, $replace) {
preg_match_all($this->regex, $search, $matches);
$this->matches = $matches[0];
$this->val = preg_replace_callback($this->regex, array($this, 'call'), $replace);
}
function call($m) { return $this->matches[$this->i++]; }
}
$a = new UrlChange($search, $replace);
echo $a->val;
[/code]
댓글 9개
new UrlChange($search, $replace);
요게 출력되는 코드 같은데 요거로 배열? 값 이거로 담으려면 어떻게 해야하는지요?
즉)
$aaa = "출력값";
이런식으로요
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?
$list = array(
array('1','img/000.jpg', 'img/000on.jpg', '100', '100'),
array('2','img/001.jpg', 'img/001on.jpg', '100', '100'),
array('3','img/002.jpg', 'img/002on.jpg', '100', '100')
);
?>
<?php foreach($list as $v){ ?>
<img border="0" id="img_0<?=$v[0]?>" src="<?=$v[1]?>" width="<?=$v[3]?>" height="<?=$v[4]?>" data-img="<?=$v[2]?>">
<? } ?>
<script>
$(document).ready(function(){
$("img").click(function(){
var o = $(this).attr('id');
var c = $("#"+o).attr('src');
$("#"+o).attr('src', $(this).data("img"));
$("#"+o).data("img",c);
})
});
</script>
[/code]
저두 코딩 드럽게 못하는데 대충 만들어봤습니다^^
클릭시 data-img 변경으로 전 이미지로 돌아가도록 구성했습니다.
<?php
$list = array(
array('img/000.jpg', '100', '100'),
array('img/001.jpg', '100', '100'),
array('img/002.jpg', '100', '100')
);
foreach($list as $v)
printf('<img src="%s" width="%s" height="%s" >', $v[0], $v[1], $v[2]);
?>
<script>
var img = document.getElementsByTagName('img');
for (var i=0; i<img.length; i++) {
(function(k){
img[k].onclick = function() {
this.src = this.src.indexOf('_on') + 1 ? this.src.replace('_on', '') : this.src.replace('.', '_on.');
}
})(i);
}
</script>
[/code]
<?php
$list = array(
array('img/000.jpg', '100', '100'),
array('img/001.jpg', '100', '100'),
array('img/002.jpg', '100', '100')
);
foreach($list as $v)
printf('<img src="%s" width="%s" height="%s" >', $v[0], $v[1], $v[2]);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( 'img' ).on( 'click', function() {
this.src = this.src.indexOf('_on') + 1 ? this.src.replace('_on', '') : this.src.replace('.', '_on.');
});
</script>
[/code]
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5396 | 기타 |
슈퍼스타맨
|
4개월 전 | 352 | |
| 5395 | PHP |
untitled
|
5개월 전 | 822 | |
| 5394 | MySQL |
선택과집중
|
6개월 전 | 595 | |
| 5393 | 웹서버 |
techstar
|
8개월 전 | 862 | |
| 5392 |
|
1년 전 | 1218 | ||
| 5391 | 10개월 전 | 1118 | |||
| 5390 | 10개월 전 | 905 | |||
| 5389 | 9개월 전 | 874 | |||
| 5388 | 9개월 전 | 974 | |||
| 5387 | 8개월 전 | 807 | |||
| 5386 | JavaScript |
nekoieye
|
8개월 전 | 971 | |
| 5385 | 웹서버 | 8개월 전 | 989 | ||
| 5384 | JavaScript |
|
9개월 전 | 819 | |
| 5383 | 기타 | 10개월 전 | 1127 | ||
| 5382 | 기타 |
|
10개월 전 | 578 | |
| 5381 | JavaScript | 10개월 전 | 906 | ||
| 5380 | 기타 |
|
10개월 전 | 691 | |
| 5379 | JavaScript | 10개월 전 | 690 | ||
| 5378 | 10개월 전 | 1198 | |||
| 5377 | 기타 |
|
11개월 전 | 760 | |
| 5376 | jQuery |
|
11개월 전 | 575 | |
| 5375 | jQuery |
techstar
|
11개월 전 | 728 | |
| 5374 | 기타 |
|
11개월 전 | 780 | |
| 5373 | MySQL |
|
11개월 전 | 811 | |
| 5372 | 기타 |
|
11개월 전 | 1013 | |
| 5371 | JavaScript |
|
11개월 전 | 727 | |
| 5370 | JavaScript |
|
11개월 전 | 731 | |
| 5369 | PHP |
|
11개월 전 | 1243 | |
| 5368 | PHP | 1년 전 | 1408 | ||
| 5367 | 기타 |
nekoieye
|
1년 전 | 1283 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기