Newsgroup: it.comp.lang.javascript
Titolo: Problema con <span> generati tramite DOM

Salve a tutti,
non sono un esperto in JavaScript e al mio primo tentativo di
realizzare qualcosa di più complesso mi sono arenato.
L'idea era quella di fare una foto gallery per il mio sito web in
javascript che permetta di aggiornare rapidamente i contenuti senza
mettere mai mano all'HTML e senza richiedere supporto server-side.
Dentro un file XML scrivo l'elenco delle immagini e una breve
descrizione. In seguito basta editare l'XML e aggiungere le foto; il
file XML viene caricato tramite AJAX, fin qui nessun problema.
Il problema sorge nel disegnare le anteprime delle immagini; in
pratica vorrei creare una struttura del tipo (almeno in prima istanza,
fatta funzionare questa vorrei qualcosa di più complesso, ad esempio
per generare uno sfondo
da usare come cornice dell'immagine)
<span> <a href...> <img...></img> </a> </span> per ognuna delle
immagini che andranno a popolare
il div contenitore. Questa struttura perfettamente funzionante se la
scrivo in HTML statico, generata tramite DOM
mi non funziona correttamente; i margini dello span non vengono
rispettati, il bordo della cornice attorno
collassa all'interno dell'immagine (!) nonostante le dimensioni dello
span siano uguali a quelle dell'immagine etc...
Se sostituisco allo span un div funziona correttamente, ma ognuna
delle antemprime è su una nuova riga, cosa che ovviamente vorrei
evitare. Un div con display: inline causa lo stesso problema dello
span.
Qualche consiglio ? Allego la parte di codice incriminato.
Se risolvo quando avrò completato la libreria la metterò a
disposizione di tutti :-)
Grazie
function drawThumbnail(number){
	var img = createImage(images[number].LRsrc,images[number].title);
	img.setAttribute('width', sizex);
	img.setAttribute('height', sizey);
	var anchor = document.createElement('a');
	anchor.setAttribute('href', images[number].HRsrc);
	anchor.setAttribute('target', '_blank');
	anchor.appendChild(img);
	var span = document.createElement('span');
	span.style.width = sizex + 'px';
	span.style.height = sizey + 'px';
	span.setAttribute('id', 'thumb_' + number);
	span.setAttribute('onmouseover', 'viewLegend(this,\'' +
images[number].title + '\',\'' + images[number].comments + '\');');
	span.setAttribute('onmouseout', 'clearLegend(this);');
	span.appendChild(anchor)
	ele.appendChild(span);
}

 span.
risolto...ehmm colpa della mia ignoranza, non sapendo che gli elementi
inline non hanno come unica differenza l'andare a capo rispetto ai
block, ma anche altre cosettine sgradite :-)

...tuttavia ora ho un altro problema e per quanto ci abbia sbattuto la
testa più volte non sono riuscito a risolverlo.
Il codice seguente funziona con tutti browser che ho provato (Camino,
Firefox sia per windows che per mac, Safari) tranne
Internet Explorer.
In pratica genera dentro un DIV una serie di contenitori che
contengono un'immagine cliccabile, affiancati in linea finché nel DIV
c'è spazio
e separati solo dai pixel del loro margine. Cliccando sopra si apre un
link, mentre passandoci sopra il mouse appaiono delle informazioni
(vedere onmouseover). Tuttavia con IE succedono due cose:
1) Le immagini sono tutte appiccicate, il margine non viene applicato
2) Questione più GRAVE: le funzioni onmouseover NON funzionano. Non
vengono chiamate proprio! E' come se tutti gli attributi del DIV
generato, margini, dimensioni, funzioni associate non esistessero per
IE. Mi chiedo se il Div stesso esista...
Sto impazzendo per questa cosa, qualche idea ?
function drawThumbnail(number){
	// Immagine
	var img = createImage(//parametri);
	img.setAttribute('width', sizex);
	img.setAttribute('height', sizey);
	// Link
	var anchor = document.createElement('a');
	anchor.setAttribute('href', //parametri);
	anchor.setAttribute('target', '_blank');
	anchor.appendChild(img);
	// Contenitore
	var span = document.createElement('div');
	span.style.display = 'inline';
	span.setAttribute('style', 'margin: 5px; border: 2px solid black;
float: left');
	span.style.width = sizex + 'px';
	span.style.height = sizey + 'px';
	span.setAttribute('id', 'thumb_' + number);
	span.setAttribute('onmouseover', 'viewLegend(this);');
	span.setAttribute('onmouseout', 'clearLegend(this);');
	span.appendChild(anchor);
	//
        Inserisci nella pagina
	ele.appendChild(span);
}

 }
ah, io cambierei nome a quella variabile 'span', io eviterei sempre nomi
"riservati al HTML" e poi è traviente perche in realtà si tratta di un div

 "riservati al HTML" e poi è traviente perche in realtà si tratta di un div
...perché era uno span inizialmente :-) poi ho capito che con lo span
non si può fare e sono passato al div + float.
Grazie, ciao

 Grazie, ciao
Prego