rollover controllato [era: Siete dei perfezionisti del codice? Guardate quì!]

**kallo** · 25-05-2004, 18:10

Nelle mie prime 5 ore di lavoro con il javascript sono riuscito ad elaborare senza farmi mancare numerose bestemmie

essendo prima d'oggi all'oscuro di questo simpatico mondo dell'interazione utente

questo codice che è sotto allegato.
Questa pagina si collega ad un altra dal colorito nome di

curriculum.php ed entrambe sono inserite in un frameset, il nome del frame della pagina di cui c'è il codice sotto è "sinistra" mentre quello della sua amica pagina a fianco ovvero nell'altro frame indovinate quale sarà? ("destra")
Quello che si intende realizzare con questo script è un maledetto menu proprio come lo vuole il capo :sgrat: (e quando lo vuole il capo sapete bene che la faccina che si addice di più al problema è

.)
Tutt'ora ho raggiunto un buon livello di soddisfazione delle sue aspettative ma manca ancora una cosa. Se riuscirete gentilmente a provare sta minchia di script che ho scritto, vi renderete conto che cliccando su un bottone, l'immagine che vi è accanto non cambia più (cosa voluta) ma si blocca sulla manina ( cosa quasi voluta ); ebbene al posto di quella cazzo di manina bloccata vuole che ci sia una simpatica pennina ( immagine che ho ben pensato di non cercare ). Insomma al click sul pulsante l'immagine accanto non deve più cambiare e diventare una penna fino a che non si clicchi su un altro pulsante.

Siccome sono iscritto ai campionati di codice illeggibile sfido voi sommi mentori ad estrapolarmi una soluzione. Fiducioso vi ringrazio per l'aiuto che mi avete già dato leggendo questo messaggio.

Queste sono le due immagini di cui si tratta nello script

codice:

<html>
<head>
<title>Menu Curriculum</title>
<script language=JavaScript>
<!--

function bellali(e)

{
e.style.background='white'
e.style.color="black";
}

var cippo = '0';

function jdk1x(e,sez) {
     
var rif ="curriculum.php?sez="+sez;
  
        e.style.color = "red"
        e.style.background = "yellow"
        cippo = "img_"+sez;        
        document.x.riss.value=cippo
        parent.destra.location.href= rif        
          i=0;
  do {

imgout(document.images[i])
 

    i++; //aumento l'indice di 1
  }
  while(i<document.images.length);
    }

IMG01 = "../images/curric3.jpg"
IMG02 = "../images/curric2.gif"

function imgin(imgname){

document.x.boss.value=imgname.name


     if(cippo==imgname.name){
     }else{
     imgname.src = IMG02
     imgname.width = '30';
	 imgname.heigth = '31';
	 
     
	}
}

function imgout(imgname){

document.x.boss.value=imgname.name

     if(cippo==imgname.name){ }else{
     imgname.src = IMG01
     imgname.width = '26';
     imgname.heigth = '25';

	 }
}

function evidenzia(e){

e.style.background = "yellow"

}

function devidenzia(e){

e.style.background = "white"

}
//-->
  </SCRIPT>

<style>
<!-- 

INPUT.ton{
width: 160px;
text-align: left;
}

INPUT {
border-left-width: 0; 
border-right-width: 0; 
border-top-width: 0; 
border-bottom: 1px solid #000000;                       }
}
-->
</style>

<base target="_self">
</head>
<BODY bgcolor="white">


<font size="4">Modulo di compilazione per curriculum</font></p>

<form method="POST" action="curriculum.php" target="destra" name="x">
<table border="0" cellpadding="0" cellspacing="0" 
style="border-collapse: collapse" bordercolor="#111111" width="294">
<tr>
<td width="40" height="35">
[img]../images/curric3.jpg[/img]</td>
<td align="left" width="190">
<input class="ton" 
onBlur="bellali(this);" 
onMouseOut="imgout(img_inf_per_);devidenzia(this)" 
onMouseOver="imgin(img_inf_per_);evidenzia(this)"  
name="babbione" 
type=button value="Informazioni Personali" 
onClick="javascript:jdk1x(this,'inf_per_');" 
style="color: #000000; background-color: #FFFFFF"></td>
  </tr>
 <tr>
<td width="40" height="35">
[img]../images/curric3.jpg[/img]</td>
<td align="left" width="190"><input class="ton" 
onBlur="bellali(this);" 
onMouseOut="imgout(img_rec_lav_);devidenzia(this)"  
onMouseOver="imgin(img_rec_lav_);evidenzia(this)"  
name="rec_lav_" type=button value="Recapito del luogo di lavoro" 
onClick="javascript:jdk1x(this,'rec_lav_');" 
style="color: #000000; background-color: #FFFFFF"></td>
  </tr>
<tr>
    <td width="40" height="35">
[img]../images/curric3.jpg[/img]</td>
<td align="left" width="190">
<input class="ton" 
onBlur="bellali(this);" 
onMouseOut="imgout(img_dat_fat_);devidenzia(this)"  
onMouseOver="imgin(img_dat_fat_);evidenzia(this)"  
name="dat_fat_" type=button value="Dati per la fatturazione" 
onClick="javascript:jdk1x(this,'dat_fat_');" 
style="color: #000000; background-color: #FFFFFF">
</td>
  </tr>

</table>

Inutili Text di riscontro inutile

<input type="text" name="riss" size="20" value="">
<input type="text" name="boss" size="20" value="">

</form>

**willybit** · 25-05-2004, 18:56

Ciao kallo,

ne hai scritto di codice eh

vado di fretta e non ho avuto tempo per capirlo...
comunque agiungi l'immagine della pennina così

codice:

<html>
<head>
<title>Menu Curriculum</title>
<script language=JavaScript>
<!--

function bellali(e)

{
e.style.background='white'
e.style.color="black";
}

var cippo = '0';

function jdk1x(e,sez) {
     
var rif ="curriculum.php?sez="+sez;
  
        e.style.color = "red"
        e.style.background = "yellow"
        cippo = "img_"+sez;  
     document.images[cippo].src='../images/curric1.gif' //<-- qui l'immagine che resta fissa
        document.x.riss.value=cippo
        parent.destra.location.href= rif        
...
..
.

dovrebbe bastare
Sciauz

Discussione: rollover controllato [era: Siete dei perfezionisti del codice? Guardate quì!]

Strumenti discussione

Ricerca discussione

Visualizza

[JS]Siete dei perfezionisti del codice? Guardate quì!

Re: [JS]Siete dei perfezionisti del codice? Guardate quì!

Permessi di invio