다시 질문 좀 드려봅니다.
본문
아래 이미지 툴팁을 사용하는데...
<script>
$( function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img src='<?php echo $board_skin_url?>/img/sell.jpg'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
} );
</script>
<div class="photo">
<img src="<?php echo $board_skin_url?>/img/icon_help.png" data-geo="">
</div>
이미지만 바꿔 동일페이지 다른 위치에 사용하렵니다.
어느 부분을 어떻게 고쳐야 할까요?
id=" " 이런 식이면 아이디만 바꿔 쓰면 될건데..그런거 같지도 않구요,,help아이콘 누르면 이미지가 뜨는 겁니다.
이에 대해 다음 답변을 받았는데요,,,
원래의 sell.gif 한개 이미지만 다른 곳에도 나와서요,,,
<script>
$( function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img src='" + text + "'>"; // 이렇게 고침
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
} );
</script>
<div class="photo">
<img src="<?php echo $board_skin_url?>/img/icon_help.png" data-geo="<?php echo $board_skin_url?>/img/sell.jpg"> <!-- 이렇게 고침, 이 헬프이미지에 마우스오버하면 sell.jpg가 뜸 -->
</div>
<!-- 다른 곳에도 적용하고 싶다면 아래처럼 추가함 -->
<img src="<?php echo $board_skin_url?>/img/icon_help.png" data-geo="<?php echo $board_skin_url?>/img/sell1000.jpg"> <!-- 이 헬프이미지에 마우스오버하면 sell1000.jpg가 뜸 -->
<img src="<?php echo $board_skin_url?>/img/icon_help.png" data-geo="<?php echo $board_skin_url?>/img/sell2000.jpg"> <!-- 이 헬프이미지에 마우스오버하면 sell2000.jpg가 뜸 -->
답변 1
<script>
$(function(){
$(document).tooltip({
items: '[title]',
content: function(){
return '<img src="' + $(this).attr('title') + '" />';
}
});
} );
</script>
<img src="헬프이미지" title="툴팁이미지1" />
<img src="헬프이미지" title="툴팁이미지2" />
... 중략 ...
<img src="헬프이미지" title="툴팁이미지99" />
<img src="헬프이미지" title="툴팁이미지100" />
진짜가 나타났다!!
몇시간 하다가 안되어 포기 했었는데..감사합니다~
