problemi con swapImage e onmouseover

**Tomas_T** · 31-12-2008, 02:07

ciao a tutti!!
ho appena iniziato a fare delle prove con le mappe immagini e con gli eventi legati al mouse( onclick, onmousedown...).
sono riuscito a fare in modo che quando il mouse passa sopra un immagine ne viene visualizzata un altra, uguale, nello stesso punto, con una parte sotto in più...questa parte l'ho fatta diventere un link tramite mappa...volevo afre in modo che andando sopra questa area venisse visualizzata un'altra immagine uguale alla seconda ma con il link evidenziato...
leggendo in giro ho visto che si dovrebbe usare uno swapimage...
cosè??
c'è un modo per fare quello che vorrei fare??
allego un immagine molto approssimativa di quello che dovrebbe succedere.

quello che ho scritto

[img]collegamenti.jpg[/img]

<map name="collegamento" id="collegamento">
<area alt= collegamento3 shape="rect" coords="66,25,158,46" href="collegamento3.html>
</map>

**Enzo (Strayst.)** · 31-12-2008, 03:57

Prova con immagini ben distinte, si capisce meglio cosa succede.
Ora queste, sono 500x335px e il punto caldo va a finire in alto a sinistra.

Se privi il map della riga con l'evento onMouseOver, vedi che l' area calda stessa costituisce un momento di onMouseOut per il Tag IMG: ti ritorna l'immagine di partenza benché teoricamente sei ancora onMouseOver.

codice:

<html>
<head><title>turning maps</title>

</head>
<body bgcolor="#D0D090">
<div align="center">
            






<map name="collegamento" id="collegamento">
 <area alt="collegamento3" shape="rect" coords="66,25,158,46" 
  onmouseover='document.images[0].src="http://www.cameraworkphotographers.com/003ITALIA.jpg";'
  href="http://forum.html.it/">
</map> 

  
  
  
  
            

</div>

</body>
</html>

P.S.: All'interno del Tag IMG puoi anche usare this in luogo della localizzazione assoluta document.images[0]
onmouseout = "this.src='image.jpg';"
in quanto sei già in quel determinato Elemento.

Dimentichi l'apice di chiusura in href="collegamento3.html

**Enzo (Strayst.)** · 31-12-2008, 05:19

Acc ..

Quanto sopra, testato con Netscape;
con IExplorer 7 (XP) il comportamento è diverso, però:
l' handler of event onMouseOver non funziona con il Tag <area>
quindi il Link mappato funziona, ma non entra in campo la terza immagine.

Forse è fattibile un work around con i DIV

**Tomas_T** · 31-12-2008, 15:42

ho provato a fare come hai detto....non funziona...(hai detto anche questo^^)
come faccio allora??
esiste un modo??

**Enzo (Strayst.)** · 31-12-2008, 18:40

Riassumendo, hai codificato un Link su un' immagine con l' image mapping; in più, all'entrata del mouse nel campo generale d' immagine, e prima ancora che questi raggiunga l' area "calda" il gestore d' evento onMouseOver cambia il SRC al campo medesimo, per cui carica un file.jpg sostitutivo che sottostà alla medesima mappatura d' immagine legata al Tag IMG; e sin qui non sorgono problemi.
Il passo successivo sarebbe il click sull' area calda e parte il collegamento.html

Ora è qui che tu vorresti introdurre un ulteriore "intermezzo" con un terzo file.jpg sostitutivo che viene caricato al passaggio del mouse sull' area calda; questo in parole povere si traduce nel (tentare di) gestire l' evento onMouseOver nei Tag AREA o MAP; ma abbiamo visto, non tutti i Browser lo garantiscono e l' area rimane deputata a ricevere un classico click di tipo not-javascript-event.
Difatti un Link a mappatura d' immagine funziona anche con JavaScript disabilitata sul Browser, come un classico [img][/img] .

Una via alternativa può essere questa; che abbandona l' image mapping.
La "striscia sottostante" dell'immagine si aggiunge a parte, quella sopra resta invariata; quindi ti devi preparare due ritagli della parte aggiuntiva, uno "normale" e l'altro "evidenziato".

