jquery 롤오버 PNG를 세로로 나열하는 방법

Question

롤오버를 세로로 나열하려면 빠른 응답을 받았지만 다시 시도 할 것입니다.

$(document).ready(function() 
{ 
$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}); 

}); 

그리고 다음과 같이 대한 CSS는 다음과 같습니다 :

내가 가진 스크립트입니다

div.fadehover { 
    position: relative; 
    } 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 

     z-index: 10; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    } 

그리고 몸의 코드는 다음과 같습니다

<div class="fadehover"> 
<a href=""><img src="portfolio_a.png" alt="" class="a" /> 
<img src="portfolio_b.png" alt="" class="b" /></a> 

</div> 

내가 원하는 무엇 그 기능을 가져 와서 수직 메뉴에 섞어 라. Dreamweaver에서 기본 스왑 이미지 1을 만들었습니다. 이전 코드로 바꾸고 싶습니다. 테이블을 사용하여 이들을 연결하면 div 레이어가 서로 겹치는 것처럼 보입니다. 여기에 내가 대체하고자하는 페이지에 대한 제한 드림위버 코드 :

<script type="text/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];}} 
} 

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; 
} 

function MM_nbGroup(event, grpName) { //v6.0 
    var i,img,nbArr,args=MM_nbGroup.arguments; 
    if (event == "init" && args.length > 2) { 
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) { 
     img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; 
     if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); 
     nbArr[nbArr.length] = img; 
     for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { 
     if (!img.MM_up) img.MM_up = img.src; 
     img.src = img.MM_dn = args[i+1]; 
     nbArr[nbArr.length] = img; 
    } } 
    } else if (event == "over") { 
    document.MM_nbOver = nbArr = new Array(); 
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { 
     if (!img.MM_up) img.MM_up = img.src; 
     img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); 
     nbArr[nbArr.length] = img; 
    } 
    } else if (event == "out") { 
    for (i=0; i < document.MM_nbOver.length; i++) { 
     img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } 
    } else if (event == "down") { 
    nbArr = document[grpName]; 
    if (nbArr) 
     for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } 
    document[grpName] = nbArr = new Array(); 
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { 
     if (!img.MM_up) img.MM_up = img.src; 
     img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; 
     nbArr[nbArr.length] = img; 
    } } 
} 
//--> 
</script> 

는 ... 몸의 코드는 다음과 같습니다

<div id="menu"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','portfolioa','portfolio_b.png',1)" onmouseover="MM_nbGroup('over','portfolioa','portfolio_b.png','portfolio_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="portfolio_a.png" alt="Portfolio" name="portfolioa" width="221" height="39" border="0" id="Portfolio" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','cginewa','cgi_new_b.png',1)" onmouseover="MM_nbGroup('over','cginewa','cgi_new_b.png','cgi_new_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="cgi_new_a.png" alt="CGI | New" name="cginewa" width="221" height="40" border="0" id="CGINew" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','cgiarchivea','cgi_archive_b.png',1)" onmouseover="MM_nbGroup('over','cgiarchivea','cgi_archive_b.png','cgi_archive_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="cgi_archive_a.png" alt="CGI | Archive" name="cgiarchivea" width="221" height="39" border="0" id="CGIArchive" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','webdesigna','webdesign_b.png',1)" onmouseover="MM_nbGroup('over','webdesigna','webdesign_b.png','webdesign_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="webdesign_a.png" alt="Webdesign" name="webdesigna" width="221" height="38" border="0" id="Webdesign" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','mediaa','media_b.png',1)" onmouseover="MM_nbGroup('over','mediaa','media_b.png','media_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="media_a.png" alt="Media" name="mediaa" width="221" height="39" border="0" id="Media" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','identitya','identity_b.png',1)" onmouseover="MM_nbGroup('over','identitya','identity_b.png','identity_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="identity_a.png" alt="Identity" name="identitya" width="221" height="40" border="0" id="Identity" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','aboutmea','aboutme_b.png',1)" onmouseover="MM_nbGroup('over','aboutmea','aboutme_b.png','aboutme_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="aboutme_a.png" alt="About Me" name="aboutmea" width="221" height="36" border="0" id="AboutMe" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','academica','academic_b.png',1)" onmouseover="MM_nbGroup('over','academica','academic_b.png','academic_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="academic_a.png" alt="Academic" name="academica" width="221" height="40" border="0" id="Academic" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','professionala','professional_b.png',1)" onmouseover="MM_nbGroup('over','professionala','professional_b.png','professional_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="professional_a.png" alt="Professional" name="professionala" width="221" height="38" border="0" id="Professional" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contacta','contact_b.png',1)" onmouseover="MM_nbGroup('over','contacta','contact_b.png','contact_b.png',1)" onmouseout="MM_nbGroup('out')"><img src="contact_a.png" alt="Contact Me" name="contacta" width="221" height="40" border="0" id="Contact" onload="" /></a></td> 
    </tr> 
    <tr> 
     <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','linksa','links_b.png',1)" onmouseover="MM_nbGroup('over','linksa','links_b.png','links_a.png',1)" onmouseout="MM_nbGroup('out')"><img src="links_a.png" alt="Links" name="linksa" width="221" height="41" border="0" id="Links" onload="" /></a></td> 
    </tr> 
    </table> 
</div> 

내가 여기에 볼 수있는이 메뉴를 디자인하고 웹 페이지 : http://www.kaimeramedia.com/derek/Website/Main_New.html

Answer 1

이전 질문과 똑같은 것을 할 수 있습니다 : How do I make a rollover using png and jquery?. 유일한 차이점은 HTML을 표 셀에 복사/붙여 넣기하고 다른 탐색 항목을 반영하도록 이미지 소스를 변경해야한다는 것입니다. 베스트 프랙티스를 사용하고 레이아웃에 테이블을 사용하지 않는 것이 좋습니다. 당신은 다음과 같이 서로의 상단에있는 div를 쌓을 수 :

<div class="hover-container"> 
    <div class="fadehover">...</div> 
    <div class="fadehover">...</div> 
    <div class="fadehover">...</div> 
    <div class="fadehover">...</div> 
</div> 

는 이제 div.hover-container의 CSS 변경하여 원하는 곳이 위치 할 수 있습니다 http://jsfiddle.net/jasper/CyJXD/1/

: 여기

.hover-container { 
    position: relative; 
    width: 250px; 
} 

것은 jsfiddle입니다

div.fadehover의 내용을 절대적으로 배치하여 높이를 0으로 지정해야합니다 (높이를 지정하지 않으면 다른 탐색 항목이 서로 위에 나타납니다).