CSS Nested image

CSS Nested image test

by roge roge

HTML

<h1> CSS nested image</h1>

<h4> SPAN </h4>
   <span class="ImgCollapsed" title="DĂ©plier" > &nbsp;  &nbsp; &nbsp;  </span>
   <span class="ImgExpanded">   &nbsp;  &nbsp;  &nbsp;  </span>
   
   <br>
	
<h4> IMG </h4>   
   <img class="ImgCollapsed" onClick="alert('coucou');"  src=""  width="00" height="20"  title="Open"  />  &nbsp;  &nbsp;  &nbsp; 
   <img class="ImgExpanded" onClick="alert('coucou');"  src="" width="16" height="16" />
   <br>
   
<h4> IMG in A  </h4>
   
   <a href="#" onClick="alert('coucou');" title="Open"> <IMG CLASS="Collapsed"/> </a>
    &nbsp;  &nbsp; 
  <a href="javascript:void(0);" onClick="alert('coucou');" title="Close"> <IMG CLASS="Expanded"/> </a>

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");
}

.ImgExpanded {
	width:20; height:20;
	text-decoration: none; 
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAYAAAD52jQlAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAPZJREFUOE+tkisSwkAQREcgEIhIBAKJQHIIBIfgEAhkHEfgCBwBgYhAcgQEEoFAIBCIpWdrdmq/IRRM1ask+7qnwoeMMX8nexiDGYBJzjl8n8gYzBScwbKrT0I+HAQPwA+rrj4I6SFRH2wl7KijTNFrSA+IxuAkwad3b0uYVm8z7kYKc3CX0AXMQC3PfA28dNTrHhE9sBHJ7EEVlY5ytV4XfLG0AaOo5C9tdEFpqRfgj3eV0A0sgJZAq88utQdEQ3CQIMPfrZYwrd5m3E0MZg1eUghKn7yGcmD410/e5JMPQjkwFdj5pZjYJ4ESGPtvKOH7RP6OoTeN1qLb4GsThAAAAABJRU5ErkJggg==");
}


Img.Collapsed {
	cursor: pointer;
	width:20; height:20;
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAYAAAD52jQlAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAOlJREFUOE+tkCESwjAQRVcgEIhKRAUSgewhEByCQyCQOI7AETgCAoFAcgQEEoFAIBCI8FOS7k8mQzIDnXnT37y/O23FGPN3NIjULGJyntEgsgJbloz3oEp5RsNnyIYLaLhU4hkNOmR5gWVQzHhGQ/gmfngPhiWeSS219xm4uecrmIKvPruUzg7uzHJ099bjqgH7Nei1jhaklu7cmSVeWgH2+aW4/L+7g/jzGxB4v6ed7YIOncCT8qjEM6mlnk1QTHjQ507X7YLIwpUfYM6lEs9oQBGcwYQLpZ7RIDJmEWM9GKRcTPLwN4y8AfxNottsD8mSAAAAAElFTkSuQmCC");
}

Img.Expanded {
	cursor: pointer;
	width:20; height:20;
	content:...

JavaScript

});