Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Create title tags for dynamic images?

    I have a javascript that loads images on the page based on the date you select from a drop down menu. So the images are displayed dynamically, however they are numbered 1 through 20.

    Is there a way I can add a title tag to the images that will display on mouseover?

    Here's the page I am working on. I want to add title tags to the six images on the right side of the page. They change based on the date selected.

    webpage

    Thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Don't make us search that page for the code.

    Show us where you put the new images into the <img> tags.

    You should be able to do it easily.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry...

    Code:
    <tr>
      <td width="100%"></td>
      <td width="100%" align="center"><img border="0" name="tonoimg" src="blanco.gif" width="45" height="24" ></td>
      <td width="100%" rowspan="2"></td>
    </tr>
    <tr>
      <td width="100%">&nbsp;</td>
      <td width="100%" align="center"><img name="guiaimg" border="0" src="blanco.gif" width="65" height="65"></td>
    </tr>
    <tr>
      <td width="100%" align="center"><img name="antipodaimg" border="0" src="blanco.gif" width="65" height="65" align="right"></td>
      <td width="100%" align="center"><img name="destinoimg" border="0" src="blanco.gif" width="65" height="65"></td>
      <td width="100%" align="center"><img name="analogoimg" border="0" src="blanco.gif" width="65" height="65" align="left"></td>
    </tr>
    <tr>
      <td width="100%">&nbsp;</td>
      <td width="100%" align="center"><img name="ocultoimg" border="0" src="blanco.gif" width="65" height="65"></td>
      <td width="100%">&nbsp;</td>
    </tr>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    No no...I meant show us where you use JavaScript to change what is *IN* those images.

    I found that code in your page easily, I just couldn't find the JS that changed the images dynamically.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It's a really long scipt but I think this is what you are looking for:

    Code:
    function sacakinpersonal(){
    
    diaparaluna=document.form2.diaparaluna.value
    mesparaluna=document.form2.mesparaluna.value
    axxa1=document.form2.axxa.value
    
    if(diaparaluna=="01"){diaparaluna=1}
    if(diaparaluna=="02"){diaparaluna=2}
    if(diaparaluna=="03"){diaparaluna=3}
    if(diaparaluna=="04"){diaparaluna=4}
    if(diaparaluna=="05"){diaparaluna=5}
    if(diaparaluna=="06"){diaparaluna=6}
    if(diaparaluna=="07"){diaparaluna=7}
    if(diaparaluna=="08"){diaparaluna=8}
    if(diaparaluna=="09"){diaparaluna=9}
    
    if(mesparaluna=="01"){mesparaluna=1}
    if(mesparaluna=="02"){mesparaluna=2}
    if(mesparaluna=="03"){mesparaluna=3}
    if(mesparaluna=="04"){mesparaluna=4}
    if(mesparaluna=="05"){mesparaluna=5}
    if(mesparaluna=="06"){mesparaluna=6}
    if(mesparaluna=="07"){mesparaluna=7}
    if(mesparaluna=="08"){mesparaluna=8}
    if(mesparaluna=="09"){mesparaluna=9}
    
    diaparaluna=parseInt(diaparaluna)
    mesparaluna=parseInt(mesparaluna)
    axxa1=parseInt(axxa1)
    
    blanquear()
    sacakindiasx()
    armahoy()
    piramide="rojo.gif"
    armatzolkin()
    
    }
    
    function sacakindias(){
    
    datevar = new Date(); 
    diaparaluna=datevar.getDate()
    mesparaluna=datevar.getMonth()+1
    axxa1=datevar.getFullYear()
    
    piramide="verde.gif"
    sacakindiasx()
    armahoy()
    armatzolkin()
    }
    
    
    function sacakindiasx(){
    
    switch (axxa1) { 
    case 1806: var1="8" 
    break; 
    case 1858: var1="8"
    break; 
    case 1910: var1="8"
    break; 
    case 1962: var1="8"
    break; 
    case 2014: var1="8"
    break;
    case 1807: var1="113"
    break;
    case 1859: var1="113"
    break;
    case 1911: var1="113"
    break;
    case 1963: var1="113"
    break;
    case 2015: var1="113"
    break;
    case 1808: var1="218"
    break;
    case 1860: var1="218"
    break;
    case 1912: var1="218"
    break;
    case 1964: var1="218"
    break;
    case 1809: var1="63"
    break;
    case 1861: var1="63"
    break;
    case 1913: var1="63"
    break;
    case 1965: var1="63"
    break;
    case 1810: var1="168"
    break;
    case 1862: var1="168"
    break;
    case 1914: var1="168"
    break;
    case 1966: var1="168"
    break;
    case 1811: var1="13"
    break;
    case 1863: var1="13"
    break;
    case 1915: var1="13"
    break;
    case 1967: var1="13"
    break;
    case 1812: var1="118"
    break;
    case 1864: var1="118"
    break;
    case 1916: var1="118"
    break;
    case 1968: var1="118"
    break;
    case 1813: var1="223"
    break;
    case 1865: var1="223"
    break;
    case 1917: var1="223"
    break;
    case 1969: var1="223"
    break;
    case 1814: var1="68"
    break;
    case 1866: var1="68"
    break;
    case 1918: var1="68"
    break;
    case 1970: var1="68"
    break;
    case 1815: var1="173"
    break;
    case 1867: var1="173"
    break;
    case 1919: var1="173"
    break;
    case 1971: var1="173"
    break;
    case 1816: var1="18"
    break;
    case 1868: var1="18"
    break;
    case 1920: var1="18"
    break;
    case 1972: var1="18"
    break;
    case 1817: var1="123"
    break;
    case 1869: var1="123"
    break;
    case 1921: var1="123"
    break;
    case 1973: var1="123"
    break;
    case 1818: var1="228"
    break;
    case 1870: var1="228"
    break;
    case 1922: var1="228"
    break;
    case 1974: var1="228"
    break;
    case 1819: var1="73"
    break;
    case 1871: var1="73"
    break;
    case 1923: var1="73"
    break;
    case 1975: var1="73"
    break;
    case 1820: var1="178"
    break;
    case 1872: var1="178"
    break;
    case 1924: var1="178"
    break;
    case 1976: var1="178"
    break;
    case 1821: var1="23"
    break;
    case 1873: var1="23"
    break;
    case 1925: var1="23"
    break;
    case 1977: var1="23"
    break;
    case 1822: var1="128"
    break;
    case 1874: var1="128"
    break;
    case 1926: var1="128"
    break;
    case 1978: var1="128"
    break;
    case 1823: var1="233"
    break;
    case 1875: var1="233"
    break;
    case 1927: var1="233"
    break;
    case 1979: var1="233"
    break;
    case 1824: var1="78"
    break;
    case 1876: var1="78"
    break;
    case 1928: var1="78"
    break;
    case 1980: var1="78"
    break;
    case 1825: var1="183"
    break;
    case 1877: var1="183"
    break;
    case 1929: var1="183"
    break;
    case 1981: var1="183"
    break;
    case 1826: var1="28"
    break;
    case 1878: var1="28"
    break;
    case 1930: var1="28"
    break;
    case 1982: var1="28"
    break;
    case 1827: var1="133"
    break;
    case 1879: var1="133"
    break;
    case 1931: var1="133"
    break;
    case 1983: var1="133"
    break;
    case 1828: var1="238"
    break;
    case 1880: var1="238"
    break;
    case 1932: var1="238"
    break;
    case 1984: var1="238"
    break;
    case 1829: var1="83"
    break;
    case 1881: var1="83"
    break;
    case 1933: var1="83"
    break;
    case 1985: var1="83"
    break;
    case 1830: var1="188"
    break;
    case 1882: var1="188"
    break;
    case 1934: var1="188"
    break;
    case 1986: var1="188"
    break;
    case 1831: var1="33"
    break;
    case 1883: var1="33"
    break;
    case 1935: var1="33"
    break;
    case 1987: var1="33"
    break;
    case 1832: var1="138"
    break;
    case 1884: var1="138"
    break;
    case 1936: var1="138"
    break;
    case 1988: var1="138"
    break;
    case 1833: var1="243"
    break;
    case 1885: var1="243"
    break;
    case 1937: var1="243"
    break;
    case 1989: var1="243"
    break;
    case 1834: var1="88"
    break;
    case 1886: var1="88"
    break;
    case 1938: var1="88"
    break;
    case 1990: var1="88"
    break;
    case 1835: var1="193"
    break;
    case 1887: var1="193"
    break;
    case 1939: var1="193"
    break;
    case 1991: var1="193"
    break;
    case 1836: var1="38"
    break;
    case 1888: var1="38"
    break;
    case 1940: var1="38"
    break;
    case 1992: var1="38"
    break;
    case 1837: var1="143"
    break;
    case 1889: var1="143"
    break;
    case 1941: var1="143"
    break;
    case 1993: var1="143"
    break;
    case 1838: var1="248"
    break;
    case 1890: var1="248"
    break;
    case 1942: var1="248"
    break;
    case 1994: var1="248"
    break;
    case 1839: var1="93"
    break;
    case 1891: var1="93"
    break;
    case 1943: var1="93"
    break;
    case 1995: var1="93"
    break;
    case 1840: var1="198"
    break;
    case 1892: var1="198"
    break;
    case 1944: var1="198"
    break;
    case 1996: var1="198"
    break;
    case 1841: var1="43"
    break;
    case 1893: var1="43"
    break;
    case 1945: var1="43"
    break;
    case 1997: var1="43"
    break;
    case 1842: var1="148"
    break;
    case 1894: var1="148"
    break;
    case 1946: var1="148"
    break;
    case 1998: var1="148"
    break;
    case 1843: var1="253"
    break;
    case 1895: var1="253"
    break;
    case 1947: var1="253"
    break;
    case 1999: var1="253"
    break;
    case 1844: var1="98"
    break;
    case 1896: var1="98"
    break;
    case 1948: var1="98"
    break;
    case 2000: var1="98"
    break;
    case 1845: var1="203"
    break;
    case 1897: var1="203"
    break;
    case 1949: var1="203"
    break;
    case 2001: var1="203"
    break;
    case 1846: var1="48"
    break;
    case 1898: var1="48"
    break;
    case 1950: var1="48"
    break;
    case 2002: var1="48"
    break;
    case 1847: var1="153"
    break;
    case 1899: var1="153"
    break;
    case 1951: var1="153"
    break;
    case 2003: var1="153"
    break;
    case 1848: var1="258"
    break;
    case 1900: var1="258"
    break;
    case 1952: var1="258"
    break;
    case 2004: var1="258"
    break;
    case 1849: var1="103"
    break;
    case 1901: var1="103"
    break;
    case 1953: var1="103"
    break;
    case 2005: var1="103"
    break;
    case 1850: var1="208"
    break;
    case 1902: var1="208"
    break;
    case 1954: var1="208"
    break;
    case 2006: var1="208"
    break;
    case 1851: var1="53"
    break;
    case 1903: var1="53"
    break;
    case 1955: var1="53"
    break;
    case 2007: var1="53"
    break;
    case 1852: var1="158"
    break;
    case 1904: var1="158"
    break;
    case 1956: var1="158"
    break;
    case 2008: var1="158"
    break;
    case 1853: var1="3"
    break;
    case 1905: var1="3"
    break;
    case 1957: var1="3"
    break;
    case 2009: var1="3"
    break;
    case 1854: var1="108"
    break;
    case 1906: var1="108"
    break;
    case 1958: var1="108"
    break;
    case 2010: var1="108"
    break;
    case 1855: var1="213"
    break;
    case 1907: var1="213"
    break;
    case 1959: var1="213"
    break;
    case 2011: var1="213"
    break;
    case 1856: var1="58"
    break;
    case 1908: var1="58"
    break;
    case 1960: var1="58"
    break;
    case 2012: var1="58"
    break;
    case 1857: var1="163"
    break;
    case 1909: var1="163"
    break;
    case 1961: var1="163"
    break;
    case 2013: var1="163"
    break;
    default:
    var1="0"
    	}
    
    switch (mesparaluna) { 
    case 1: valor=55 
    break; 
    case 2: valor=86
    break; 
    case 3: valor=114
    break; 
    case 4: valor=145
    break; 
    case 5: valor=175
    break; 
    case 6: valor=206
    break;
    case 7: valor=236
    break; 
    case 8: valor=7
    break; 
    case 9: valor=38
    break; 
    case 10: valor=68
    break; 
    case 11: valor=99
    break; 
    case 12: valor=129
    break; 
    default: 
    valor=0
    	}
    
    if ((mesparaluna==2)&&(diaparaluna==29)){
    dia="113"
    } else {
    dia = valor + eval(diaparaluna)-1
    }
    
    
    
    //-------------onda----------------
    onda = fila - tonox + 1
    if ( onda <1)
    {
    if (onda == 0)
    {
    onda = 20
    }
    else
    {
    onda = (20 + onda)
    }
    }
    queselloes=onda
    nombres()
    //-----------fin onda---------------------
    
    
    analogo = 19 - fila
    if (analogo == 0)
    {
    analogo = 20
    }
    if (analogo == -1)
    {
    analogo = 19
    }
    
    oculto = 21 - fila
    
    antipoda = fila +10
    if (antipoda > 20)
    {
    antipoda = antipoda - 20
    }
    
    guia = onda + 13*(tonox-1)
    guia = guia % 20
    if (guia==0)
    {
    guia = 20
    }
    
    
    document.guiaimg.src="1/"+ guia + ".png"
    document.antipodaimg.src="1/"+ antipoda + ".png"
    document.destinoimg.src="1/"+ fila + ".png"
    document.analogoimg.src="1/"+ analogo + ".png"
    document.ocultoimg.src="1/"+ oculto + ".png"

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    This is all I really needed:
    Code:
    document.guiaimg.src="1/"+ guia + ".png"
    document.antipodaimg.src="1/"+ antipoda + ".png"
    document.destinoimg.src="1/"+ fila + ".png"
    document.analogoimg.src="1/"+ analogo + ".png"
    document.ocultoimg.src="1/"+ oculto + ".png"
    So you can just put the titles in at the same time:
    Code:
    document.guiaimg.title = "this is the title";
    etc.
    I'm a little surprised that using document.nameOfImg works.

    I would have thought you would have at least needed document.images["nameOfImg"]

    Have you checked that it works in all browsers?? (I used Firefox, so I know it works there.)

    EDIT: Works in MSIE 8 and Chrome, so never mind. Must be okay.
    Last edited by Old Pedant; 12-30-2010 at 11:55 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    document.guiaimg.src="1/"+ guia + ".png"
    document.antipodaimg.src="1/"+ antipoda + ".png"
    document.destinoimg.src="1/"+ fila + ".png"
    document.analogoimg.src="1/"+ analogo + ".png"
    document.ocultoimg.src="1/"+ oculto + ".png"
    There are 20 images that are used in rotation in those five places. The title remains consistent to the image. The image names are 1.png, 2.png, 3.png.... 20.png. So the title needs to belong to the image not to "guiaimg" or "antipodaimg," etc.

    The image names are like dragon, wind, night, seed, serpent, etc. I want to always associate the title "dragon" to 1.png and "wind" to 2.png, etc.

    Does that make sense?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Sure...easy.

    So those variables (guia, antipoda, fila, analogo, oculto) are always numbers, is that right?

    Then it's easy:

    Code:
    document.guiaimg.src="1/"+ guia + ".png"
    document.antipodaimg.src="1/"+ antipoda + ".png"
    document.destinoimg.src="1/"+ fila + ".png"
    document.analogoimg.src="1/"+ analogo + ".png"
    document.ocultoimg.src="1/"+ oculto + ".png"
    
    // put all 20 names into a simple array
    // element zero is blank if you don't use "0.png"
    var titles = [ "", "dragon", "wind", ..., ];
    
    document.guiaimg.title = titles[guia];
    document.antipodaimg.title = titles[antipoda];
    document.destinoimg.title = titles[fila];
    document.analogoimg.title = titles[analogo];
    document.ocultoimg.title = titles[oculto];
    Make sense?? You just use that same number to pick the title out of the array of titles. Presto.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    isak (01-26-2011)

  • #9
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's what I added to the script, but now I am getting no images at all.

    Code:
    document.guiaimg.src="1/"+ guia + ".png"
    document.antipodaimg.src="1/"+ antipoda + ".png"
    document.destinoimg.src="1/"+ fila + ".png"
    document.analogoimg.src="1/"+ analogo + ".png"
    document.ocultoimg.src="1/"+ oculto + ".png"
    
    // put all 20 names into a simple array
    // element zero is blank if you don't use "0.png"
    
    var titles = [ "", "Dragon", "Wind", "Night", "Seed", "Serpent", "World Bridger", "Hand", "Star", "Moon", "Dog", "Monkey", "Human", "Skywalker", "Wizard", "Eagle", "Warrior", "Earth", "Mirror", "Storm", "Sun" ];
    
    document.guiaimg.title = titles[guia];
    document.antipodaimg.title = titles[antipoda];
    document.destinoimg.title = titles[fila];
    document.analogoimg.title = titles[analogo];
    document.ocultoimg..title = titles[oculto];

  • #10
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    nevermind, nevermind.... I must have had an evil brainfart or something. It's working like a charm!

    I am embarrassed to tell you how many websites I read and how many searches I did to get to this point.

    I am greatly obliged!

  • #11
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Just thought I would let you know that once you have sorted this problem out that you may want to check the errors on the page and fix them you have when I checked 823 errors and 270 warnings here's the link to check the errors (http://validator.w3.org/check?uri=ht...en-v6-date.htm).
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #12
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Only 800 and some, eh? Got my work cut out for me, don't I?

    Thanks for the inspiring news....

  • #13
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Not a problem lol, I think most of the errors are due to you not having a DCOTYPE and using uppercase on onClick and that, for some reason the validator sometimes freaks out and sends out errors because of the uppercase letters, the errors will go down fast if you read over them all, also 1 or 2 of the warnings and errors might be to do with the char type as some of the chars in the keywords and description don't display in the source codes.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #14
    New Coder
    Join Date
    Jul 2002
    Location
    Tejas
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    For some reason that I do not understand, the scripts on the page quit working or work sporadically when a doctype is declared. I have the errors down to 260 and these are all related to having ids that start with a number... and again, editing these affects the page: the image appears fine when a square is clicked, but if you go back and click that square again, the images appear as a broken link.

    The page actually displays via an iframe from this page: only 17 errors!

  • #15
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    I would suggest you re-write the page but putting the ids like image_1 etc and in the js coding write a query to collect all ids starting with image_ then you can still use the number for the image but now with a valid id name.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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