JS zobrazi alt do obrazku

Zakladni problem je to umisteni napisu, img opravdu nema innerHTML, muselo by se to navazat na nejaky vyssi system souradnic - pokud by napriklad poloha obrazku byla znama vuci nejakemu divu tak je vyhrano, Leo

No da se umistit ten popisek vuci kurzoru mysi, ale vy potrebujete vuci obrazku. Pokud nechcete pouzit div kvuli tomu, aby se to samo radilo do radku tak co treba span? :-) Leo

Ten span by mel obepnout primo obrazek, na span navesite onmouseover a onmouseout, ktery udela tu vec, ze se koukne jestli je v tom spanu img, pokud ano, nacte jeho alt, title, width a height, a zobrazi to v systemu souradnic toho spanu, akorat musi mit position: relative, Leo

No v tom pripade je to jeste jednodussi, proste se JavaScriptem projdou v class galerie ty spany, a aplikuje se to na ne natvrdo. Span by nemel obklopit radek, neni to blokovy element. Staci zkusit

.galerie span {border: solid 1px red}

Leos Ondra

Je mozny, ze vytvoreni systemu souradnic pres position: relative nezabira u inline elementu jako je span, tezko rict, Leo

Hele, zkoušel jsem a funguje:

span {padding:100px 0 0 100px; position:absolute}

<span>Text zadaný scriptem přes innerHTML</span>
<img src=".... >

Místo těch stovek to můžeš taky měnit JS, pokud obrázky nejsou stejně velký.

Vyska podle radku nevadi, muzete v tom spanu prece umistovat text pres position: absolute, bottom a right misto top a left, treba, Leo

Leo A nebo tak, jasně. :o)

Ak by ti nevadilo, ze obrazky su v DIVoch, ktore sa nafloatuju, tak pozri sem.

Bohuzial neexistuje DOM funkcia getElementsByClassName, preto na to treba ist trocha inak. V cykle treba prejst vsetkymi prvkami stranky a funkciu putAlt() spustit len pri tych, ktore maju pozadovany class.

Je to teda na viac ako jeden riadok, preto pozri znova tu moju linku, je to upravene.

innerHTML sa neodporuca, ale teraz ti fakt nepoviem preco :-)
ja som si uz zvykol maximalne vyuzivat DOM funkcie. Ale ak ti innerHTML vyhovuje viac (a spapaju ho aj prehliadace), tak nevidim problem.

No asi bych se v tomhle případě buď vykašlal na js úplně i ty spany neksou nic moc. viz http://www.alsacreations.com/blog/billets/arriere-plan.htm
Nebo bych použil js jen pro IE, aby si vyzobnul alt javascriptem a pro ostatní prohlížeče nějaké ty css triky

img[alt]:after {content:"alt="attr(alt) !important;display:block !important;background:red !important;color:yellow !important;}

Čtu si ten script, je sice asi bez problémů, ale budeš tam kvůli těm altům , vypisovat navíc ty zbytečný spany , na tom alsacreation, sice vypisuješ odstavce, ale je to aspoň trochu sématické a přáteské vůči vyhledávačům, když použiješ img[alt]:after {content:attr(alt) !important;display:block !important;} tak se zase nezobrazí v IE. No ale podle toho kódu výše se zdá, že to je thunbnailová galerie a tam by jsi to mohl udělat ještě mnohem lépe, jestli jsou to teda ty náhledy. Místo spanu stačí vázat ten script na href a title

function extract() {
var gal = document.getElementById('gal')
var odkazy = gal.getElementsByTagName('a');
for (var i = 0; i < odkazy.length; i++) {
var popisek = odkazy[i].getAttribute('title');
if (popisek != '') {
var x = document.createElement('span');
x.appendChild(document.createTextNode(popisek));
odkazy[i].className = 'info';
odkazy[i].removeAttribute('title');
odkazy[i].appendChild(x);
}
}
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
addEvent(window, 'load', extract);

<p id="gal">
<a href="index.htm" title="text co se zobrazí ve spanu">
<img alt="text" src="obr.gif" height="100" width="100" />
</a>
<a href="index.htm" title="text co se zobrazí ve spanu 2">
<img alt="text" src="obr2.gif" height="100" width="100" />
</a>
</p>

No už je to trochu mimo mísu, ale výše mě zaujalo toto:

text='<i>'+'aaa'+'</i>';
xspan.innerHTML=text;

To je trochu kostrbatý, ne?

text='<i>aaa</i>';
xspan.outerHTML=text;

No ale teď už je to stejně jedno :o)