Image description

[sretsis]

I was wondering if anyone could direct me to a tutorial or give me a script that will enable dynamic sort of description boxes at the bottom of my images just like the ones in this script:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I really would like to use it in my blog. I tried to figure it out myself but failed because my knowledge of javascript and css is very, very basic.

Also, could someone help tell me how I can disable text selection in IE? I tried the one on this site and it doesn't work in IE for some reason (it works fine in Chrome and Firefox when I tested it). Could I be doing something wrong?

Thank you for reading :)

[jscheuer1]

Your blog? How much control of its javascript and css do you have? Do external scripts have to be remotely hosted? If so, do you have a host for that? Can you put javascript right in your page's source code?

That script has 3 styles of descriptions (4 if you include none). What did you have in mind? I'm thinking the 'ondemand' type, where if you move your mouse over the image a description pops up and stays there until you move the mouse away. The 'always' option where there's a little icon for hiding and showing the description might be nice too. The 'peekaboo' option doesn't make much sense here to me.

Anyways, you could use this script. Each slideshow would have just two images in it and those would both be the same, and with the same description. You can have as many 'slideshows' as you want on a page. A nice touch would be to set the css of the fadeshow division(s) to the width and height of the image in it and their background image to that image. That way non-javascript users would at least see the image.

But it would be a bit of overkill. When I have more time I'll see if I can come up with something simpler script wise for it.

[sretsis]

Thank you! Yes, my blog does allow CSS and Javascript but only in the script section. It does not allow scripts to be used in the body area, however. Therefore I have been unable to use several scripts on my blog that require a script to be placed in the body or at the end of the document.

I will try using the script as you suggested with the same image. But if you find a simpler code, please let me know :)

PS. I read a lot of threads before posting and you are always so helpful and are patient with giving advice. That's very nice of you!

PPS. Sorry for my imperfect English. It's not my main language.

[jscheuer1]

I was playing around with this and have a demo:

http://home.comcast.net/~jscheuer1/side/files/im_desc_only.htm

Use your browser's 'view source' to get the code.

Most of the style is to get the divisions holding the images to lay out like images. I've marked the ones that are required for the slide up descriptions. However, if you don't use the display inline-block (which I left optional) for the .imagedescription class and the less than IE 8 float: left for the same selector, you will probably need to specify the width. If more than one and the widths vary, you would need to specify it for each one.

Any questions, feel free to ask.

[sretsis]

I will go try it out. Thank you very much.

[jscheuer1]

I'm still working on it. That version is good, but I have a better one and will soon replace the one linked to above with it.

OK, it's there. Same link:

http://home.comcast.net/~jscheuer1/side/files/im_desc_only.htm

Refresh the page before using 'view source'.

[jscheuer1]

Still working on it Part II. I decided that all of the styles and markup constraints of the original versions I had worked out were just too much to ask for the average person using the script on their site. I have a new version, still not quite ready that's very easy to use. It will allow you simply to follow an ordinary image or an ordinary linked image with an ordinary division with a class name and a description in it.

That's the version I'm sure you want, when I get it done, I'll let you know.

OK, it's done, more or less same link:

http://home.comcast.net/~jscheuer1/side/files/im_desc_only.htm