i have a container and below it, a table of 3 rows and a column and in each column, there is an image. i want to do such that onmouseover , the container gets filled with that image.. help me do this..
+2
A:
here is how you will do it
$( window ).load(function()
{
$( 'img' ).hover(function()
{
var img_src = $( this ).attr( 'src' );
var $container = $( '#container' );
$container.html( '<img src="' + img_src + '" />' );
});
});
give the container the id 'container'
ovais.tariq
2010-08-15 11:17:39
what does $ do?
Abid Ali
2010-08-15 11:25:57
$ is jquery's magic function. My solution above requires jquery and I would recommend you using jquery for all your javascript needs, it kills much of the pain of cross-browser shit and coding is much more focused on the problem at hand
ovais.tariq
2010-08-15 11:40:23
should that be : $(document).ready(function(){ //code to do whatever })this wrapper essentially says when the dom is ready, run the code
Joe
2010-08-15 14:55:17
it could be document.ready or window.load, document.ready fires when the dom is ready and window.load fires when all the content has been loaded. So document.ready would essentially fire before the image has been loaded completely, it wouldnt matter much if its an image of small file size but it would matter if the image file size is large.So here with window.load what will happen is when the image is shown in the container, it will appear instantly, because it will be loaded from the browser's cache.
ovais.tariq
2010-08-16 08:53:56