cambio background al rollover su altro elemento [era: Negato per il JS]

[DakJak]

Salve a tutti, sto creando un sito, ma purtroppo di JS o JQ ne so PARI A 0 giusto qualcosina ma praticamente niente....

Volevo chiedervi se gentilmente potevate suggerirmi qualche script che sull'hover di button1 cambia la background di button2 (e viceversa)

attualmente ho scritto questo

HTML

<button id="bt1" class="bt">aa</button>
<button id="bt2" class="bt">bb</button>

CSS

#bt1 {    width: 100%; height: 50%; top:50%; left: 0;background:background:url(BARCA%20B%20SLIM.jpg) no-repeat center top; position: fixed; z-index: -2;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;    background-color: Transparent;    background-repeat:no-repeat;    border: none;    cursor:pointer;    overflow: hidden;    outline:none;}




#bt2 {width: 100%; height: 50%; top:0; left: 0;background: background:url(BARCA%20A%20SLIM.jpg) no-repeat center bottom; position: fixed; z-index: -1;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

[cavicchiandrea]

Hai riflettuto molto sul titolo o è stato istintivo?

[DakJak]

A parte l'ottimo fuori tema xD è stato istintivo, dopo che per l'intera giornata sto provando a fare un bottone (bt1) che cambia sfondo al bottone 2....

[Lollo_090]

Puoi cambiare la classe del secondo bottone tramite l'hover del primo con una funzione simile a questa:

<script>
function cambiaBackground(id){
    if(id==='bt1'){
        document.getElementById('bt1').style.background = 'rgba(232,232,232,1.00)';
        document.getElementById('bt2').style.background = 'rgba(159,159,159,1.00)';    
    }else if(id==='bt2'){
        document.getElementById('bt2').style.background = 'rgba(232,232,232,1.00)';
        document.getElementById('bt1').style.background = 'rgba(159,159,159,1.00)';    
    }
}
</script>

Però fai attenzione perché hai fatto un po' un pasticcio con i css...

Qui ho messo solo lo stretto necessario.

<style>#bt1 {background:rgba(159,159,159,1.00);}
#bt2 {background:rgba(232,232,232,1.00);}</style>

Inoltre i bottoni si scrivono così:

<input value="aa" type="button" onMouseOver="cambiaBackground(this.id);" id="bt1" class="bt">
<input value="bb" type="button" onMouseOver="cambiaBackground(this.id);" id="bt2" class="bt">

L'attributo onMouseOver chiamerà la tua funzione passandogli l'id dell'oggetto da cui è stata lanciata.

Spero di esserti stato d'aiuto! Ciao!

[DakJak]

Grazie lollo, il problema che sorge è nel posizionamento, ho inserito un immagine al posto dell'rgba il problema è che mi sballa tutti i settaggi dell'css e mi inserisce l'immagine senza il restante dei settaggi è normale?

[Lollo_090]

In effetti no, è che ci sono degli errori nel tuo css...ad esempio hai scritto troppe volte la parola background e l'istruzione no-repeat e ci sono delle informazioni superflue come background-color:Transparent. Forse è per quello. Prova così:

<input value="aa" type="button" onMouseOver="cambiaBackground(this.id);" id="bt1" class="bt">
<input value="bb" type="button" onMouseOver="cambiaBackground(this.id);" id="bt2" class="bt">

<style>
#bt1 {background:url(001.jpg) no-repeat; background-size:cover !important; position:fixed; width:100%; height:50%; top:0;}
#bt2 {background:url(002.jpg) no-repeat; background-size:cover !important; position:fixed; width:100%; height:50%; top:50%;}
</style>

<script>
function cambiaBackground(id){    
      if(id==='bt1'){        
           document.getElementById('bt1').style.background = 'url(001.jpg) no-repeat';        
           document.getElementById('bt2').style.background = 'url(002.jpg) no-repeat';        
      }else if(id==='bt2'){        
           document.getElementById('bt2').style.background = 'url(001.jpg) no-repeat';        
           document.getElementById('bt1').style.background = 'url(002.jpg) no-repeat';        
      }
}
</script>