Qui abbiamo due Tag IMG e le immagini sono già presenti entrambe una sopra l' altra, quella iniziale ed il ritaglio da aggiungere; solo che questa è tenuta ad 1px di altezza e non la vedi.
Sostituisci '30' con l' altezza nativa in pixel dell' appendice.

codice:

<html>
<head><title>turning maps</title>

</head>
<body bgcolor="#D0D090">
<div align="center">
            



[img]base.jpg[/img]
[img]appendice1.jpg[/img]


            

</div>

</body>
</html>

Se questo ti risulta fattibile, dopo possiamo implementarlo anche per gestire più appendici, se è caso di un menù di navigazione come pare essere.

**Enzo (Strayst.)** · 31-12-2008, 19:21

Si potrebbe anche giocare con i soli SRC come nel proposito iniziale, se non che in assenza di immagine disponibile (SRC senza Valore) i Browser mostrano quel quadratino di segnalazione; questo andrebbe ad apparire in luogo dell' appendice, inizialmente.

L' aggiunta dell' attributo alternate text ALT="" lasciato vuoto risolve il problema con molti Browser ma non con IExplorer che continua a mostrare il cartiglio;
qualunque che sia il !DOCTYPE (HTML o XHTML) o il flavour (Strict o Transitional).

Per cui, anche questa via rimane percorribile, ma si deve approntare un' immagine "di simulazione" per non lasciare vuoti i src=""
Una .jpg alta 1px e dello stesso colore dello sfondo e larga anche quanto la soprastante evitando (per IExplorer) che il puntatore trasferendosi sull' altro campo incontri un "momento di vuoto" che traduce in un evento onMouseOut troncando la sequenza.
Con IExplorer nell' esempio sotto, difatti devi rimanere a scorrere sul cartiglio di assenza-immagine, altrimenti sembra che non funzioni niente. Ci vuole la predetta .jpg di default.

Il vantaggio del sistema precedente (appendice pronta ma tenuta ad 1px height), starebbe nel fatto che entrambi i file.jpg vengono caricati con la pagina e ciò assicura l' eliminazione di ogni gap di attesa-download allorché la seconda deve visualizzarsi.
Nel tuo caso tuttavia, dovrebbe trattarsi di appendice1.jpg assai "leggero" per cui è accettabile anche il sistema della semplice turnazione dei Valori di SRC.
Al contrario l' esempio sotto, carica .jpg relativamente "pesanti", attorno ai 150Kb, e se lo testi con un Browser che ancora non ha cached queste foto, potresti notare ritardo/assenza nella visualizzazione onMouseOver .

codice:

<html>
<head><title>turning SRCs</title>

</head>
<body bgcolor="#D0D090">
<div align="center">
            




[img][/img]


            

</div>

</body>
</html>

**Tomas_T** · 01-01-2009, 16:50

grazie per i consigli!!
ho provato il primo e tutto mi è riuscito...
adesso però avrei altre richieste...
allego la solita immagine per farmi capire meglio...(scusate la bassa qualità ma altrimenti non potevo allegarla)
le richieste sono le seguenti:
- è possibile fare in modo che la striscia di un pixel che rimane sotto l'immagine sia del colore dello sfondo e poi una volta che si apre diventi di un colore da te scelto??

- mi potete dire come realizzare la situazione presentata nell'immagine?quale è il modo migliore??

nell'immagine al passaggio del mouse sulla scritta "collegamento1" si apre quel sottomenù con "collegamentoA, collegamentoB" che sono due link differenti.In più al passaggio del mouse su uno di questi due il link viene evidenziato.
Quando invece si passa sopra "collegamento2" si chiude il precedente sottomenù e si apre quello con "collegamentoC, collegamentoD". Qui aviene la stessa cosa di prima.
In più se è possibile vorrei sapere come fare se, eventalmente, vorrei aggiungere "x" collegamenti principali( 1,2,3,4,5,6....) con rispettivi sotto livelli (A,B,C,D,E,F...).
spero non sia una cosa troppo complicata...grazie in anticipo

**Xinod** · 01-01-2009, 19:54

quante complicazioni,
ma tu sei proprio sicuro di aver bisogno di immagini e di image maps?
scenari simili a quello illustrato nell' esempio si risolvono con i soli css, in maniera semplice e accessibile

**Tomas_T** · 01-01-2009, 22:25

in realtà no...infatti ho anche chiesto quale è il metodo migliore...

