ingrandimento immagini al passaggio del mouse

[saretta_ape]

Ciao a tutti!
Ho un problema, devo realizzare dei link con un collegamento, e fin qui ci siamo, ma devo fare in modo che al passaggio del mouse su questi link, appaia un piccolo ingrandimento dell'immagine.

Praticamente, sul sito www.chicomdisplays.it,cliccando cornici a scatto,(o qualsiasi altra categoria sul lato destro) compare una pagina, dove sotto l'immagine ci sono dei link, ecco devo fare in modo che quando passo con il mouse sopra uno di quei link, mi appaia un'immagine in miniatura..Come posso fare??? Vi ringrazio per l'aiuto...
Ciao

[Admoneo]

Ecco un esempio di pulsante ROLL-OVER. Un pulsante speciale per la sua caratteristica di mutare le sue fattezze al passaggio del mouse e di riacquistarle quando il puntatore del mouse non si trova più nella superficie occupata dall'immagine del pulsante stesso.

<a href="HTML/Indice.htm"> = Decide la pagina da aprire al click del mouse, impostandone il collegamento ipertestuale.

[img]Immagini/2_su.gif[/img]</a> = Stabilisce la dimensione dell'immagine.

In caso siamo in presenza di più pulsanti roll-over nella stessa pagina, si rende necessario assegnare un numero univoco ad ogni pulsante che è quello indicato nelle parentesi quadre dopo la dicitura document images.

Ora basta che l'immagine che vui far apparire al passaggio del mouse sia della dimensione che ti serve, questo è uno dei tanti modi, potresti realizzare la stessa cosa con i CSS o con javascript.

[saretta_ape]

Ti ringrazio, sei stato gentilissimo, e sicuramente questo mi sarà utile, ma dal momento che quella che tu indichi come immagine 2_su (quando non c'è il mouse sopra) non è un'immagine, ma un testo linkato?che quando passo sopra a questo link, voglio che mi si apra un'immagine in un "fumetto" in miniatura?

Grazie mille.
Aspetto tue notizie.
Ciao

[deleted_110]

Io utilizzo un comodo script

http://boxover.swazz.org/

ti permette di mettere cio' che vuoi dentro un box che appare al passaggio del mouse (vedi gli esempi http://boxover.swazz.org/example.html ) ed e' facile da personalizzare.

Spero faccia al caso tuo

[saretta_ape]

Ciao, grazie mille, il tuo link mi è stato molto utile, però non riesco a inserire l'immagine nella finestrella.
Praticamente, io riesco a inserire del testo all'interno della finestra che si crea al passaggio del mouse, ma non riesco a inserirci l'immagine come nell'esempio dove passando su "this" si apre la finestra e si vede l'immagine del cane.

ti incollo il mio codice ma non funziona:

<span title="header=[Menuboard] body=[Menuboard]

[img]doghat2.jpg[/img]</p>] style="font-family:arial;font-size:11px;font-weight:regular;color:#ABABAB;cursorointer">Menuboard</span>

questo codice mi fa visualizzare una finestra azzurrina con scritto menuboard nell'header e nel testo, ma non il cane e il percorso dell'imagine è corretto.

E poi, un'altra cosa, come faccio a cambiare il colore della finestra che mi appare, anzichè azzurra la vorrei giallina e anche il colore del testo?io ho usato il codice javascript che c'è nel link di esempio che mi hai collegato che si chiama boxover.


Grazie mille.
Ciau

[deleted_110]

a occhio vedo una paresntesi quadra chiusa male, probabilmente e' dovuto a quello se non vedi l'immagine.

Per quanto riguarda i colori ti diro' che ho sempre usato l'effetto cosi' come e' e non ho mai approfondito tutte le funzionalita'.

Mi pare devi fare:

cssbody=[ ... qua metti lo stile del corpo del toottip ...]

e invece per l'header cssheader=[...vedi sopra...]

qualcosa del genere:

<span title="header=[Menuboard] body=[Menuboard 

[img]doghat2.jpg[/img]</p>] cssbody=[font-family:arial;font-size:11px;font-weight:regular;color:#ABABAB;cursor:pointer]">Menuboard</span>

[saretta_ape]

grazie mille, una sciocchezza di parentesi chiusa male, mi mandava nel pallone..
Per quanto riguarda il colore, non ho ben capito dove dovrei andare a toccare..Scusa ancora se ti chiedo, ma io ho questo codice javascript:


function defHdrStyle() {
dvHdr.innerHTML='[img]info.gif[/img]'+dvHdr.innerHTML;
dvHdr.style.fontWeight='bold';
dvHdr.style.width='150px';
dvHdr.style.fontFamily='arial';
dvHdr.style.border='1px solid #A5CFE9';
dvHdr.style.padding='3';
dvHdr.style.fontSize='11';
dvHdr.style.color='#4B7A98';
dvHdr.style.background='#D5EBF9';
dvHdr.style.filter='alpha(opacity=85)'; // IE
dvHdr.style.opacity='0.85'; // FF
}

function defBdyStyle() {
dvBdy.style.borderBottom='1px solid #A5CFE9';
dvBdy.style.borderLeft='1px solid #A5CFE9';
dvBdy.style.borderRight='1px solid #A5CFE9';
dvBdy.style.width='150px';
dvBdy.style.fontFamily='arial';
dvBdy.style.fontSize='11';
dvBdy.style.padding='3';
dvBdy.style.color='#1B4966';
dvBdy.style.background='#FFFFFF';
dvBdy.style.filter='alpha(opacity=85)'; // IE
dvBdy.style.opacity='0.85'; // FF
}

dove secondo me bisognerebbe andare a mettere mano per i colori, poi c'è un altro sacco di comandi, ma nessuno di quelli sembra identificare un colore.

Ma dal momento che cambio i colori in questi comandi che sopra ti ho citato, non accade nulla..

Grazie mille ancora..
Ciau

[deleted_110]

guarda, non c'e' assolutamente bisogno di andare a toccare le librerie javascript.

Fai tutto usando i modificatori messi a disposizione dalla libreria.

Crei coi CSS una classe che ad esempio chiamerai mioriquadro in cui metti tutti gli stili che ti servono.

e poi dentro il tag title (dove hai messo anche header="menuboard" etc...) metti questo

cssbody=[mioriquadro]

Se guardi l'esempio che c'e' nel file zip che hai scarcato vedrai che e' tutto chiaro. Altrimenti dammi un link alla pagina che provo a vedere dove sbagli

[saretta_ape]

Ciauuu..GRAZIE MILLE!!!!Ci sono riuscita..ho inserito una classe mioriquadro e mioheader per dargli caratteristiche differenti e le ho attribuite come mi hai detto e finalmente viene!!!
GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...GRAZIE MILLE...
Sei stato gentilissimo..

Comunque il sito che sto realizzando è www.chicomdisplays.it, ma ora se vai a guardarlo non ci sono tutte le modifiche che ho appena apportato, perchè carico tutto sull'ftp la sera..

Ancora grazie mille!!

Ciau Sara

[deleted_110]