[HTML/SCRIPT]come si ottiene l'effetto di un "alt="dinamico associato ad un'immagine

[vici_1]

facendo scorrere il cursore su un'immagine , o meglio su una pagina html, come posso ottenere l'effetto, al passaggio del mouse su di un dato punto, di far comparire una descrizione associata al contenuto di quel punto ?
L'immagine in allegato e' cio' che vorrei ottenere.
Da notare che guardando l'allegato e' molto piu' chiaro di cosa sto parlando ; facendo scorrere il mouse a dx o sx per ogni candela del grafico si ottiene una descrizione con i dati relativi alla candela.
So gia' come ricavare la posizione del mouse con una script :

function PosizioneCursore()
{
var asse_x = event.clientX;
var asse_y = event.clientY;
}

quindi so dov'e' in ogni istante il mouse nella finestra, ma per memorizzare i dati ed esporre la descrizione dinamica in ogni punto come potrei fare ?

[GHz]

Propongo una soluzione che può sembrare "grezza" ma che potrebbe funzionare se i messaggi da visualizzare non sono tanti. Se invece vuoi visializzare i valori del grafico punto per punto non va bene.

Praticamente dovresti dividere l'immagine in tanti quadratini quanti te ne servono ed inserirli in una tabella.
Poi usando QUESTO (http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm) script, inserisci il codice nelle celle dove vuoi che spunti il messaggio e sei a posto :)

Ciao,
GHz

[pinok]

Domanda: ma la posizione del mouse la ottieni relativa all'immagine o allo schermo/pagina? Perché se è relativa all'immagine:

1)Per esporre la descrizione in un punto, visto che già ottieni le coordinate, ti suggerirei di usare un layer da nascondere/posizionare/visualizzare all'occorrenza.
2)Per individuare la candela giusta, dovresti farti una tabella che mappi per ogni range di valori la descrizione, in modo da verificare se il punto si trova all'interno.

Se le candele sono quelle del grafico, cioè non si sovrappongono, puoi pensare di suddividere l'immagine se non in quadratini, in ritagli che conengono la candela, in modo da associarci la descrizione ad ognuna.

[vici_1]

Propongo una soluzione che può sembrare "grezza" ma che potrebbe funzionare se i messaggi da visualizzare non sono tanti. Se invece vuoi visializzare i valori del grafico punto per punto non va bene.

Praticamente dovresti dividere l'immagine in tanti quadratini quanti te ne servono ed inserirli in una tabella.
Poi usando QUESTO (http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm) script, inserisci il codice nelle celle dove vuoi che spunti il messaggio e sei a posto :)

Ciao,
GHz
Infatti il problema e' che le candele sono tante , quanti i giorni lavorativi in un anno, l'immagine e' lunga 1870 pixel X 680. Oltre tutto l'immagine del grafico la costruisco in PHP dinamicamente come risposta ad una richiesta.
L'esempio che ho allegato l'ho preso da un sito dove riescono a fare cio' che mi sto prefiggendo. Ho il sospetto che abbiano utilizzato java.

Domanda: ma la posizione del mouse la ottieni relativa all'immagine o allo schermo/pagina? Perché se è relativa all'immagine:

1)Per esporre la descrizione in un punto, visto che già ottieni le coordinate, ti suggerirei di usare un layer da nascondere/posizionare/visualizzare all'occorrenza.
2)Per individuare la candela giusta, dovresti farti una tabella che mappi per ogni range di valori la descrizione, in modo da verificare se il punto si trova all'interno.

Se le candele sono quelle del grafico, cioè non si sovrappongono, puoi pensare di suddividere l'immagine se non in quadratini, in ritagli che conengono la candela, in modo da associarci la descrizione ad ognuna.

La posizione del mouse e' relativa alla pagina , ma cmq so dov'e' l'immagine perche' la genero io dinamicamente.
Creare 250 e piu' immagini(una x ogni candela) diventa un problema di gestione delle richieste al server , perche' io creo il grafico in risposta e per fare questo, usando le sessioni in php, gestisco i file temporanei sapendo sempre chi mi richiesto il grafico. se spezzo l'immagine e ho 50 utenti che accedono al sito diventa un problema gestire i file temporanei per assolvere alle richieste.In effetti avevo in mente di creare una tabella dove memorizzo le coordinate delle candele(visto che le disegno io) ed il messaggio da esporre. Il mio dubbio e' proprio quest'ultimo come espongo dinamicamente i dati intabellati ?

Cmq qualcosa di simile l'ho gia' attivato se volete vedere basta provare www.analisitecnica.altervista.org, richiedete un grafico a caso, e sul grafico posizionate il cursore sulla bandina scura in basso.
Vorrei che quello che e' esposto passando sui quadratini apparisse passando sulle candele o barre visualizzate.

[pinok]

Non mi viene in mente altra soluzione che mappare l'area dell'immagine.
In pratica, quando generi l'immagine, non solo calcoli il grafico, ma recuperi le coordinate usate per disegnare il grafico per una mappatura dello stesso, diciamo le coordinate dei rettangolini che "contornerebbero" le candele (o barre).
Poi l'immagine la usi com'è e in più ci aggiungi la mappatura dell'area.
Ti mando un semplice esempio in HTML, come punto di partenza.

<img SRC="myImg.gif" BORDER=0 height=113 width=550 usemap="#map1"></center>
<map name="map1">
<area href=http://www.link1_SeVuoi.it alt="descrizione 1" shape=rect coords="70,8,470,40">
<area href=http://www.link2_SeVuoi.it alt="descrizione 2" shape=rect coords="464,0,517,63">
</map>

Se non ti interessa creare un link, probabilmente puoi togliere l'href oppure metterlo = "" (ma in questo caso rischi un reload, da verificare).
Se non funziona né togliendolo né mettendolo = "", prova a metterci un onClick che richiama una funzione che non fa nulla o a matterci href="javascript: funzioneCheNonFaNulla();"

Fammi sapere, sono curioso ;)

[vici_1]

Grazie infinite.
Funziona benissimo con "map".
Ecco come ho adattato il codice che mi hai suggerito trasformato in PHP

print('<img src="immagini/titolo' . "$ss" . '.png" width="1870" height="690" border="0" alt="" usemap="#valori">');

print('<MAP name="valori">');

$posx = 52;

while (!feof ($fv)) {
$recfv = fread ($fv, 32);
for($i=0; $i<32; $i++) {
if($recfv{$i}==' ') {
$recfv{$i} = '*';
}
}
$posx = $posx + 6;

$posx1 = $posx + 6;
print('<AREA shape="rect" alt="' . "$recfv" . '" coords="' . "$posx" . ',50,' . "$posx1" . ',665">');

}
fclose ($fv);
print('</MAP>');



Ho tolto href e non ho avuto problemi perche' avevo gia' una gestione del click tasto del mouse e quindi entra in quel giro. Se non avessi avuto tale gestione sicuramente si poteva risolvere come da te suggerito con la funzione di script vuota.

[pinok]

Grazie infinite.
Funziona benissimo con "map".
Ecco come ho adattato il codice che mi hai suggerito trasformato in PHP

Bene, mi fa piacere. A vedere il codice mi sembra davvero che abbia richiesto un minimo intervento a fronte di un risultato molto funzionale.