How to achieve BING rollover text windows?

Posted on 2010-01-04
Last Modified: 2012-05-08
I have set up a web page that cycles through about 5 different images using JQuery cycle lite.

The client would now like to also have each individual photo have various 'hover' areas that look just like the main page (

On the Bing site, you see a main image, and as you move your mouse around the photo, various little squares are highlighted, then as you hover over each square, another small box appears alongside it with text in it that describes something.

Is there by chance a JQuery plug-in that will work like this? That will take an image and let the developer define 1 or more small square areas on it that, when hovered over, produce another small box with text in it?

Even if there is no JQuery plug-in for this, can anyone recommend a way to accomplish this?

Thanks experts!
Question by:rascal
    LVL 40

    Accepted Solution

    Using image map you can have multiple links (you can add hover, by adding onmouseover and onmouseout events)

    or you can check this for Jquery lightbox
    LVL 1

    Author Closing Comment

    the only issue with the rollover solution (and I didn't mention it as part of my question), is that the user cannot extend the mouse into the popup text area since the rollover effect is only on the initial mapped area. But I think I know of a jquery tooltip tool that will allow the user to roll the mouse into the popup area without it going away. thanks!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 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

    12 Experts available now in Live!

    Get 1:1 Help Now