Upload JS on mouse hover

This page you submitted does not load JavaScript code at runtime, it only dynamically manipulates some HTML elements. Let's see how to recreate this effect.

When performing the mouseover, the site shows a div at the mouse position and loads an iframe with the url of the link (in this case, a Google Plus profile).

Let's see how we can reproduce this effect

this is the window where ajax will be run to load

<div id="user"></div>

It needs to have this CSS attribute

#user{
  position: absolute; //para ficar em qualquer lugar da página
  display: none; //para ficar escondida
}

Let's take a look at the links with the username:

<a ... class="g-profile" href="https://plus.google.com/9999999999999999999" ...>
....
</a>

Links contains the g-profile class and a href attribute. That's all we need to move on.

Now let's go to the scripts. Since we are going to manipulate many elements, I recommend using jQuery to save syntax and debug time.

$(document).ready(function(){

  $('.g-profile').hover(function(){

  //quando o mouse ficar em cima do link...

   var mouseX = e.pageX; //pegue a coordenada x do mouse
   var mouseY = e.pageY; //pegue a coordenada y do mouse
   var url = $(this).attr('href'); //pegue a url do link

   $('#user').html("<iframe src="+url+"></iframe>"); // crie o iframe com a url

   //mova a div e mostre-a
   $('#user').css({'top':mouseY,'left':mouseX,'display':'block'}); 



},function(){

 // quando o mouse sair...
 $('#user').css('display','none'); //esconda a div


  });

});

Source: link

As usual, we loaded the jQuery script:

<script src="http://code.jquery.com/jquery-1.5.js"></script>

Andweincludelogic:

varscripts=['/JS/Util/meuScript1.js','/JS/Util/esteScriptDependeDoScript1.js','/JS/MeuScriptPrincipalQueDependeDoScript1e2.js'];functioncarregarScripts(callback){if(scripts==null||scripts.length==0){callback();return;}varscript=scripts[0];scripts=scripts.slice(1);$.getScript(script,function(){carregarScripts(callback);});}

Notethattheglobalvariable"scripts" is an array that contains the URL of each script to be loaded, in the order you want them to be loaded, position 0 being the first one.

The only parameter of the loadScripts () method is the name of the function that will be invoked after loading all scripts entered in the scripts array. In this case, I invoke a function that is in the last file, responsible for the general processing of the page (MyScriptPrincipalQueDependeDoScript1e2.js). Calling the load function:

<script type="text/javascript">
// Esperamos que a pagina seja carregada e esteja "programavel"
$(document).ready(function(){
  carregarScripts(function(){ iniciarProcessamento(); });
});
</script>

If you want to change the load to be in the onhover, just put that logic in the document.ready ok?

We could pass the URLs of the scripts in parameter to the function, or directly pass the array etc ... but this way it is easier to reuse.