Need help with image captions......

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jm999
Forum Commoner
Posts: 28
Joined: Tue Aug 29, 2006 11:58 am

Need help with image captions......

Post 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.
User avatar
nykoelle
Forum Newbie
Posts: 22
Joined: Fri Aug 10, 2007 9:05 am
Location: New York

Post 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
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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.
jm999
Forum Commoner
Posts: 28
Joined: Tue Aug 29, 2006 11:58 am

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
Post Reply