Brice Burgess schreef: > Regarding; <input type="image" src="a.gif" /> > > Using Firebug's (FF 2) net monitoring, I noticed that every time I > switched the src of an input image it would request the new src image > from HTTP. FF simply does not cache these images. This is kind of > annoying because it can waste a lot of bandwith or slow the user > experience down -- especially when involving a lot of hovers, or > frequent hover overs such as the close button of a modal window. > > I noticed this while looking @ the close button of jqModal. You can see > a demonstration @ the jqModal page, or better yet, see; > http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_form_bg > > The w3schools uses a background change on a text input, while jqModal > changes the src of an image input. The reasons for the input is that it > takes the focus() event, and allows you to "tab into it". Regardless of > the method.. I was able to rack up 103kb by moving my mouse back & > fourth for 10 seconds in the w3schools example. Not major.. but NOT > OPTIMAL! :) > > So.. here is my way around this -- which I'll work into jqModal examples > once I get some feedback on it. Vs. changing the source, I inline both > versions of the input (the "over" & the "out"), alternating their > display value. > > <div> > <input type="image" src="close.gif" class="jqmOut" /> > <input type="image" src="close_hover.gif" class="jqmOver hidden" /> > </div> > > --- > > <script type="text/javascript"> > $().ready(function() { > > $('input.jqmOut') > .mouseover(function(){ > $(this).hide().siblings('input.jqmOver').show(); $}) > .focus(function(){ var > f=$(this).hide().siblings('input.jqmOver').show()[0]; f.hideFocus=true; > f.focus(); }); > > $('input.jqmOver') > .mouseout(function(){ > $(this).hide().siblings('input.jqmOut').show(); $}) > .blur(function(){ $(this).hide().siblings('input.jqmOut').show(); }); > }); > </script> > > (( the hideFocus() is for aesthetic purposes involving IE )) > > Anyhow.. does anyone have any thoughts on this topic? Or can this be > improved upon? > > Regards, > > ~ Brice (another one of those 3am posts... ;) ) > > > > > _______________________________________________ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > > I saw a css technique where the initial and the mouseover image where one image and they swiched them with by showing only that part of the picture that was needed. I can't find it back right now but i think it was on a list apart.
i got an article here : http://wellstyled.com/css-nopreload-rollovers.html -- David Duymelinck ________________ [EMAIL PROTECTED] _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
