���[���I�[�o�[�ƌĂ����̂ł��B
�}�E�X�I�[�o�[�Ƃ��Ă�܂��B
�X�^�C���V�[�g[CSS]���g�����@(1)
JavaScript���g��Ȃ��AIMG�^�O�ƃX�^�C���V�[�g�����̃��[���I�[�o�[
�ȒP�ɐ�������ƁA�w�i�Ƀ��[���I�[�o�[��̉摜��u���Ă����A�}�E�X���d�Ȃ����Ƃ��ɂ�IMG�������Ă��܂��Ƃ�����@�ł��B
�w�i�Ƃ��ĉ摜���ǂݍ��܂�Ă���̂ŃL���b�V��������܂��B
Windows IE5�`
Mac IE5
Firefox
Netscape7
Safari
Opera7�`
�Ή�
(�`Opera6�̓��[���I�[�o�[���Ȃ�)
p {
/*A�^�O�ɍ����╝���w�肷�邱�Ƃ��o���Ȃ��̂Őe�̈�Ŏw�肷��*/
width:100px;
height:40px;
margin:0px;
padding:0px;
}
p a{
/*�C�����C���v�f�͕��⍂�����Ȃ��̂Ńu���b�N�v�f�ɂ���*/
display:block;
/*���[���I�[�o�[��̉摜��w�i�ɒu���Ă����ƁA�O�i���������Ƃ��ɕ\�������*/
background:url(img2.gif) no-repeat;
/*�����╝��IMG�^�O�ɂĎw�肪����Ă���̂ŕK�v�Ȃ�*/
/*�����ɍ����╝���w�肷��ƁA���[���I�[�o�[���Ȃ���IE5�Ń����N�ł��Ȃ��Ȃ�*/
/*Firefox1.5�ȍ~�Ń����N���N���b�N�����Ƃ��ɘg�����o���*/
/*MacIE�ɂ͕K�v�Ȃ��̂Ō������Ȃ�*/
/* \*/
overflow:hidden;
/* */
}
p a img{
/*IMG�^�O�̃{�[�_�[������*/
border:none;
}
p a:hover img {
/*���[���I�[�o�[�����Ƃ���IMG�^�O�̉摜������*/
/*visibility:hidden;�ɂ���ƃe�L�X�g���[�_�[�œǂ߂Ȃ�*/
/*text-indent:-9999px;���g����̂�IE����*/
position:relative;
/*left:-9999px;�ɂ����Netscape7�ł����*/
z-index:-1;
}
p a:hover {
/*IE5�Ń��[���I�[�o�[�ł��Ȃ���*/
width:100px;
height:40px;
/*IE5,IE6�Ń��[���I�[�o�[���������Ȃ���*/
background-color:transparent;
}
�T���v��
���ӂ��ׂ��o�O
Windows Internet Explorer 5�E6�Ń`���`������
Windows Internet Explorer 5�Ń��[���I�[�o�[���Ȃ����A�N���b�N���Ă������N�ł��Ȃ�
Windows Internet Explorer 5�Ń��[���I�[�o�[���Ȃ�
Internet Explorer 5�ł̃o�O���������ꍇ��
[�Q�l�L��] ���o�[�W������Internet Explorer��������
�W����visibility:hidden;�ɂ��Ă���p�^�[��������܂����A���ꂾ�Ɖ摜���\������Ȃ��Ƃ��ɂ͉����\������܂���B
img��position: relative;�ł͂Ȃ��A
visibility:hidden;
}
�Ƃ����@������܂��B
�T���v��
���̎�@���܂��A�z�o�[�O��A�^�O��width���w�肷���WinIE5�ŃN���b�N�ł��܂���B
a:hover��width�Ȃ���w�肵�Ȃ���WinIE5�ł͉摜���ς��܂���B
Opera6�ł̓��[���I�[�o�[���܂���B
�X�^�C���V�[�g[CSS]���g�����@(2)
IMG�^�O��position���g��������Ȏ�@������܂��B
�g���摜�̓R���ł��B
�\���̈�� P�^�O��overflow: hidden���w�肵�Aposition:relative�� A�^�O�̈ʒu�����炵�܂��B
Windows IE5�`
Mac IE5
Firefox
Netscape7
Safari
Opera7�`
�Ή�
(�`Opera6�̓��[���I�[�o�[���Ȃ�)
���_(�z���ʂ�ł����c)
�����N�����Ƃ��ɓ_�������������Ȃ�܂��B
CSS���ɂ���Ɖ摜�����������Ȃ�܂��B
p {
overflow: hidden;
width:100px;
height:40px;
/* \*/
position:relative;
/* */
/*\*//*/
display:inline-table;
/**/
}
p a {
display:block;
}
p a:hover {
position:relative;
top:-40px;
}
p a img{
border:none;
}
�X�^�C���V�[�g[CSS]���g�����@(3)
�X�^�C���V�[�g�����̃��[���I�[�o�[
[�Q�l�L��] �摜�u�������@(IR�@)�ɂ�郍�[���I�[�o�[
�摜OFF�ł��\��������@�Ɏ��̂悤�Ȃ��̂�����܂��B
�Q�l�ɉ摜OFF�̏�Ԃ��Ɖ��̂悤�ɂȂ�܂��B
�����̐F���摜�̉��̂�����̗̈�Ɠ����ɂ��āA�B���Ă��邾���Ȃ̂ŁA�摜�̃f�U�C���ɐ���������܂��̂ł��X�X���ł͂���܂���B
p {
/*�摜�̑傫���ɗ̈���m��*/
width:100px;
height:50px;
margin:0;
padding:0;
/*�����傫���Ƃ��ɂ͂ݏo���Ȃ��悤�ɂ���*/
/*MacIE�ł͕\����������̂Ŏw������Ȃ��n�b�N*/
/* \*/
overflow:hidden;
/* */
}
p a {
/*�̈���m�ۂł���悤�Ƀu���b�N�v�f�ɂ���*/
display:block;
/*�N���b�N�ł���悤�摜�̑傫���ɗ̈���m��*/
/*�W�������ł͑傫���悤�Ɏv���܂���overflow:hidden�ʼnB���̂�OK*/
width:100px;
height:50px;
margin:0;
/*�摜���̖͗l�ɂ�����Ȃ��悤�ɒ���*/
padding:20px 0 0 0;
text-align:center;
font-weight:bold;
/*MacIE�ŕ�����������x�͊g��ł���悤����*/
/* \*//*/
font-size:12px;
line-height:12px;
/* */
/*�摜���w��*/
/*�摜OFF�̔w�i�F���w��*/
background:url(img.gif) 0 0 no-repeat #300;
/*�������B���悤�摜�F�Ɠ����Ɏw��*/
color:#900;
}
p a:hover {
/*�摜���w��*/
/*�摜OFF�̔w�i�F���w��*/
background:url(img.gif) 0 -50px #66f;
/*�������B���悤�摜�F�Ɠ����Ɏw��*/
color:#006;
}
JavaScript���g�����@
Macromedia Dreamweaver�ɂ���@�ł��B
JavaScript
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
HTML
<img src="�y�W���摜���z" name="�y��ӂ�ID�z" border="0" />
</a>
img��onmouseover�́y��ӂ�ID�z�͑ƂȂ�܂��B
��������ꍇ�ɂ͂��ꂼ���Ƃ��āA�ʁX��ID��U��܂��B
���̏�Ԃ��ƃ��[���I�[�o�[�摜�́A���[���I�[�o�[����ď��߂ĉ{���҂̃p�\�R���Ƀ_�E�����[�h�����̂Ŕ����������Ȃ�܂��B
�����ʼn��L��onLoad��BODY�^�O�ɋL�ڂ��āA�y�[�W���ǂݍ��܂��Ƃ��ɉ{���҂̃p�\�R���ɃL���b�V�����܂��B
JavaScript
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
HTML
�摜����������ꍇ�́u,�v�ŋ���ď����܂��B