7OK

Outils du site

La morale c'est la castration du sublime [Plakunov]
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

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
56-tools:images [2015/11/18 15:43] – [Images] 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