Newsgroup: it.comp.lang.javascript
Titolo: javascript & css : chi mi aiuta?

Ciao, vi chiedo un aiuto se possibile; sto studiando i CSS e anche
javascript, pero' per ora sono arrivato alla gestione degli eventi
basilari(onMouseOver, ecc.) ...insomma sto agli inizi...
se date un occhiata al testo che riporto sotto direttamente da 
w3c.org
,
parlando della proprieta' visibility dei css, si cita uno script "teorico"
da usare per nascondere alternativamente una o l'altra immagine, dipendente
dalla scelta dell'utente.
ho personalizzato i css(a me le immagini servono sfalsate...) ma non sono
ancora assolutamente in grado di realizzare un script del genere (Anche se
magari e' una cosa semplice...)
ho provato (scusatemi se dico sconcerie...) a dare un id all'immagine
nascosta e richiamrla con 
document.all.id
 e con document.images, ma non sono
venuto a capo di niente...
qualcuno sa come realizzare uno script del genere o darmi qualche
suggerimento per realizzarlo? ve ne sarei grato
http://www.w3.org/TR/REC-CSS2/visufx.html#visibility
****************************************************
This property may be used in conjunction with scripts to create dynamic
effects.
In the following example, pressing either form button invokes a user-defined
script function that causes the corresponding box to become visible and the
other to be hidden. Since these boxes have the same size and position, the
effect is that one replaces the other. (The script code is in a hypothetical
script language.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM method="post"
action="
http://www.suspect.org/process-bums
">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>
****************************************************

 suggerimento per realizzarlo? ve ne sarei grato
queste sono le funzioni che utilizzo io di solito. si basano sull'object
detection e funzionano un po' con tutti i browser disponibili. nota che il
secondo branch verra' preso non solo da IE4 ma anche da IE5+ ed Opera in
modalita' IE, ma questo non comporta malfunzionamenti ed e' coerente all'uso
della object detection.
l'ordine dei branches l'ho studiato in modo da evitare errori di JavaScript,
anche non bloccanti.
function ShowDiv(aDiv)
{
  var el;
  if (document.layers) // NS4
  {
    el = document.layers[aDiv];
    el.visibility = 'show';
  }
  else if (document.all)   // IE4 non implementa getElementById()
  {
    el = document.all[aDiv];
    el.style.visibility = 'visible';
  }
  else if (document.getElementById) // IE5+, NS6+, Mozilla/Gecko, Opera 5+
  {
    //alert('W3C DOM compliancy');
    el = document.getElementById(aDiv);
    el.style.visibility = 'visible';
  }
}
function HideDiv(aDiv)
{
  var el;
  if (document.layers) // NS4
  {
    el = document.layers[aDiv];
    el.visibility = 'hide';
  }
  else if (document.all)   // IE4 non implementa getElementById()
  {
    el = document.all[aDiv];
    el.style.visibility = 'hidden';
  }
  else if (document.getElementById) // IE5+, NS6+, Mozilla/Gecko, Opera 5+
  {
    //alert('W3C DOM compliancy');
    el = document.getElementById(aDiv);
    el.style.visibility = 'hidden';
  }
}
spero di esserti stato utile
ciao
--
    Federico Sasso &8v>
 
http://www.crt.unige.it/jsSQL
    The jsSQL Project - JavaScript Database and SQL Engine

 immagini


  se ci riesco, posto i miei risultati, ciao :)
ho risolto su IE4 e IE5+ inserendo il link in questa maniera, cioe' mettendo
l'id della div fra apici singoli:
<a href="#" class="interrogativo" onMouseOver="ShowDiv('id1')"
onMouseOut="HideDiv('id1')">Sostituisci</a>
Grazie ancora per il tuo aiuto, mi e' stato molto utile, mi sono avventurato
(per risolvere questo problema) nello studio serio di js e finalmente ci sto
capendo qualcosa... il problema piu' grande, come sempre purtroppo, mi
sembra quello della compatibilita' crossbrowser... ma tant'e'!!! :)
Ciao