7OK

Outils du site

Les gens qui disent que je suis grossier ont raison. Je suis exactement grossier, et je me trouve même un peu seul. L'irrespect se perd et on se fout pas assez de la gueule des cons. [Coluche]
Vous êtes ici : 7OK » Tⓞⓞls » Images
56-tools:images

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision		Révision précédente
56-tools:images [2015/11/18 15:42] – créée Roge56-tools:images [2017/10/06 23:38] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
  
 +====== Images ======
 +
 +Encoder des images en base 64: [[http://base64online.org/encode/]]
 +
 +Il est très performant de stocker des petites images utilisées fréquement dans la feuille de style.
 +
 +<code css>
 +.ImgCollapsed {
 + width:20; height:20;
 + text-decoration: none; 
 + content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAYAAAD52jQlAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAOlJREFUOE+tkCESwjAQRVcgEIhKRAUSgewhEByCQyCQOI7AETgCAoFAcgQEEoFAIBCI8FOS7k8mQzIDnXnT37y/O23FGPN3NIjULGJyntEgsgJbloz3oEp5RsNnyIYLaLhU4hkNOmR5gWVQzHhGQ/gmfngPhiWeSS219xm4uecrmIKvPruUzg7uzHJ099bjqgH7Nei1jhaklu7cmSVeWgH2+aW4/L+7g/jzGxB4v6ed7YIOncCT8qjEM6mlnk1QTHjQ507X7YLIwpUfYM6lEs9oQBGcwYQLpZ7RIDJmEWM9GKRcTPLwN4y8AfxNottsD8mSAAAAAElFTkSuQmCC");
 +}
 +</code>
 +
 +usage en HTML:
 +
 +<code html>
 +<a href="#" onClick="alert('coucou');" title="Open"> <IMG CLASS="Collapsed"/> </a>
 +</code>
 +
 +[[http://jsfiddle.net/redg35ha/|Exemple fiddle]]
 +
 +On peut aussi stocker une image dans le javascript :
 +<code:js>
 +window.ImgCollapsed = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAALCAYAAABs3u23AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNvyMY98AAACtSURBVDhPY/j//z9dMZjYcOjK/9rZO3BikDyyJkowmAAZig9A5TE0k4PBBMjAP3/+wDEDUBjG/vb1A20s/PbtKxyDLATRHz+8/P/gwT0aWQj0CcgidHz31kWcFhobG/8HYWL5IAwmQAZ+/PgWjN++eQa26OXLx2Df3bx6mjYWvnh2A2w4CIMsvHbh2P9LZ/b/P3NyF22CFGTw/r0b/h/asRwDU91CuudD+uH/DADncY0ihCIzIAAAAABJRU5ErkJggg==";''
 +</code>

Outils de la page