[스크립트] showid simple script 롤오버 이미지

출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=55700&sca=&sfl=wr_name||subject&stx=��ȿ��&sop=and&page=2


void show_over(A Tag, [style display type (default inline)], [tagName (default IMG)]);
void hidden_name(A Tag name, [style display type (default inline)], [tagName (default IMG)]);
void show_out(A Tag, [style display type (default inline)], [tagName (default IMG)]);
void show_toggle(A Tag, [style display type (default inline)], [tagName (default IMG)]);
void show_layer(Tag ID numbers, [style display type (default inline)]);
void show_class(Tag ID numbers, Original Class Name, Target Class Name);

ex1) 마우스오버시 두번째 이미지로 변환.

<a href="#" onmouseover="show_over(this);" onmouseout="show_out(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_on.gif" style="display:none;" /></a>


ex2) 여러버튼에서 한가지는 항상 하일라이트. (주의 : name 과 첫번째 버튼 하일라이트)

<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_off.gif" style="display:none;" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_on.gif" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_on.gif" style="display:none;" /></a>
<a name="buttons" href="#" onmouseover="show_over(this);"><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_on.gif" style="display:none;" /></a>


ex3) 반전 클릭

<a href="#" onclick="show_toggle(this); return false;"><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_on.gif" style="display:none;" /></a>


ex4) ex2 의 레이어 연동 (번호는 1부터 순서에 빠짐 없이)

<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_1');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_off.gif" style="display:none;" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_on.gif" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_2');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_on.gif" style="display:none;" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_3');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_on.gif" style="display:none;" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_4');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_on.gif" style="display:none;" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_5');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_on.gif" style="display:none;" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_6');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_on.gif" style="display:none;" /></a>
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_on.gif" style="display:none;" /></a><!-- 레이어 없는 경우 -->
<a name="buttons2" href="#" onmouseover="show_over(this); show_layer('layers_');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_on.gif" style="display:none;" /></a><!-- 레이어 없는 경우 -->
<div id="layers_1">layer 1</div>
<div id="layers_2" style="display:none;">layer 2</div>
<div id="layers_3" style="display:none;">layer 3</div>
<div id="layers_4" style="display:none;">layer 4</div>
<div id="layers_5" style="display:none;">layer 5</div>
<div id="layers_6" style="display:none;">layer 6</div>


etc) show_layer 대신 class 지정

<style>
.buttonclass {
background-color:white;
}
.buttonclassOn {
background-color:#eeeeee;
font-weight:bold;
}
</style>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_1', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_off.gif" style="display:none;" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu1_on.gif" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_2', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu2_on.gif" style="display:none;" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_3', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu3_on.gif" style="display:none;" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_4', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu4_on.gif" style="display:none;" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_5', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu5_on.gif" style="display:none;" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_6', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu6_on.gif" style="display:none;" /></a>
<a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu7_on.gif" style="display:none;" /></a>
<!-- 레이어 없는 경우 --><a name="buttons3" href="#" onmouseover="show_over(this); show_class('class_', 'buttonclass', 'buttonclassOn');"><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_off.gif" /><img border="0" src="http://www.phpschool.com/menu_images/top_menu8_on.gif" style="display:none;" /></a>
<!-- 레이어 없는 경우 --><br />
<div id="class_1" class="buttonclassOn">class 1</div>
<div id="class_2" class="buttonclass">class 2</div>
<div id="class_3" class="buttonclass">class 3</div>
<div id="class_4" class="buttonclass">class 4</div>
<div id="class_5" class="buttonclass">class 5</div>
<div id="class_6" class="buttonclass">class 6</div>




심심해서요. 라이센스 분류가 없어서 Copyright 로 했는데 BSD 입니다.

위 예제 적용 예) http://xenosi.de/srcs/showid.html