by the way, do you have more sample that css substitute for js?
On 1月5日, 下午2時33分, "David .Wu" <chan1...@gmail.com> wrote:
> wow, thanks for your help, it's really useful to me.
>
> On 1月4日, 上午2時56分, Ricardo Tomasi <ricardob...@gmail.com> 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" <chan1...@gmail.com> 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?
