adattare funzione onmouseover a chrome e firefox

**w.ve** · 30-01-2012, 19:44

buonasera,
sono nuova e spero di aver cliccato sulla giusta sezione.
ho creato una immagine cliccabile, quando passo sui link questi si devono illuminare (attraverso la funzione onmouseover mi carica direttamente un'altra pagina con l'immagine-link colorata). con internet explorer il codice funziona, mentre con google chrome e firefox tende a non illuminare le immagini.
non vorrei utilizzare i css perchè devo integrare questo codice in un generatore di siti.
è possibile, secondo voi poterlo adattare agli altri browser?

<html>
<head>
<title>
prova
</title>

</head>

<body>

[img]mappa.gif[/img]
<map name="mappa">

<area shape="poly" coords="553,331,759,460,757,479,723,509,500,377,55 3,331" href="1.html" target="_top"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()">

<area shape="poly" coords="406,516,507,439,511,560,407,635,408,515" href="2.html" target="_top"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()">
</map>

<script type="text/javascript">
function RollMapOn(i)
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa_" + i + ".gif";
}
function RollMapOff()
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa.gif";
}
</script>

</body>
</html>

grazie mille!

**lucavizzi** · 30-01-2012, 22:18

Ciao

basta sostituire:
[img]mappa.gif[/img]

con
[img]mappa.gif[/img]

**w.ve** · 31-01-2012, 11:05

grazie mille tutto risolto!!
secondo te è possibile fare la stessa identica cosa evidenziando le immagini-link con onmouseover evitando di caricare ogni volta l'immagine modificata? ho notato che con firefox l'effetto viene un po' rallentato.
grazie!

**lucavizzi** · 31-01-2012, 11:42

viene rallentato perche la pagina non ha pronta l'immagine
"mappa_" + i + ".gif"

bisognerebbe precaricarla.

codice:

var preload=new image();
preload.src="mappa_1.gif";

**w.ve** · 31-01-2012, 12:18

scusa l'ignoranza estrema,
ma questo codice, come e dove, dovrei inserirlo?
ho provato a sostituire il precedente "mappa_" + i + ".gif"
con quello da te inserito ed ho provato anche ad inserirlo prima del su scritto codice.
non funziona!
come va inserito?
scusami!

**lucavizzi** · 31-01-2012, 14:54

Figurati...

il codice per il preload, essendo javascript, va inserito nel tag <script>.

Visto che le immagini da precaricare sono più di una ti scrivo un ciclo che le precarica tutte.
Presumo che le varie immagini abbiano come nomi:
mappa_1.gif, mappa_2.gif, mappa_3.gif, ecc.

codice:

<script type="text/javascript">
//Facciamo finta che tu debba precaricare da mappa_1.gif a mappa_10.gif
var numeroImmagini=10; 
var imageObj = new Image();
for(var i=1; i<=numeroImmagini; i++) {
     imageObj.src='mappa_'+i+'.gif';
}

 function RollMapOn(i)
 {
 var IMG = document.getElementById("immagine");
 IMG.src = "mappa_" + i + ".gif";
 }
 function RollMapOff()
 {
 var IMG = document.getElementById("immagine");
 IMG.src = "mappa.gif";
 }
 </script>

**w.ve** · 31-01-2012, 16:55

ti ringrazio, però purtroppo con firefox ancora mi fa quel piccolo difetto: è come se premessi ogni volta f5 per aggiornare.

inoltre sto cercando di fare in modo che passando sopra alle immagini con il mouse mi si dovrebbe aprire una finestra alla destra del monitor lunga tutta la pagina web e larga 10 centimetri e questa dovrebbe sparire quando mi sposto da lì con il mouse.

purtroppo mi appare sulla sinistra del sito e non riesco a farla chiudere quando mi sposto con il mouse! inoltre con firefox non funziona, mentre con chrome si!!

ecco il codice:
<html>
<head>
<title>
prova
</title>

<script type="text/javascript" language="JavaScript">

function winOpen(URL, windowName, width, height, left, top, resizable, location, menubar, scrollbars, status, toolbar, directories){
var windowFeatures;
windowFeatures = '';
if (width != '')
windowFeatures = windowFeatures+'width='+width+',';
if (height != '')
windowFeatures = windowFeatures+'height='+height+',';
if (left != '')
windowFeatures = windowFeatures+'left='+left+',';
if (top != '')
windowFeatures = windowFeatures+'top='+top+',';
if (resizable)
windowFeatures = windowFeatures+'resizable,';
if (location)
windowFeatures = windowFeatures+'location,';
if (menubar)
windowFeatures = windowFeatures+'menubar,';
if (scrollbars)
windowFeatures = windowFeatures+'scrollbars,';
if (status)
windowFeatures = windowFeatures+'status,';
if (toolbar)
windowFeatures = windowFeatures+'toolbar,';
if (directories)
windowFeatures = windowFeatures+'directories,';
window.open(URL, windowName, windowFeatures);
}

</script>

</head>

<body>

[img]mappa.gif[/img]
<map name="mappa">

<a href="" onmouseover="winOpen('1.html', 'prova', '200', '800', '', '900', false, false, false, false, false, false, false);return false;" onmouseout="javascript:weblink.close();">
<area shape="poly" coords="553,331,759,460,757,479,723,509,500,377,55 3,331" target="_top"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()">
</a>
<a href="" onmouseover="winOpen('2.html', 'prova', '200', '800', '', '900', false, false, false, false, false, false, false);return false;" onmouseout="javascript:weblink.close();">
<area shape="poly" coords="406,516,507,439,511,560,407,635,408,515" target="_top"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()">
</a>
</map>

<script type="text/javascript">
//Facciamo finta che tu debba precaricare da mappa_1.gif a mappa_10.gif
var numeroImmagini=10;
var imageObj = new Image();
for(var i=1; i<=numeroImmagini; i++) {
imageObj.src='mappa_'+i+'.gif';
}

function RollMapOn(i)
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa_" + i + ".gif";
}
function RollMapOff()
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa.gif";
}
</script>

</body>
</html>

scusa, ne sto approfittando un po' troppo!
grazie mille!

**lucavizzi** · 31-01-2012, 20:37

In firefox c'è la consolle degli errori per il debug.

Discussione: adattare funzione onmouseover a chrome e firefox

Strumenti discussione

Ricerca discussione

Visualizza

adattare funzione onmouseover a chrome e firefox

Permessi di invio