wow, thanks for your help, it's really useful to me.
On 1月4日, 上午2時56分, Ricardo Tomasi <[email protected]> wrote: > Everytime you change the "src" attribute of an image, the browser will > fire a request to the server. That's one of the reasons why img roll- > overs have been replaced with CSS hover a long time ago, this is a > waste of scripting. Something like this is much more effective (and > semantically correct): > > (X)HTML: > > <ul class="nav"> > <li><a href="#about" class="about">About</a></li> > <li><a href="#product" class="product">Product</a></li> > <li><a href="#skill" class="skill">Skill</a></li> > </ul< > > CSS: > > .nav a { > display:block; > text-indent:-9999px; > overflow: hidden; > width: 100px; > height: 30px; > background-repeat: no-repeat; > > } > > .about { background-image:url(images/nav/nav_skill.jpg) } > .product { background-image:url(images/nav/nav_skill.jpg) } > .skill { background-image:url(images/nav/nav_skill.jpg) } > > .nav a:hover { background-position: 0 -30px } > ... > > Then all you need is 60px high images with both button states, one on > top of each other. No preloading, no image swapping, all simple :) A > search on google for "css rollovers" or something alike will give you > endless examples. > > If you still want to do it with javascript, there's a much shorter > way: > > $.each > (['about','product','skill','service','news','member','recruit'], > function(i, val){ > $('<img/>').attr('src', 'images/nav/nav_' + val + '.jpg') > .appendTo(?) > .hover(function(){ > var $this = $(this); > $this.attr('src', $this.attr('src').replace('.jpg', > '_over.jpg') ); > }, function(){ > var $this = $(this); > $this.attr('src', $this.attr('src').replace('_over','') ); > }); > > }); > > You could implement your cacheing with data() there but I think the > performance penalty is likely irrelevant. > > cheers, > - ricardo > > On Jan 3, 12:26 pm, "David .Wu" <[email protected]> wrote: > > > Part1 > > > var navPath = 'images/nav/'; > > var navArr = new Array > > ('nav_about','nav_product','nav_skill','nav_service','nav_news','nav_member','nav_recruit'); > > var navArrLen = navArr.length; > > > for(i=0;i<navArrLen;i++) > > { > > $(document.createElement('img')).attr('src',navPath + > > navArr[i] + > > '_over.jpg'); > > } > > > Part2 > > $('#nav img:gt(0):lt(7)').each(function(i) > > { > > $(this).data('btnOver',navPath + navArr[i] + '_over.jpg'); > > $(this).data('btnOut',$(this).attr('src')); > > $(this).hover(function() > > { > > $(this).attr('src',$(this).data('btnOver')); > > }, > > function() > > { > > $(this).attr('src',$(this).data('btnOut')); > > }); > > }); > > > Part 1 is about to pre load the images > > Part 2 is to give each image a data property; and do the swap image > > function when mouse over and out > > > my question is, the image pre load succeed, but when I mouse over the > > image, the browser will connect to server to require something, is > > that mean the code do > > > $(this).data('btnOver',navPath + navArr[i] + '_over.jpg'); > > $(this).data('btnOut',$(this).attr('src')); > > > these tow lines again and again when mouse over?
