자바 교수님!!
본문
학생입니다. 실력은 개초딩이에요,,
아래 이미지 툴팁을 사용하는데...
<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아이콘 누르면 이미지가 뜨는 겁니다.
답변 1
스크립트에 sell.jpg 이미지를 고정해놓으면 툴팁으로 항상 sell.jpg만 뜨겠지요.
<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가 뜸 -->