Problema posizione div che appare/scompare

[kairilove09]

Salve! premetto che non sono per niente un'esperta ma mi arrangio con i tutorial e quello che trovo su internet per arrangiare cosa mi serve..quindi siate pazienti!
E' da un pò che mi crogiolo con il mio problema..ho usato uno script che fa apparire al passaggio del mouse su un link, e scomparire all'andata del mouse, un'immagine. I link citati fanno parte di una mappa di immagini!
Ecco, funziona tutto, è perfetto tranne che per una cosa: mi serve dare una posizione all'immagine che appare; difatti l'immagine appare esattamente sotto la mappa...e a me servirebbe dentro la mappa (e quindi sopra l'immagine di sfondo della mappa).
Ecco il codice, questo nell'head:

<script type="text/javascript" language="javascript">
//<![CDATA[
function visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){ document.getElementById(id).style.display = 'block';
}else{
document.getElementById(id).style.display = 'none';
}
}
}
//]]>
</script>

E questo è l'oggetto nella mia pagina:

<center>
<div style="float: center;">
<map name="Map" id="Map">
<area shape="rect" coords="55,200,116,256" href="http://conogelato.jimdo.com/harry-potter/felix-felicis/" onmouseover="visualizza('immagine2'); return false;" onmouseout=
"visualizza('immagine2'); return false" />
</map>
</div>


<div id="immagine2" style="display:none">

</div>
</center>




Faccio questa distinzione poichè usando la piattaforma jimdo non ho purtroppo accesso all'intero codice html del sito

Ho provato a modificare la parte che ho evidenziato in rosso provando in due modi:

<div id="immagine2" style="position:absolute; top:100px; left:100px">
<div id="immagine2" style="display:none" "position:absolute; top:100px; left:100px"

La posizione veniva rispettata ma in un modo l'immagine rimaneva fissa, e nell'altro funzionava al contrario, cioè mentre il mouse non era sopra il link della mappa l'immagine si vedeva, e quando il mouse passava sul link l'immagine scompariva...

Come posso risolvere?
Grazie mille!

[cavicchiandrea]

E un problema css esempio:

<div id="immagine_mppa" style="margin-right:auto; margin-left:auto; width:470px;">
<div id="immagine2" style="display:none; position:absolute; margin-top:260px; margin-left:10px; z-index:10;">

</div>
 <map name="Map" id="Map">
<area shape="rect" coords="55,200,116,256" href="http://conogelato.jimdo.com/harry-potter/felix-felicis/" onmouseover="visualizza('immagine2'); return false;" onmouseout=
"visualizza('immagine2'); return false" />
</map>
</div>

[kairilove09]

Grazie mille funziona!!!!!!!!!!!!! Ti sono gratissima!!!

[kairilove09]

Senti, sai se c'è un modo per inserire un suono, che si sente quando il mouse va sull'oggetto e non si sente più quando il mouse se ne va? Chiedo qua perchè vorrei applicarlo alle stesse aree del precedente codice, e quindi magari devo integrarlo in qualche modo..non riesco a trovare uno script che vada bene per anche per Firefox e altri, e non solo per IE!
Grazie mille

[lucavizzi]

Ciao,
Dai un'occhiata qui, sembra buono:
http://www.schillmania.com/projects/soundmanager2/

[kairilove09]

Grazie ma..come dovrei usarlo per farlo funzionare quando entro nell'area cliccabile? Non è un semplice script...non ho mai fatto nulla del genere

[lucavizzi]

in effetti è un po' complicato.... ma non c'è un modo semplice che funzioni con tutti i browser, forse con jquery.

Comunque qui ti ho pubblicato un esempio:
http://www.lucavizzi.it/sound/
Ho utilizzato il codice dei post precedenti, c'è il link per scaricarlo (sono necessarie alcune cartelle).

Si potrebbe anche usare un suono diverso per ogni area.

Fammi sapere se riesci a farlo girare.

[kairilove09]

Mmh, credo di esserci ma non ho capito solo come devo usarlo..nel senso, personalizzo il suono nella cartella e poi uppo tutto quel file scaricabile (c'è altro che devo personalizzare in quell'archivio? E poi nel codice dello script , dove specifico il collegamento a suddetta cartella? E, infine, dove hai specificato che in quella zona deve sentirsi il suono? Non lo leggo da nessuna parte
PS Questo codice mi permette di avere un suono diverso a seconda dell'area o va ad applicarsi a ogni cosa cliccabile della mappa?

Scusami se sono tanto ottusa
Grazie mille per l'infinita pazienza

[kairilove09]

Ok, credo di aver capito come installarlo, e hai modificato solamente nel contenuto dell'archivio le canzoni no? correggimi se sbaglio ^^

Mi manca solo come fare per applicarlo a certe aree, come appunto hai fatto tu

Grazie mille!!!

[lucavizzi]

Ciao, scusa se non ho risposto prima.

Estrai il file compresso sound.rar

Metti la cartella "sound" (con dentro le sottocartelle mp3, script, src, swf) sulla root principale del tuo server.
(La cartella mp3 conterrà i file audio)

nel file con la mappa di immagini devi collegare un unico file:

<head>
...
<script type="text/javascript" src="/sound/script/soundmanager2-nodebug-jsmin.js"></script>
...
</head>

sempre nell'head, devi inizializzare lo script:

var mySound;
soundManager.url = '/sound/swf/'; 
soundManager.onready(function(){
  mySound = soundManager.createSound({
    id: 'aSound',
    url: '/sound/mp3/tada.wav'//qui indichi il file audio che vuoi riprodurre 
  });
});

Il tuo head apparirà all'incirca così:

<head>
   ...
   <script type="text/javascript" src="/sound/script/soundmanager2-nodebug-jsmin.js"></script>
   

<script type="text/javascript">
var mySound;
soundManager.url = 'swf/'; // directory where SM2 .SWFs live
soundManager.onready(function(){
  mySound = soundManager.createSound({
    id: 'aSound',
    url: 'mp3/tada.wav'//file audio, sono supportati vari formati: mp3, wav, ecc.
  });
});

function visualizza(id){
	if (document.getElementById){ 
		if(document.getElementById(id).style.display == 'none'){ 
			document.getElementById(id).style.display = 'block';
			mySound.play();//questo è il comando che riproduce il suono
                                          //verrà eseguito ogni volta che richiami la funzione "visualizza() con onmouseover="visualizza(id_elemento)" 
		}else{ 
			document.getElementById(id).style.display = 'none';
			mySound.stop();// Stoppa il suono onmouseout, cancella questo rigo se vuoi che il suono continui sono alla fine.
		}
	} 
} 

</script>

   ...
</head

Per rispondere alla tua domanda, con questo script, il suono viene riprodotto per ogni area sensibile che ha, nell'evento onmouseover, la funzione "visualizza".

Sarebbe possibile riprodurre il suono solo per alcune aree, o assegnare un suono personalizzato per ogni area.
Fammi sapere se vuoi ottenere un risultato diverso.