Page 1 of 1

Need help with image captions......

Posted: Fri Aug 10, 2007 10:30 am
by jm999
Hi. I am trying to add a caption that appears when you hover over an image and then disappears when you hover out. I need the caption to overlap the images and in a perfect world it would be semi-transparent. Does anyone know how to do this? I'm thinking that its probably a combo of CSS and Javascript but I'm a total newb with JS.

Posted: Fri Aug 10, 2007 1:18 pm
by nykoelle
not sure how relevant it is to what you're trying to do, but any image with an alt tag, the alt tag does the hovering caption thing you're talking about.
also good practice to always use an alt tag on images. - http://www.w3schools.com/tags/tag_img.asp

<img src="img.jpg" alt="This is my caption" />

however as that guide says alt doens't hover for firefox. To get that, I would say use onmouseover in javascript. Maybe if it's not too much work have two versions of your image, one with the caption one without then have the onmouseover load the second version with the caption. That's how i'd do it, but my knowledge of javascript is limited. if you search for onMouseOver on w3schools I'm fairly sure they have a guide for that as well.

goodluck

Posted: Fri Aug 10, 2007 1:22 pm
by nickvd
nykoelle wrote:however as that guide says alt doens't hover for firefox. To get that, I would say use onmouseover in javascript. Maybe if it's not too much work have two versions of your image, one with the caption one without then have the onmouseover load the second version with the caption. That's how i'd do it, but my knowledge of javascript is limited. if you search for onMouseOver on w3schools I'm fairly sure they have a guide for that as well.

You could also use the 'title' attribute instead of javascript.. that way those who turn off javascript will also see it.

Posted: Fri Aug 10, 2007 1:23 pm
by jm999
nykoelle wrote:not sure how relevant it is to what you're trying to do, but any image with an alt tag, the alt tag does the hovering caption thing you're talking about.
also good practice to always use an alt tag on images. - http://www.w3schools.com/tags/tag_img.asp

<img src="img.jpg" alt="This is my caption" />

however as that guide says alt doens't hover for firefox. To get that, I would say use onmouseover in javascript. Maybe if it's not too much work have two versions of your image, one with the caption one without then have the onmouseover load the second version with the caption. That's how i'd do it, but my knowledge of javascript is limited. if you search for onMouseOver on w3schools I'm fairly sure they have a guide for that as well.

goodluck
Thanks for the tip nykoelle. I realize I can get the alt text to popup in some browsers, but I'm thinking more of a fixed caption that pops up or fades in over the bottom of the image. I've looked into using scriptaculous and I know I can achieve the effect I want, I just don't know how to approach it. I'll keep plugging away at it. If anyone else has some pointers then let me know! Thanks.

Posted: Mon Aug 13, 2007 7:00 pm
by califdon
Rather than learning some other package, I'd suggest just learning Javascript. It's not difficult, and can do exactly what you described. This is certainly a personal opinion, but I recommend learning the underlying language or technology, rather than some abstraction layer. Those can be very useful, once you understand the basics, but it's so easy just to learn Javascript itself. You'll still need to be imaginative in determining how you want your captions to appear, especially as to where they will be positioned, but if you use Javascript and CSS, you will have full control of it. Blindly using somebody's package that may or may not do what you want could be a real waste of your time.