Results 1 to 6 of 6

Thread: Image Description Help

  1. #1
    Join Date
    Mar 2005
    Location
    Hampshire England
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Description Help

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    <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:

    Code:
    <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:

    HTML Code:
    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:

    HTML Code:
    onmouseOver="get_cap(2);" onmouseOut="get_cap(0);"
    Good for IE6 NS7.2 FF1.0.1
    Last edited by jscheuer1; 03-22-2005 at 07:01 AM. Reason: add info

  3. #3
    Join Date
    Mar 2005
    Location
    Hampshire England
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks!

    Was Just what I was Looking for.

    Must look up exactly what the DIV tag does oneday.

    NN

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by NitroNick
    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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

  6. #6
    Join Date
    Mar 2005
    Location
    Hampshire England
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •