On Mouseover Display Position Specific Div

[cpugeek]

I was browsing the internet and stumped across this webpage: http://www.behance.net/SakkeSoini.And I happened to notice the section referenced to as "Inner Circle" (just below the portfolio) , and on MouseOver of the images in this section, it displays a Div with links and information.And I was wondering, how would I approach doing the same on my website? Does anyone know how to do this? and Are there any all-ready existing scripts that do this behaviour?

[justsomeguy]

Yeah, there's an existing script on behance.net.

[awitt]

Well, this doesn't seem to difficult. First off, I don't know if there are already snippets of code that accomplish this type of stuff on the internet or not. But, I'm pretty sure I know how you'd go about doing this. To begin, you'd have to arrange the div and the image elements over each other. Then, somewhere in the head section, you'd have to have a line o code similar to this:

 document.getElementById("elementName")style.display = "none";

And, you'd have to attribute an id to each image and div element, too. Then, you'd use the onmouseover() method as a trigger for

 document.getElementById("divElementName").style.display = "block";document.getElementById("imgElementName").style.display = "none"

(or some other appropriate display type). Now, to achieve the nice fading effects that site has, you'd have to use something like Sciptaculous! to accomplish that. And obviously, when the mouse isn't over the image anymore, you'd want to reverse that code I displayed above.