Image Description Help

[NitroNick]

Hiya all

I've been an avid reader of Dynamic Drive and along with a few other sites have used it to teach myself HTML. Got to the point where I have set up a small website mainly for displaying pictures and videos. Have a look HERE in the Nitro Pic's/ AA Pic's/ BBQ Pic's to see the simple thumbnail viewer I wrote.

What I'm trying to do is get an onmouseover effect so that when the mouse hovers over a thumbnail a discriptive text is displayed under the main image that will load upon onmousedown. Trouble Is I aint got a clue how to do it.

As I say, I'm new to HTML and Webpage building having learnt my basic computer skills many years ago using BASIC on am old MSX computer

Any help would be appreciated

NN

[jscheuer1]

Well, you need to make a container for your captions, like:

<div id=cap>Initial caption goes here</div>

and put that under your main image there.

Use a script like this in the head of the page:

<script type="text/javascript">
//enter captions below, use as many as you need.
//if you use a single quote, escape it like so: That\'s cool!
//if you break a line - break it after a comma like below
caps=["Initial caption goes here","caption for first image",
"caption for second image","third caption"]

//don't mess with the rest unless you know what you are doing
function get_cap(cap_num){
document.getElementById('cap').innerHTML=caps[cap_num]
}
</script>

then in the thumbnails, where you have the onMousedown= event, add:

onmouseOver="get_cap(1);" onmouseOut="get_cap(0);"

for each one, this example is for the first image and its caption, the second would look like this:

onmouseOver="get_cap(2);" onmouseOut="get_cap(0);"

Good for IE6 NS7.2 FF1.0.1

[NitroNick]

Thanks!

Was Just what I was Looking for.

Must look up exactly what the DIV tag does oneday.

NN

[mwinter]

Must look up exactly what the DIV tag does oneday.

A div element doesn't "do" anything[1]. It is a block-level container which has no semantics (no defined meaning). The span element is similar, but it is an inline element.

The HTML specification contains descriptions of all elements and attributes, and is quite readable.

Mike


[1] Strictly nothing in HTML "does" anything. All HTML is meant to do is describe the content of a document.

[jscheuer1]

I doubt NitroNick (you're welcome, NitroNick) will be back anytime soon but, in case he is, and for others reading this thread, an even better script for this would be:

<script type="text/javascript">
//enter captions below, use as many as you need.
//if you use a single quote, escape it like so: That\'s cool!
//if you break a line - break it after a comma like below
caps=["Initial caption goes here","caption for first image",
"caption for second image","third caption"]

//don't mess with the rest unless you know what you are doing
function get_cap(cap_num){
if (document.getElementById)
document.getElementById('cap').innerHTML=caps[cap_num];
else if (document.all)
document.all('cap').innerHTML=caps[cap_num];
else
return;
}
</script>

everything else being equal, it will be better behaved on some older IE versions and should degrade well on other browsers that don't support it. Still good for IE6 NS7.2 FF1.0.1

[NitroNick]

I doubt NitroNick (you're welcome, NitroNick) will be back anytime soon

Thanks!

I can assure you that this little forum is well and truly stuck in my favorites section.

I'm only just starting out in web page building and have picked up a lot of tips from this forum and the DD home page already.

Thankfully I'm a lot better at repairing cars then building websites, so the old saying "Dont Give up your Day Job" certainly rings true here!


NN