Creating Text Boxes on Image Mouseover

littwentythree

I'm trying to create a map that will display a text box with a few lines of information whenever you mouseover a few key locations (let's say, as an example, that there are ten designated areas that each need to display their own text boxes). To elaborate, this is one base image, with multiple mouseovers. What would be the best way for me to go about this? Using Flash 8, the only way I could achieve this effect (that I can find) would be to split up my large image into many smaller images, link those to mouseover effects, and somehow stitch the whole thing back together.

What are my options here?

yalborap

How about overlaid, transparent PNG images with simple alt-text tags? Or little 'buttons' or 'pins' with the same purpose.

littwentythree

I need the effect to be immediate, and I can't use buttons or pins to add anything to the map.

Paper Plates

You could do this pretty easily with jQuery, which is pretty simple to pick up. You'd need to wrap the specific sections in div's or span's or whatever you like, and then use the hover function to figure out when to display the text boxes.

You might be able to do this with just straight up Javascript but jQuery is the only time I meddle with that stuff.

Check out the documentation at http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

littwentythree

I'll try that as a last resort, but it seems like a lot of work to solve such a simple problem. I'm already very close to solving it in Flash 8.

Seguer

It shouldn't really be that much trouble to do it in jQuery. Use the image as an image map and hook the events to the areas in the image map. I've never tried this myself, but it should be as simple as

<img src="map.jpg" usemap="imagemap">
<map name="imagemap">
<area id="hoverarea" blah blah />
</map>

$(document).ready( function()
{
   $("#hoverarea").hover()...etc
});

NOTE: I have no idea if that will work

Szechuanosaurus

You could do it in Flash by just placing transparent movie clips with rollover events over the different areas of your image. That way you don't need to chop your image up.

But really, a javascript solution would probably be substantially better. It is a simple problem. Using Flash in a real-world situation to solve it is overkill. You should only ever resort to Flash when there are absolutely no other options available to you.

Valkun

It's been a long time since I've done web development, but it sounds like what you want is an image map itself.

Try here

Image Maps using alt tags on each region might work?

whuppins

Valkun wrote: »

It's been a long time since I've done web development, but it sounds like what you want is an image map itself.

Try here

Image Maps using alt tags on each region might work?

Yeah, no need to get fancy. This can be done in plain old HTML 1.0. In fact, that linked page has an example of exactly what you're trying to do, with code and everything.

Szechuanosaurus

Image maps are...well, I guess maybe right here they are maybe the best solution but...urgh.

They do not exactly appeal to my desire to keep content, styling and behaviour separate, I guess.

Here's an elegant solution using CSS - http://www.frankmanno.com/ideas/css-imagemap/

When you disable CSS, the descriptions appear as a list below the image, like a diagram key. Much nicer IMO.

littwentythree

I managed to do it using both an Image Map and Javascript. When you mouseover certain areas, an image appears with the information I want displayed.

And I appreciate the help, but there indeed was a "need to get fancy", as I said before I needed the effect to be immediate

whuppins

Not sure if it's browser-dependent, but alt text boxes have always popped up for me in less than a second. Maybe I misunderstood what you meant by "immediate". Anyway, I'm glad you got it working.