ã¡ãªã¿ã«ãjavascriptã§ã¯ãªããCSSã使ã£ã¦ããã®ã§ã
ãã¼ã¸ãéãã¨ãã«å
¨ã¦ã®ç»åãèªã¿è¾¼ã¿ã¾ãã
ï¼ãç»å表示é¨åã®è¨è¿°
ï¼å®éã¯å
¨è§ãï¼ããï¼ããåè§ã«å¤æãæ¹è¡ã空ç½ãé¤å»ãã¦ã¾ããï¼
ï¼!--âæ¡å¤§æã®ãµã¤ãºã®åºæºãtable/tr/td ã§ãOK--ï¼
ï¼div style="width:300px;height:400px;border-style:solid; "ï¼
ï¼!--âæ¡å¤§æã®ä½ç½®ã®åºæºãããã¯ãã®ã¾ã¾è¨è¿°--ï¼
ï¼div style="position:relative;vertical-align:top;"ï¼
ï¼a class="thumnailparent" href="(ç»åURL1)"ï¼
ï¼img class="onMousethum" src="(ç»åURL1)"ï¼
ï¼/aï¼
ï¼a class="thumnailparent" href="(ç»åURL2)"ï¼
ï¼img class="onMousethum" src="(ç»åURL2)"ï¼
ï¼/aï¼
ï¼/divï¼
ï¼/divï¼
ï¼ãCSSã«è¿½å ããå±æ§ã
A:hover.thumnailparent,
A:active.thumnailparent {
_width: 100%; /* IEã®ãã°å¯¾ç */
}
.thumnailparent {
_width: auto; /* IEã®ãã°å¯¾ç */
/* IEã¯A:hoverãA:activeã«ãµã¤ãºæå®ããªãã¨ç»åãåæããªã */
}
.onMousethum{
border:0;
vertical-align:top;
width: 20%;
}
A:hover IMG.onMousethum,
A:active IMG.onMousethum{
z-index: 10;
width: 100%;
left: 0px;
position:absolute;
}
åèï¼
ãããã¨ãããã¨ããï¼Leftyï¼ï¼ã¾ããããã¦ãã¨(追è¨ããï¼
ãåä¾ããããªãï¼ãã¦ã¹ãªã³ç»ååæã試ãã¦ã¿ã
ï¼è¿½è¨ï¼
TBéãã®å¿ãã¦ãâ¦ãã¾ããã§ãããåä¾ããããªãï¼ãã¦ã¹ãªã³ç»ååæã試ãã¦ã¿ãã«ãã©ãã¯ããã¯ãã¾ãã