Learn how to a build a cloud-first strategyRegister Now


How could I pull this off?

Posted on 2011-05-09
Medium Priority
Last Modified: 2012-05-11
Head out to http://www.pond5.com/video-sound-effects-music-after-effects-photos-illustrations/1/frisbee.html - this is what I want to do.

Now head out to http://countryshowdown.com/Texaco/download_campaign/index.php 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 pond5.com, 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="http://ec.pond5.com/www/sr/video.png">
<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="http://ec.pond5.com/s3/000263800_icon.jpeg" 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

Accepted Solution

rgranlund earned 2000 total points
ID: 35721191
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month20 days, 14 hours left to enroll

864 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