Devi inserire !important su background-size:cover perché altrimenti una volta sovrascritta la proprietà background viene ignorata l'istruzione cover anche se ancora presente nel css in quanto legata appunto alla precedente...in questo modo gli dici di prenderla sempre per buona!

Altrimenti puoi editarla dalla funzione javascript come fai per la propietà background.

[DakJak]

Ti ringrazio non 100 ma 1000 per questo prezioso consiglio che mi hai dato (quello di !important) che non usavo quasi mai, aimè avevo già riscritto il codice con l'aiuto di un amico, in questo modo, se ti va di dargli un occhiata e magari darmi qualche altro consiglio è TUTTO accettato!

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <SCRIPT>


/*  Mouseover barca arancione cambio barca soprastante  */
           
  $(document).ready(function(){
      $("#bt1").mouseover(function() {
      $("#bt2").css("width","100%")
      $("#bt2").css("height","50%")
      $("#bt2").css("top","0")
      $("#bt2").css("left","0")
      $("#bt2").css("background","url(BARCA%20B%20SLIM%20SFOCATA.jpg)")
      $("#bt2").css("background-repeat","no-repeat")
      $("#bt2").css("background-position","center")
      $("#bt2").css("background-position","bottom")
      $("#bt2").css("position","fixed");
      $("#bt2").css("z-index","url(-1)")
      $("#bt2").css("-webkit-background-size","cover")
      $("#bt2").css("-moz-background-size","cover")
      $("#bt2").css("-o-background-size","cover")
      $("#bt2").css("background-size","cover")


     });
     
     /*  Mouseout barca arancione cambio barca soprastante  */


     
 $( "#bt1").mouseout(function() {
      $("#bt2").css("width","100%")
      $("#bt2").css("height","50%")
      $("#bt2").css("top","0")
      $("#bt2").css("left","0")
      $("#bt2").css("background","url(BARCA%20B%20SLIM.jpg)")
      $("#bt2").css("background-repeat","no-repeat")
      $("#bt2").css("background-position","center")
      $("#bt2").css("background-position","bottom")
      $("#bt2").css("position","fixed");
      $("#bt2").css("z-index","url(-1)")
      $("#bt2").css("-webkit-background-size","cover")
      $("#bt2").css("-moz-background-size","cover")
      $("#bt2").css("-o-background-size","cover")
      $("#bt2").css("background-size","cover")


     });


});




/*  Mouseover barca bianca e marrone con barca sottostante  */
  $(document).ready(function(){
      $("#bt2").mouseover(function() {
      $("#bt1").css("width","100%")
      $("#bt1").css("height","50%")
      $("#bt1").css("top","50%")
      $("#bt1").css("left","0")
      $("#bt1").css("background","url(BARCA%20A%20SLIM%20SFOCATA.jpg)")
      $("#bt1").css("background-repeat","no-repeat")
      $("#bt1").css("background-position","center")
      $("#bt1").css("background-position","top")
      $("#bt1").css("position","fixed");
      $("#bt1").css("z-index","-1")
      $("#bt1").css("-webkit-background-size","cover")
      $("#bt1").css("-moz-background-size","cover")
      $("#bt1").css("-o-background-size","cover")
      $("#bt1").css("background-size","cover")


     });
      $("#bt2").mouseout(function() {
      $("#bt1").css("width","100%")
      $("#bt1").css("height","50%")
      $("#bt1").css("top","50%")
      $("#bt1").css("left","0")
      $("#bt1").css("background","url(BARCA%20A%20SLIM.jpg)")
      $("#bt1").css("background-repeat","no-repeat")
      $("#bt1").css("background-position","center")
      $("#bt1").css("background-position","top")
      $("#bt1").css("position","fixed");
      $("#bt1").css("z-index","-1")
      $("#bt1").css("-webkit-background-size","cover")
      $("#bt1").css("-moz-background-size","cover")
      $("#bt1").css("-o-background-size","cover")
      $("#bt1").css("background-size","cover")


     });
  });


</SCRIPT>

[Lollo_090]

