rollover?

**gioalb** · 11-11-2010, 16:53

Salve mi presento, sono Giovanni e sono un fotografo professionista. Mi sono realzzato il sito in maniera autodidatta anche grazie alle vostre guide esemplari. Vi scrivo per avere maggiori informazioni riguardo un particolare tipo di pulsante che nel forum non sono riuscito a trovare. in pratica il mio sito web, ha delle sezioni con pulsanti precedentemente creati in gif. Ho creato un puseover per far accendere il pulsante quando passa il mouse sopra. Ma vorrei aggiungere una terza opzione. Far spegnere il tasto (solo a livello visivo) per le sezioni già visitate, almeno fin quando l'internauto che visita il mio sito si trova lì. E' possibile fare una cosa del genere? Deve essere una specie di rollover. Grazie a chi mi sarà d'aiuto.

Giovanni

**NonCeLaFaccio+** · 11-11-2010, 18:30

Ciao, benvenuto,

ci sono diverse soluzioni, ognuna con pregi e difetti.

Questo è il modo più semplice, tutto in css, però il funzionamento dipende dalle impostazioni dei singoli browser dei navigatori:

codice:

<html>

<head>

<style type="text/css">

   .pulsante:link, .pulsante:active {
      width:      50px;
      height:     20px;
      background: url('img1.gif');
      }

   .pulsante:hover {
      width:      50px;
      height:     20px;
      background: url('img2.gif');
      }

   .pulsante:visited {
      width:      50px;
      height:     20px;
      background: url('img3.gif');
      }

</style>

</head>
<body>












</body>
</html>

Quando dalla pagina in cui sono i pulsanti si va a visitare una sezione e poi si torna indietro il browser potrebbe essere impostato per richiedere nuovamente la pagina al server e in questo caso i link appariranno tutti "vergini" oppure potrebbe essere impostato per andare a prelevare la pagina in cache e allora il visited dovrebbe funzionare a dovere.

Potresti però risolvere aprendo le diverse sezioni del sito in dei target="_new". In questo modo la pagina con i pulsanti non viene scaricata/ricaricata ma resta sempre attiva e quindi il visited dovrebbe funzionare.

Un'altra soluzione è quella di memorizzare sul server l'informazione su quali pulsanti sono stati via, via, cliccati. E' sicuramente la soluzione migliore ma se sei all'inizio non è tanto facile. Prova a postare nelle sezioni php o asp a seconda del server su cui è ospitato il sito.

In javascript credo che l'unico modo sia di scrivere un cookie che tenga memoria dei pulsanti già cliccati ma anche questo è tutt'altro che facile.

Ciao

**gioalb** · 12-11-2010, 08:59

Ciao e grazie! Ti allego il codice della pagine per rendere più chiara la situazione.

codice:

  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ART</title>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
	background-color: #000;
}
-->
</style></head>

<body onload="MM_preloadImages('jaib.gif','secretb.gif','avalonb.gif','lavoisierb.gif','doppio-sognoB.gif','humanlandscapesb.gif','advb.gif','contactb2.gif','publicationsb.gif','archivesb.gif','sunflowerb.gif','syncretismb.gif', 'landscapesb.gif', 'videob.gif','molecoleb.gif','whiteb.gif','cementb.gif')">
<table width="28%" border="0" align="right">
  <tr>
    <td width="100%">[img]logo_GA_oro_neg_flash.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]heart.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]jai.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]cement.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]white.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]molecole.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]syncretism.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]sunflower.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]humanlandscapes.gif[/img]</tr>
  <tr>
    <td>[img]doppio-sogno.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]lavoisier.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]avalon.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]secret.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]landscapes.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]archives.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]publications.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]contactB.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]video.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]property.gif[/img]</td>
  </tr>
  <tr>
    <td>[img]adv.gif[/img]</td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="20,1,172,11" href="human.html" target="mainFrame" />
</map>

<map name="Map2" id="Map2">
  <area shape="rect" coords="36,2,166,11" href="doppiosogno.html" target="mainFrame" />
</map>

<map name="Map3" id="Map3">
  <area shape="rect" coords="60,1,145,11" href="lavoisier.html" target="mainFrame" />
</map>

<map name="Map4" id="Map4">
  <area shape="rect" coords="57,1,140,12" href="avalon.html" target="mainFrame" />
</map>

<map name="Map5" id="Map5">
  <area shape="rect" coords="55,0,147,11" href="secret.html" target="mainFrame" />
</map>

<map name="Map6" id="Map6">
  <area shape="rect" coords="47,1,157,11" href="dreamography.html" target="mainFrame" />
</map>

<map name="Map7" id="Map7">
  <area shape="rect" coords="51,0,147,11" href="landscapes.html" target="mainFrame" />
</map>

<map name="Map8" id="Map8">
  <area shape="rect" coords="48,1,148,11" href="archives.html" target="mainFrame" />
</map>

<map name="Map9" id="Map9">
  <area shape="rect" coords="2,2,198,198" href="index.html" target="_parent" />
</map>

<map name="Map10" id="Map10">
  <area shape="rect" coords="43,2,149,11" href="publications.html" target="mainFrame" />
</map>

<map name="Map11" id="Map11">
  <area shape="rect" coords="43,1,152,11" href="contact2.html" target="mainFrame" />
</map>

<map name="Map12" id="Map12">
  <area shape="rect" coords="20,1,182,12" href="home.html" target="_parent" />
</map>
<body leftmargin="0" topmargin="0">
</body>
</html>

Naturalmente avrei preferito utilizzare un codice html come già ho fatto ma effettivamente sono agli inizi e non vorrei complicarmi troppo la vita.
I pulsanti si "trovano" nel leftframe e caricano una pagina Htlm nel mainFrame.
Come noterai c'è già onmouseover e onmouseout che carica due gif diverse (cambia la luminosità del tasto quando ci passi sopra il mouse). In questo codice dovrei inserire lo spegnimento dei pulsanti? per ogni singolo pulsante dovrei ripetere la procedura così come ho fatto con il onmouseover? Infine dovrei creare un terzo gif per il pulsante "spento"?
Grazie ancora.

Giovanni

**Vincent.Zeno** · 12-11-2010, 13:58

@gioalb

per postare codice utilizza il tag code, grazie
http://forum.html.it/forum/showthrea...hreadid=310046

**NonCeLaFaccio+** · 15-11-2010, 12:17

Ciao,
quindi quello che hai postato è il left frame, esatto?

direi che aver usato i frame casca a fagiolo per l'uso dei css che ti suggerivo, perché il left frame non viene ricaricato e quindi può tenere memoria di quali tasti sono stati cliccati.

Prova a fare così:

crea un'immagine jaic.gif uguale alla jai e alla jaib ma spenta

aggiungi questi stili nel tag style che già c'è

codice:

   #Image16 {
      float:      right;
      width:      200px;
      height:     12px;
      }

   #Image16:link, #Image16:active {
      background: url('jai.gif');
      }

   #Image16:hover {
      background: url('jaib.gif');
      }

   #Image16:visited {
      background: url('jaic.gif');
      }

Togli onmouseover e onmouseout del jai, sposta l'id Image16 nel tag <a> e lascia vuoto l'src, così:

codice:

    <td>[img][/img]</td>

E se funziona fallo per tutte le altre immagini.

Ah, un'altra cosa, togli il body che c'è alla fine, non c'entra niente, ogni pagina deve avere un unico body.

Ciao

**gioalb** · 15-11-2010, 12:46

Grazie della dritta! Provo subito e ti faccio sapere!

**gioalb** · 15-11-2010, 13:05

codice:

   #Image16 {       float:      right;       width:      200px;       height:     12px;       }     #Image16:link, #Image16:active {       background: url('jai.gif');       }     #Image16:hover {       background: url('jaib.gif');       }     #Image16:visited {       background: url('jaic.gif');       }

Questo codice lo inserisco tra </style> e </head>?
se così fosse non funziona!

**NonCeLaFaccio+** · 15-11-2010, 13:07

no, non lì, dentro il tag style, subito prima di </style>

EDIT: anzi, per precisione prima dell "-->" che c'è prima di </style>

**gioalb** · 15-11-2010, 13:11

Niente come non detto ora funziona ma mi da nel campo style "errore analisi sintattica stili". e questa parte:

codice:

   
#Image16 {       
float:      right;       
width:      200px;       
height:     12px;       
}

è sottolineata in verde. Come mai?

**NonCeLaFaccio+** · 15-11-2010, 13:18

A me non sembra che ci siano errori sintattici, chi è che ti segnala l'errore?

Discussione: rollover?

Strumenti discussione

Ricerca discussione

Visualizza

rollover?

Permessi di invio