javascript - Load Images only after mouseover on URL (using DIV Tag) -


i'm using method, show picture after url-mouseover:

<a href="url" class="infotext">title<span><img src="image-url"></span></a> 

so picture gets showed, after mouseover. problem is, while using method, pictures getting loading server after opening site. may not show, loaded. if have 100 links mouseover image, 100 images gets loaded after opening site, creates big traffic.

is there code, makes pictures inside tag loaded server, >if< there mouseover?

this css:

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 }  

i know isn't css approach i've create quick (non-styled) demo using onmouseover load image conditionally, javascript allow target specific images. hope help!

javascript

function loading() {   var image = document.getelementbyid('image');   image.setattribute('src', 'img/placeholder.png'); }  

and here html

    <a href="#" onmouseover="loading(this)">load image</a>     <img id="image" src="" alt=""> 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -