...

View Full Version : Create title tags for dynamic images?



isak
12-30-2010, 10:28 PM
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 (http://www.mayankin.com/tzolkin/tzolkin-en-v6-date.htm)

Thanks.

Old Pedant
12-30-2010, 10:47 PM
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.

isak
12-30-2010, 11:23 PM
sorry...


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

Old Pedant
12-30-2010, 11:26 PM
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.

isak
12-30-2010, 11:47 PM
It's a really long scipt but I think this is what you are looking for:



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"

Old Pedant
12-30-2010, 11:53 PM
This is all I really needed:


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:


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.

isak
12-31-2010, 12:40 AM
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?

Old Pedant
12-31-2010, 01:04 AM
Sure...easy.

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

Then it's easy:



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.

isak
12-31-2010, 01:40 AM
Here's what I added to the script, but now I am getting no images at all.



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];

isak
12-31-2010, 01:50 AM
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!

DJCMBear
12-31-2010, 01:54 AM
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=http://www.mayankin.com/tzolkin/tzolkin-en-v6-date.htm).

isak
12-31-2010, 02:56 AM
Only 800 and some, eh? Got my work cut out for me, don't I?

Thanks for the inspiring news.... :(

DJCMBear
12-31-2010, 06:02 AM
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.

isak
12-31-2010, 06:16 AM
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 (http://www.mayankin.com/tzolkin/tzolkin-v1.htm): only 17 errors! :o

DJCMBear
12-31-2010, 06:56 AM
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.

isak
12-31-2010, 08:16 AM
I don't understand the query and how to write it. Would that fix the errors I was getting when I renamed a few of the ids to test renaming them?

By the way, I keep chopping on those errors and am making progress!

DJCMBear
12-31-2010, 02:42 PM
A little query like this will work.



(function($){
$.demo = function() {
var i,current,prefix='image_',tag=documentgetElementsByTagName('*');
for(i=0;i<tag.length;i++) {
if(tag[i].id.substr(0,prefix.length) == prefix) {
current = tag[i].id.substr(prefix.length);
alert(current);
}
}
};
})(window);

isak
12-31-2010, 07:55 PM
Maybe I am misunderstanding. I renamed all the ids to start with "image_", then I added your script "as is" to my js. I got broken image links when I click on the squares in the chart on the left. So I added the script to the webpage. Same broken links.

Here's the page I made using "image_x" (http://www.mayankin.com/tzolkin/tzolkin-en-v7-date.htm)

For some reason, editing the ids is messing something up.

DJCMBear
01-01-2011, 12:27 AM
Because you are not splitting the id up when you run the function for the onclick you have to split the id up so that you can use the image id number. like var imageID = Obj.id.split('_')[1];

isak
01-01-2011, 08:58 PM
I'm sorry. I do not follow what you are telling me. I don't know where this goes... in the table where the ids are?

Happy New Year all from a muddled/befuddled mind.

DJCMBear
01-01-2011, 10:01 PM
no on the function which changes the images to the right to a different set of images in that function you haven't split the id up of the item you are clicking because when you clicked on an image on the right hand side the section that is ment to say the number of the item you clicked showed image_1234 or something which shows all you are doing is calling the id of the clicked image.

How you can solve this is adding a split to the callback in the function that changes the images to the right which instead of calling the full id it will call the part after the underscore so this string var imageID = Obj.id.split('_')[1]; is just setting imageID as the id of the image that has been clicked so an id like image_4231 will set the var imageID as 4231 and not image_4231.

Does that make it more easier to understand?

isak
01-01-2011, 10:53 PM
I have to add this to the 260 squares in the left image?

DJCMBear
01-01-2011, 11:17 PM
yes unless all 260 squares use a single function to change the right images then just put it in the function.

isak
01-26-2011, 07:33 PM
I tried to apply Old Pedant's naming script (which works very well!) to the small gif above the images we gave titles to previously. They are essentially pulled into the page the same way except there are 13 images in rotation instead of 20. Here's the code I added to the two scripts that run the left and right side of the page:



document.tonoimg.src="1/tono" + tonox + ".gif"

var tones = [ "", "Magnetic Tone (1) - Attracting, identifies Purpose (initiates a Wavespell)", "Lunar Tone (2) - Polarizing, meets duality", "Electric Tone (3) - Bonding, activates service", "Self-Existing Tone (4) - Measuring, defines form", "Overtone Tone (5) - Empowering, gathers resources", "Rhythmic Tone (6) - Organizing, finds balance", "Resonant Tone (7) - Inspiring, becomes attuned", "Galactic Tone (8) - Harmonizing, attains integrity", "Solar Tone (9) - Realizing, pulses intention", "Planetary Tone (10) - Producing, manifests results", "Spectral Tone (11) - Releasing, dissolves obstacles", "Crystal Tone (12) - Cooperating, facilitates teamwork", "Cosmic Tone (13) - Transcending, expands presence (closes a Wavespell)" ];

document.tonoimg.title = tones[tonox];


Two problems I am having:
1. When I first access the page (http://mayankin.com/tzolkin/works-011411.php), I cannot see the title when I position my mouse over the gif (it's the bar and dots above the images in the right column). However, if I click on a box in the chart on the left, then hold my mouse over the gif, I can see the title.

2. When I select a date using the "select another date" option from the top of the right column, then hold my mouse over the gif, it gives me the title of the last gif that appeared when I clicked on a box from the chart on the left. It does not seem to be responding to the "select another date" action at all.

isak
01-28-2011, 10:56 PM
works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum