View Full Version : Adding text descriptions to images? js script in use!

01-17-2005, 02:29 AM
I desperately need help with my site, which has been unfinished for almost a year. :eek:
This is my plight:
All I want to do is add text descriptions to the images!
Simple as that - or is it?

I've been trying like hell to find something I both like AND can put into action myself (with minimal help!) But I'm getting really peed off now: I'm just a learner (self-taught in fact) but I do admit defeat often and NOW is one of those times!

Here's the situation:
My site is basically an online art gallery, heavy with images:-

As a web and especially Javascript novice, I recently managed to get Dynamic Drive's 'Image Thumbnail Viewer II IE' to work! For reference, the original script can be found here:


I really like the 'finished' look and the 'simplicity' of the thumb rollovers showing the original (larger) image on the same page. If possible, I'd like to keep it like that, or similar.

However, there are no text details/descriptions about each image ie. artwork's name, medium used, size etc. (People don't know if they're looking at a postage stamp or a billboard!)
All I want to do is display this information! Simple as that!! I thought it would be quite simple but I was wrong!

I've tried ALT tags which do the basic job, but I've no idea how to edit or enhance (change font style/background colour/position etc).

Then, on my many www searches, I discovered editable Tooltips - similar to ALT.
I like the idea of tooltips but I've tried tests to date and just cannot get them to work properly! (Maybe coz I'm already using the DD Image Viewer script? Not compatible?)

(I'm now even looking at different js image galleries/viewers/slideshows with text, but that would mean re-doing the entire site (and there's more artwork to be added). :eek: I will start again if I really have to but as a last resort - UNLESS I find an option that suits and is worth it!)

I truly thank you if you have taken the time to check out my site. If you have, you'll have seen that there's empty space on the left of the thumbs. I think this could be used to show text descriptions, there's plenty of room. Tooltips seem to be the possible answer. (Other ideas are welcome!)
I'm an artist and graphics are my thing so I want the text to fit in with the rest of the site ie. colours, shadows, bevels maybe? etc. . I want to be be able to control/design how it looks and fits in! Hope you know what I mean! :rolleyes:

It's not only advice I want, I think I need 'hands on help'! Javascript is daunting for beginners like me, but I think I did ok getting this far so there's hope!
My site's source code and one of MY thumb images could be used to show me a visual possibility? If I see a script using (for example 'my_ image.gif') in html I know I will understand it all a bit better!

Hope that all makes sense - and that it's ok to do this! Sorry for ranting a bit - I'm just getting frustrated! To me, it should be such a simple task, you know?! (Think the only thing that's simple here is ME! :o )

All in all - be gentle!

Willy Duitt
01-19-2005, 10:49 AM
I'll give you a bump back to the top but I just got to say that I did go over to your site to check how your images were displayed but I clicked on three different links looking for images without finding any and gave up looking for them...

Try posting a link directly to the page in question rather than your splash page and leave us to peck and search for the appropriate page...


01-19-2005, 02:24 PM
Thanks Willy. Try this link:


- just place the cursor over a thumb (no need to click) and the image should appear on the right - thats whats supposed to happen anyway!!
(Actually, I've had a few people tell me the same problem.
What could be wrong? Could it be that the viewer's pc has to be 'Java Enabled' or something like that?)

See what ya think.

01-19-2005, 02:40 PM
Could it be that the viewer's pc has to be 'Java Enabled' or something like that?)

it works fine for me using Firefox. no need for Java: it's Javascript this uses (the two are mutually exclusive).

anyway, to add descriptions, you'll need to add something like this to the script.

document.images['IMAGE_NAME'].title="string in here";

alternatively, do this:

document.getElementById('IMAGE_NAME').title="string in here";

where IMAGE_NAME is anything that the image is called when using the name (example 1) or id (example 2) attribute.

01-21-2005, 01:54 AM
Thanks very much but I've been busy, busy, busy since posting this and think I may have the answer!
When I publish my new pages I'll post here to let you know coz I really value your opinion/s.
Here's hoping...