non mi menate per questo!!!

**Enzo (Strayst.)** · 01-01-2009, 22:25

Avevo già a mente di postare un esempio di realizzazione basato su questa proprietà di stile gestita da javascript.
Permette di far apparire/scomparire singoli Elementi od interi blocchi di contenuto, generalmente racchiusi all' interno di un DIV; DIV che JS deve poter trovare e per questo nel nostro esempio, abbiamo conferito uno specifico distinto ID a ciascun DIV.
Attenzione a (non) usare NAME poiché non tutti i Browser lo ammettono con l' Elemento DIV.

Lasciando momentaneamente stare l' impiego di immagini nella realizzazione della pulsanteria, ti posto un menù+sottomenù fatto di TABLE e caratteri di testo.
L' apertura dei sottomenù richiede il click, onMouseOver ed onMouseOut agiscono solo per la colorazione/evidenziazione; estendere queste azioni anche all' apertura/chiusura dei sottomenù complica leggermente lo schema, e vedremo in seguito.

La TABLE vera e propria del menù è a sua volta contenuta entro una prima TABLE che con TD BGCOLOR="" conferisce un colore di sfondo al proprio contenuto, appunto.
Si potrebbe fare direttamente TABLE BGCOLOR="" come in passato, funziona sempre, ma ufficialmente era poi stato deprecato (un paio d' anni fa +/-).

codice:

<html>
<head><title>display sub-list</title>

<script type="text/javascript">

function subMenu(which) { //alert('');
     if (document.getElementById(which).style.display=="none"){
         document.getElementById(which).style.display="block";
   } else {
         document.getElementById(which).style.display="none";
   }
 }
 
</script>

<style type="text/css">
.menùLink {
 color: #EFEFEF;
 text-decoration: none;
 }
</style>

</head>
<body bgcolor="#909090">

<div align="center" style="border: 1px dashed yellow;">
            



<table border="0" cellpadding="0" cellspacing="0"><tr>
<td bgcolor="#444440">               



<table border="0" cellpadding="6" cellspacing="0"><tr>
 <td>
 </td>
 </tr><tr>
 <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>collegamento 1 &#38;#160; &#38;#160; &#38;#160;
 </td>
 </tr><tr>
 <td>
    <div id="sub1" style="display: none;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
     <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#38;#160; &#38;#160; collegamento A</td>
     </tr><tr>
     <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#38;#160; &#38;#160; collegamento B</td></tr>
    </table>
    </div>
 </td>
 </tr><tr>
 <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>collegamento 2 &#38;#160; &#38;#160; &#38;#160;
 </td>
 </tr><tr>
 <td>
    <div id="sub2" style="display: none;">
    <table border="0" cellpadding="0" cellspacing="0"><tr>
     <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#38;#160; &#38;#160; collegamento C</td>
     </tr><tr>
     <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#38;#160; &#38;#160; collegamento D</td></tr>
    </table>
    </div>
 </td></tr>
</table>



</td></tr>                                 
</table>
 
</div>

  <a href="http://www.html.it/" target="_blank">Esempio LINK COMUNE - Lo STYLE CLASS="menùLink"

                                                conferito ai Link del menù a tendina, rimane esclusivo di questi.</a>


</body>
</html>

Con questo esempio vedi come è possibile creare una classe di stile anche per i Link, per l' Elemento A quindi.
Forse sarebbe meglio evitare l' uso della ù accentata in class="menùLink" non si sa mai la reazione imprevista di qualche Browser.

L' indentazione è stata ottenuta con l' aggiunta di caratteri di spazio vuoto &#160; o &nbsp;
<small> potrebbe starci bene per ridurre il carattere nei sottomenù.

Gioca sui Valori nei cellpadding="6" per vedere come può cambiare l' aspetto, le spaziature.

P.S: Ti ricordo che devi ricomporre class="menùLink" href="java-script: subMenu('sub1');" togliendo il trattino - che il sistema del Forum aggiunge.

Discussione: problemi con swapImage e onmouseover

Strumenti discussione

Ricerca discussione

Visualizza

problemi con swapImage e onmouseover

IExplorer vs. Netscape/Firefox

sliced image

still turning SRC 's

DISPLAY none/block/inline STYLE Property

Permessi di invio