title: Load Images only after mouseover on URL (using DIV Tag)
body: <p>I'm using this method, to show a Picture only after a URL-mouseover:</p>
  
  <pre><code>&lt;a href="URL" class="infotext"&gt;TITLE&lt;span&gt;&lt;img src="IMAGE-URL"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>So the Picture only gets showed, after the mouseover. The problem is, while using this method, ALL Pictures are getting loading from the server after opening the site. They may not show, but they get loaded. So if you have 100 Links with a mouseover image, all 100 images gets loaded after opening the site, which creates big traffic.</p>
  
  <p>Is there any code, that makes the pictures inside the  Tag only get loaded from the server, >IF&lt; there is a mouseover? </p>
  
  <p>This is the CSS:</p>
  
  <pre><code>a.infotext{
  text-decoration: none;
  }
  
  a:hover.infotext {
  color: #E2E2E2;
  text-decoration: none;
  }
  
  a.infotext span {
  visibility: hidden;
  position: absolute;
  left: 2em;
  margin-top: 2em;
  padding: 1em;
  text-decoration: none;
  }
  
  a:hover.infotext span {
  visibility: visible;
  border: 1px solid #292929;
  color: #347BEE;
  background: #040404;
  text-decoration: none;
  width: 432px
  } 
  </code></pre>