1 CSS Sprites in Javascripts Mon Mar 05, 2012 12:20 am
schiggyswelt
Registered Member
Hi, I had this two Scripts:
So there were 3 Pictures, but I would do this in one. (CSS Sprite)
div.c1{height:13px;width:16px;border-radius:4px;cursor:pointer;position:absolute;background:url(https://2img.net/i/fa/optimisation_fdf/common/arrow_rtl.png) 0 -13px no-repeat #f5ebf7}
div.c1{height:13px;width:16px;border-radius:4px;cursor:pointer;position:absolute;background:url(https://2img.net/i/fa/optimisation_fdf/common/arrow_rtl.png) 0 -13px no-repeat #f5ebf7}
this are the two css codes for the Javascript..
Can you do it, that the Images were in CSS Sprites?
- Code:
function EsconderCategoriaFeitoPorSupero(cid,iflag){var cat=document.getElementById(cid);var button=document.getElementById('b'+cid);if(cat.style.display=='none'){cat.style.display='block';button.className='contract';my_setcookie('_'+cid,'',true)}else{cat.style.display='none';button.className='expand';my_setcookie('_'+cid,'1',true)}}$(function(){x=$('ul.topiclist li.header').get();for(i=0;i<x.length;i++){x[i].style.position='relative';var cid='c'+String(i+1);x[i].parentNode.nextSibling.setAttribute('id',cid);x[i].parentNode.nextSibling.style.display='block';var y='<div id="b'+cid+'" class="contract" onclick="EsconderCategoriaFeitoPorSupero(\''+cid+'\');"></div>';x[i].innerHTML=x[i].innerHTML+y}cookies=document.cookie.split('; ');for(i in cookies){if(cookies[i].charAt(0)=='_'){cookie=cookies[i].split('=');if(cookie[1]=='1'){cid=cookie[0].substring(1);if(document.getElementById(cid)){EsconderCategoriaFeitoPorSupero(cid,'x')}}}}});$(document).ready(function(){$('table tbody tr:odd').addClass('zebraUm');$('table tbody tr:even').addClass('zebraDois')});
- Code:
<div id="forum-widget" class="c1" onclick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>
So there were 3 Pictures, but I would do this in one. (CSS Sprite)
div.c1{height:13px;width:16px;border-radius:4px;cursor:pointer;position:absolute;background:url(https://2img.net/i/fa/optimisation_fdf/common/arrow_rtl.png) 0 -13px no-repeat #f5ebf7}
div.c1{height:13px;width:16px;border-radius:4px;cursor:pointer;position:absolute;background:url(https://2img.net/i/fa/optimisation_fdf/common/arrow_rtl.png) 0 -13px no-repeat #f5ebf7}
this are the two css codes for the Javascript..
Can you do it, that the Images were in CSS Sprites?