�p�\�R��Q&A

���[���I�[�o�[(�}�E�X�����킹���Ƃ��ɉ摜��ς�����@)

���[���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

eXg

Windows IE5�`
Mac IE5
Firefox
Netscape7
Safari
Opera7�`
�Ή�
(�`Opera6�̓��[���I�[�o�[���Ȃ�)

<p><a href="./"><img src="img2.gif" alt="�e�X�g" width="100" height="40"></a></p>

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

a:hover img{
  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)

eXg

IMG�^�O��position���g��������Ȏ�@������܂��B

�g���摜�̓R���ł��B
eXg
�\���̈�� 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><a href="./"><img src="img.gif" alt="�e�X�g" width="100" height="80"></a></p>


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

test


�Q�l�ɉ摜OFF�̏�Ԃ��Ɖ��̂悤�ɂȂ�܂��B

test

�����̐F���摜�̉��̂�����̗̈�Ɠ����ɂ��āA�B���Ă��邾���Ȃ̂ŁA�摜�̃f�U�C���ɐ���������܂��̂ł��X�X���ł͂���܂���B

<p><a href="#">test</a></p>

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

function MM_swapImgRestore() { //v3.0
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

<a href="�y�����N��z" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('�y��ӂ�ID�z','','�y���[���I�[�o�[�摜���z',1)">
<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

function MM_preloadImages() { //v3.0
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

<body onLoad="MM_preloadImages('�y���[���I�[�o�[�摜���z')">


�摜����������ꍇ�́u,�v�ŋ�؂��ď����܂��B

<body onLoad="MM_preloadImages('�y���[���I�[�o�[�摜��(1)�z','�y���[���I�[�o�[�摜��(2)�z')">

���̃y�[�W�̓����N�t���[�ł��B�ݒ�Ȃǂ͎��ȐӔC�Łc
Copy Right kikky

kikky.net