Va bene anche così, tuttavia io ti sconsiglio di ricorrere a jQuery per fare quello che serve a te, diciamo che io lo sconsiglio quasi sempre. Con questo non voglio dire che jQuery sia una cosa brutta , anzi, è un'ottima libreria, il fatto è che è un modo per "facilitare" la scrittura del codice quando hai molte operazioni complesse da fare. Se però stai imparando, o ti interessa imparare, ad usare JavaScript ti consiglio di usare il linguaggio nativo, senza librerie. Prima di tutto perché impari meglio e ogni cosa fatta con jQuery ovviamente è fattibile anche con semplice JS. E' normale che se non sei capace jQuery aiuta, ma se usi il linguaggio nativo impari meglio . Inoltre appesantisce la pagina con script che non usi...ad ogni modo per quello che vuoi fare tu è sufficiente JS all'interno dell'attributo del tag:

<input value="aa" type="button" id="bt1" class="bt" onMouseOver="bt2.style.background='url(002.jpg) no-repeat'" onMouseOut="bt2.style.background='url(001.jpg) no-repeat'">
<input value="bb" type="button" id="bt2" class="bt" onMouseOver="bt1.style.background='url(002.jpg) no-repeat'" onMouseOut="bt1.style.background='url(001.jpg) no-repeat'">

<style>
#bt1{
     background:url(001.jpg) no-repeat;
     background-size:cover !important;
     position:fixed; width:100%;
     height:50%;
     top:0;
}
#bt2{
     background:url(001.jpg) no-repeat;
     background-size:cover !important;
     position:fixed; width:100%;
     height:50%;
     top:50%;
}
</style>

Ma allo stesso modo, all'interno degli attributi 'onMouseOver' e 'onMouseOut' puoi chiamare delle funzioni come quella che ti ho postato prima, ovviamente adattate alle tue esigenze:

<input value="aa" type="button" id="bt1" class="bt" onMouseOver="cambiaBackground(this.id,'over')" 
onMouseOut="cambiaBackground(this.id,'out')">
<input value="bb" type="button" id="bt2" class="bt" onMouseOver="cambiaBackground(this.id,'over')" 
onMouseOut="cambiaBackground(this.id,'out')">

<script>
function cambiaBackground(id,stato){
    if(id==='bt1'){
        if(stato==='over'){
            document.getElementById('bt2').style.background = 'url(002.jpg) no-repeat';
        }else if(stato==='out'){
            document.getElementById('bt2').style.background = 'url(001.jpg) no-repeat';
                }
    }else if(id==='bt2'){
        if(stato==='over'){
            document.getElementById('bt1').style.background = 'url(002.jpg) no-repeat';
        }else if(stato==='out'){
            document.getElementById('bt1').style.background = 'url(001.jpg) no-repeat';
                }
        }
}
</script>

Se invece vuoi agire solo tramite JavaScript, senza usare attributi sugli oggetti puoi riccorrere agli eventListener, come hai fatto tu in jQuery:

<input value="aa" type="button" id="bt1" class="bt">
<input value="bb" type="button" id="bt2" class="bt">

<script>
window.addEventListener('load',
    function(){//qui puoi anche chiamare un'altra funzione, io l'ho scritta direttamente qui per comodità
        document.getElementById('bt1').addEventListener('mouseover',tuaFunzione/*oppure function(){}*/,true);//se scrivi direttamente il nome della funzione potrai chiamare la funzione SOLO senza parametri, infatti hai visto che non ho messo ()
        //ecc...
    },true);
</script>

NB: Dove hai visto che ho scritto solo 'bt1.' anziche 'document.getElementById('bt1').' è perché JavaScript prende lo stesso l'id anche così in QUASI TUTTE le situazioni (quindi occhio ).

[DakJak]

Wow, altra lezione acquisita, incredibile quanto c'è da imparare!!
Un ultima domanda, quindi per fare ciò che volevo fare io, bastava anche solo mettere mouseover ecc sul button ed era molto più semplificato (nel mio caso intendo), giusto?

[Lollo_090]

Sì, a volte uno si arrovella con script che non servono per poi scoprire che bastava una riga di codice. E' normale...