How could I pull this off?

Posted on 2011-05-09
Last Modified: 2012-05-11
Head out to - this is what I want to do.

Now head out to This is where I'm at. I've got my formatting down, but now I want to make it where when my user mouses over any of those "bdages," they'll get a little window with additional info.

The challenge is that every pop up window will have information being retrieved from a database, as will all of the info on the badges (that's what I'm calling all the little white boxes wit the arrow in the lower right hand corner).

I was looking at Tooltip, but I couldn't see how I could easily script all of the css and jquery stuff in a way where I could loop through all the info in my database and create unique CSS and JavaScript for each badge without having to do it by hand rather than through a query.

When I look at the code on the, site, I see this:

<div id="sresults"><div class="box"><div class="inner"><div class="info"><div class="icon">
<img class="kux_type_icon" alt="video" src="">
<a onclick="P5.setSc('t'+263800);" href="/stock-footage/263800/two-beautiful-girls-on-the-beach.html">
<img onmouseover='P5.makeMo(event,263800,355,200,6,4,1920,1080,"Two beautiful girls on the beach by Spotmatik",4586,70,2);' onmouseout="P5.unmakeMo();" class="centerit" style="display:block;width:120px;height:68px;" src="" alt="Stock Video Footage of Two beautiful girls on the beach" /></a></div>

I'm thinking this is a simple mouseover command that opens up a box. A box that I could pass info to in the context of a URL with some variables embedded in it.

But I don't how to pull that off. Thoughts?
Question by:brucegust
    1 Comment
    LVL 7

    Accepted Solution

    What you can do is Create a Div class in your CSS file that has , say:

    .inner a {

    .inner a:hover {

    You place all of your info in that div and it will stay hidden until hover.  In addition, you may need to use the z-index to further complete that but not 100% off the top of my head.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now