How do i get a picture caption upon mouse over: specifically piczo???

Question

I have a piczo site, and wondered if there was anyway to have a caption appear when someone hovers over one of my pictures. Is there an html code or something for this? I tried searching about this...but all i found was talk about flash and CSS and just about everything I don't understand :]

I hope that makes sense, and if you have any ideas or answers for me-thanks so much!

Answer 1

the idea is to use css. css (cascade style sheet) are able to change completely the visual aspect of html pages. you can "link" a css rule with a "event" such as hovering. it could be something like saying: if the mouse is over the element img, than the "style" of a specific div is not hidden; it is the same trick it is used for "menu" that appears when you hover an element...

since likely you can't play with script, the best safe and nice way to do it is via css...

Answer 2

Oh yes, it's definitely possible. Well, I never used piczo before, so what I'll do is I'll put together some code that'll make it easy for you to use.

You could use javascript and html or css and html. Since some browsers don't allow javascript, we'll stick with css and html on this one.

We'll use CSS to define the style of the image! Then, you could define the style of the image when someone places their mouse over it. Which would be to expand or to place a caption.

Then, in the HTML code, we could define those styles for every image and give them descriptions that are hidden. But they'll show once the image has a mouse over it, which refers back to the CSS when we defined how the image will look when the mouse rolls over.

Hope this makes sense. I'm going to put the code together and send it right over, but if you found some other sources out there, let me know what it is and I'll help you out. Just send over a message and we can tweak it.

The code is too long for the  answer.

Let me know if there's anything else.

Thanks,

Abdurrahman Qadan

Oh, by the way. I'll message you the code once i get it together.

Answer 3

In the image tag for your pictures, just insert a simple title="" attribute  with the caption you want.  It's simple and easy to implement unless you want the fancier stuff with CSS.

Example:

<img style="width: XXpx; height: YYpx; border: 0;" src="your_image1.png" alt="Text Description" title="Caption Information">

Ron