How do I add a "title" for images to this image javascript?

Discussion in 'JavaScript' started by Jen-, Aug 9, 2006.

  1. #1
    Hello, here is some image javascript I am using to show an image that I insert
    and also a link to a different page when you click on the image.

    I need to know how I would show a title for each image when the image is hovered over to add to this script. I think I need a new document.getElement, but I don't know how to incorporate it. Here is the script as it is now. Thank you very much!! Jen :)

    arr=[

    ["image1.gif","page1.htm"],
    ["image2.gif","page2.htm"], // no comma at the end of last index
    ]

    now=new Date()
    nowDate=now.getDate()

    function changeImg(){

    if(nowDate>arr.length){
    return
    }

    document.getElementById("img").src=arr[nowDate-1][0]
    document.getElementById("link").href=arr[nowDate-1][1]

    }

    And this goes in the body section of the page...

    <BODY onload="changeImg()">

    <a href="#" id="link" target="_blank"><img border="0" id="img"></a>
     
    Jen-, Aug 9, 2006 IP
  2. giraph

    giraph Guest

    Messages:
    484
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    0
    #2
    document.getElementById("img").title = "Title"
     
    giraph, Aug 9, 2006 IP
  3. Jen-

    Jen- Peon

    Messages:
    151
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok thanks! I saw one of your other posts helping someone looks like you know what you're doing.
    How do I add the title in the array like the img and the link? I tried adding titletest to the rest and it didn't come up.

    ["image2.gif","page2.htm","titletest"], // no comma at the end of last index
    ]

    I even tried adding this to the document.get at the end with no luck. [nowDate-1][2]
    Like the others following.

    document.getElementById("img").src=arr[nowDate-1][0]
    document.getElementById("link").href=arr[nowDate-1][1]
     
    Jen-, Aug 10, 2006 IP
  4. giraph

    giraph Guest

    Messages:
    484
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Change the two arrays by adding a comma then your title in quotes like so
    
    ["image1.gif","page1.htm","yourtitle"]
    
    Code (markup):
    then add the following after document.getElementById("link")
    
    document.getElementById("img").title=arr[nowDate-1][2]
    
    Code (markup):
     
    giraph, Aug 11, 2006 IP
  5. Jen-

    Jen- Peon

    Messages:
    151
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I can tell your doing it right, I'm just still having trouble. This is the part that is in the body on my page.

    <body onload="changeImg()"><a href="#" id="link" title id="title" target="_blank"><img id="img" border="0" /></a>

    I also tried adding these to it and nothing happened:

    a href="#" id="link" img title id="title" target="_blank"><img id="img" border="0"></a>

    a href="#" id="link" target="_blank"><img id="img" img title id="title" border="0"></a>

    Using this document.getElementById("title").title=arr[nowDate-1][2]

    But this one was interesting:

    a href="#" id="thumblink" target="_blank"><img id="thumbimg" border="0"><img title id="title"></a>

    It created a tiny seperate box right next to the image and when I hovered over the seperate box the title function worked! So how to get it to work over the actual image instead of separately?

    Thanks
     
    Jen-, Aug 11, 2006 IP
  6. giraph

    giraph Guest

    Messages:
    484
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    0
    #6
    
    <body onload="changeImg()"><a href="#" id="link" target="_blank"><img id="img" border="0" /></a>
    Code (markup):
    Try that
     
    giraph, Aug 11, 2006 IP
  7. Jen-

    Jen- Peon

    Messages:
    151
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Tried the just above with these in the external and not working yet.

    document.getElementById("thumbimg").src=arr[nowDate-1][0]
    document.getElementById("thumblink").href=arr[nowDate-1][1]
    document.getElementById("img").title=arr[nowDate-1][2]
     
    Jen-, Aug 11, 2006 IP