Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : renatopace 02 Aug 2012, 14:13:47
-
In questo sito (http://quartettofauves.renatopace.it/index.php)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:
<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:
<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&view=article&id=16:alessandro-pace&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&view=article&id=17:giacomo-gaudenzi&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&view=article&id=19:leonardo-cella&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&view=article&id=18:elisa-floridia&catid=2:non-categorizzato" onmouseover="RollMapOn(4)" onmouseout="RollMapOff()" />
</map></p>
Grazie.
-
e se usi jquery?! e dai una classe all'immagine ;)
-
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?
-
ciao
lo hai creto tu ,oopure e gia integrato nel temmplate?
che template stai usando ?
-
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
-
Grazie! Proverò il codice e farò sapere
-
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)