Profile when Mouse Over

[samuvk]

Hi,

How can I do something like display a profile while mouseover an item? Either in HTML or JavaScript.

 

I have the following:

<a href="#" onmouseover="showDetails()" onmouseout="hideDetails()">John</a>

How could I building the profile itself? Developing the showDetail() function do display:

 

Thank you very much

 

See images attached

[Ingolme]

I would make that profile in HTML, then use Javascript to show it, position it and change the content within it.

[dsonesuk]

You don't need JavaScript, this can be done using css only.

 

create profile details container with content give it position: absolute; display: none; and place in anchor element, give anchor element position: relative; then use :hover to change child div to display: block;

 

You then just need to add top: left: properties to position it where you like relative to the anchor element.