Back to top

Autore Topic: rollover multiplo su mappa immagine e effetto fade  (Letto 3357 volte)

Offline renatopace

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
rollover multiplo su mappa immagine e effetto fade
« il: 02 Ago 2012, 14:13:47 »
 In questo sito c’è un rollover multiplo su mappa immagine.
Vorrei che le 4 immagini richiamate dal rollover non appaiano di scatto ma con un fade-in.
Come posso fare?
I codici usati sono:
 
nell’head del file index.php del template:
Codice: [Seleziona]
<script type="text/javascript">
 function RollMapOn(i)
 {
     var IMG = document.getElementById("immagine");
     IMG.src = "http://quartettofauves.renatopace.it/images/Fauves/Fauves_" + i + ".JPG";
 }
 function RollMapOff()
 {
     var IMG = document.getElementById("immagine");
     IMG.src = "http://quartettofauves.renatopace.it/images/Fauves/Fauves.JPG";
 }
 </script>

...e nell'html dell'articolo di homepage:
Codice: [Seleziona]

<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/Fauves/Fauves.JPG" usemap="#mappa" id="immagine" border="0" /> <map name="mappa">
<area shape="rect" coords="260,100,360,500" title="ALESSANDRO PACE, violino" href="index.php?option=com_content&amp;view=article&amp;id=16:alessandro-pace&amp;catid=2:non-categorizzato" onmouseover="RollMapOn(1)" onmouseout="RollMapOff()" />
<area shape="rect" coords="392,100,492,500" title="GIACOMO GAUDENZI, violoncello" href="index.php?option=com_content&amp;view=article&amp;id=17:giacomo-gaudenzi&amp;catid=2:non-categorizzato" onmouseover="RollMapOn(2)" onmouseout="RollMapOff()" />
<area shape="rect" coords="565,100,665,500" title="LEONARDO CELLA, violino" href="index.php?option=com_content&amp;view=article&amp;id=19:leonardo-cella&amp;catid=2:non-categorizzato" onmouseover="RollMapOn(3)" onmouseout="RollMapOff()" />
<area shape="rect" coords="730,100,830,500" title="ELISA FLORIDIA, viola" href="index.php?option=com_content&amp;view=article&amp;id=18:elisa-floridia&amp;catid=2:non-categorizzato" onmouseover="RollMapOn(4)" onmouseout="RollMapOff()" />
 </map></p>


Grazie.

Offline fabiuzz1983

  • Esploratore
  • **
  • Post: 188
  • Sesso: Maschio
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #1 il: 02 Ago 2012, 20:15:17 »
e se usi jquery?! e dai una classe all'immagine ;)
Creatore e Ideatore di Aghape Ambiente

Offline renatopace

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #2 il: 02 Ago 2012, 21:32:57 »
immaginavo che ci volesse qualcosa del genere... ho installato e attivato il plugin simplejquery ma non sono esperto e lì mi sono fermato... cosa e dove dovrei scrivere?

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #3 il: 02 Ago 2012, 21:56:58 »
ciao
lo hai creto tu ,oopure e gia integrato nel temmplate?
che template stai usando ?
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline fabiuzz1983

  • Esploratore
  • **
  • Post: 188
  • Sesso: Maschio
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #4 il: 02 Ago 2012, 23:26:30 »
ok non ho idea di che cosa faccia simplejquery, io jquery lo utilizzo ma lo carico direttamente senza utilizzare plugin di terze parti.

ad ogni modo x avere un effetto fade su un' immagine con jquery secondo me si potrebbe fare così:

carichi jquery (puoi anche mettertelo dentro al tuo dominio o richiamarlo da fuori) tra i tag head del tuo template, probabilmente dovrai modificare la index.php

sempre nella index dopo l'apertura del tab <body> potresti scrivere una cosa tipo questa:

<script type="text/javascript">

$.noConflict();
  jQuery(document).ready(function($) {
//Effetto fade applicato alle foto

// Opacita delle immagini impostate al 50%
$(".classe_da_dare_alla_tua_immagine").css("opacity","0.5");
 
// Al passaggio del mouse
$(".classe_da_dare_alla_tua_immagine").hover(function () {
 
// imposta l'opacita al 100%
$(this).stop().animate({
opacity: 1.0
}, "medium");
},
 
// quando il mouse non e' sull'elemento
function () {
 
// imposta l'opacita' al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

</script>


dove hai le immagini linkate non fai altro che aggiungere all'<a href="#"><img src="....">[/url]

la classe dell'immagine e quindi diventa:

<a href="#"><img src="..." class="classe_da_dare_alla_tua_immagine">[/url]

spero sia tutto chiaro!

bye
Creatore e Ideatore di Aghape Ambiente

Offline renatopace

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #5 il: 03 Ago 2012, 10:50:03 »
Grazie! Proverò il codice e farò sapere

Offline renatopace

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
Re:rollover multiplo su mappa immagine e effetto fade
« Risposta #6 il: 03 Ago 2012, 22:12:52 »
ciao
lo hai creto tu ,oopure e gia integrato nel temmplate?
che template stai usando ?

Sto usando il template Atomic già in dotazione installando joomla 2.5.
Il codice per il rollover multiplo l'ho creato io (prendendo spunto da ricerche sul web)

 



Web Design Bolzano Kreatif