Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : fabryalliance 27 Jan 2012, 13:08:56

: Rollover di immagini al passaggio del mouse su link (Immagini fisse in un Div)
: fabryalliance 27 Jan 2012, 13:08:56

Salve a tutti,




E' la prima volta che metto mano a Joomla e Php per un esame che devo affrontare all'università.
Sto trapiantando un sito che avevo creato precedentemente in asp  e vorrei cercare di riprodurre alcune funzioni che erano presenti nel sito.


Una di queste era un semplice rollover di immagini al passaggio del mouse su una voce presente in una lista.
Ad esempio.

• Sala 1 -----(passaggio del mouse sulla voce)-------->  | DIV con immagine della Sala1|
• Sala 2 -----(passaggio del mouse sulla voce)------->  |Stesso DIV con immagine della Sala2|

Come posso riprodurre una tale funzione in una pagina web creata con Joomla?


Questo è lo script che avevo creato in Asp e inserito nella pagina index.asp

<SCRIPT TYPE="text/javascript">

<!--Rollover di Immagini Unicorno-->

var mappagenerale = new Image();
mappagenerale.src = "./images/locale/mappagenerale.jpg";

var giardino = new Image();
giardino.src = "./images/locale/giardino.jpg";

var ingresso = new Image();
ingresso.src = "./images/locale/sala1.jpg";

var sala1e2 = new Image();
sala1e2.src = "./images/locale/sala1e2.jpg";

var sala2 = new Image();
sala2.src = "./images/locale/sala2.jpg";

var giardinoterrazzato = new Image();
giardinoterrazzato.src = "./images/locale/giardinoterrazzato.jpg";

var giardinoterrazzato2 = new Image();
giardinoterrazzato2.src = "./images/locale/giardinoterrazzato2.jpg";

var scherzetto= new Image();
scherzetto.src = "./images/locale/scherzetto.jpg";
</script>

Questo era presente nella pagina locale.asp

<img id="imglocale" name="mappa" alt="Locale" width="500" height="333"/>
<%
if nfoto="" then
  response.write "src='./images/locale/mappagenerale.jpg'>"
elseif nfoto="1" then
  response.write "src='./images/locale/giardino.jpg'>"
elseif nfoto="2" then
  response.write "src='./images/locale/sala1.jpg'>"
elseif nfoto="3" then
  response.write "src='./images/locale/sala1e2.jpg'>"
elseif nfoto="4" then
  response.write "src='./images/locale/sala2.jpg'>"
elseif nfoto="5" then
  response.write "src='./images/locale/giardinoterrazzato.jpg'>"
elseif nfoto="6" then
  response.write "src='./images/locale/giardinoterrazzato2.jpg'>"
elseif nfoto="7" then
  response.write "src='./images/locale/scherzetto.jpg'>"
end if
%>

<ul id="ul_locale">
   <li><a href="locale.asp?foto=1" onMouseOver="mappa.src=giardino.src"
   onMouseOut="mappa.src=mappagenerale.src">Ingresso
   

   <li><a href="locale.asp?foto=2" onMouseOver="mappa.src=ingresso.src"
   onMouseOut="mappa.src=mappagenerale.src">Sala n°1
   

   <li><a href="locale.asp?foto=3" onMouseOver="mappa.src=sala1e2.src"
   onMouseOut="mappa.src=mappagenerale.src">Sala n°1 e Sala n°2
   

   <li><a href="locale.asp?foto=4" onMouseOver="mappa.src=sala2.src"
   onMouseOut="mappa.src=mappagenerale.src">Sala n°2
   

   <li><a href="locale.asp?foto=5" onMouseOver="mappa.src=giardinoterrazzato.src"
   onMouseOut="mappa.src=mappagenerale.src">Giardino Terrazzato
   

   <li><a href="locale.asp?foto=6" onMouseOver="mappa.src=giardinoterrazzato2.src"
   onMouseOut="mappa.src=mappagenerale.src">Giardino Terrazzato 2
   


   <li><a href="locale.asp?foto=7" onMouseOver="mappa.src=scherzetto.src"
   onMouseOut="mappa.src=mappagenerale.src">Stanza della "serietà"!
</ul>
<>