Rollover su pulsanti di un form

[carlostefano]

Ciao,
ho un form in cui vorrei che i bottoni per il submit avessero un immagine che cambia al cambiare della posizione del mouse (mouseover e mouseout) . Da quello che so con IE non si riesce ad ottenere questo, visto che supporta il cambio di immagine con le pseudoclassi solo sui links. Volevo quindi chiedere se qualcuno sa come si potrebbe fare oppure l'unico modo è ricorre a javascript.

Saluti,
carlostefano

[index]

L'unico modo che io conosco per creare una pagina cross-browser è JavaScript.

Purtroppo è cosi.

[carlostefano]

Ciao,
ho trovato un modo per ottenere l'effetto rollover sui pulsanti di un form senza javascript anche su IE. Basta impostare la proprieta background-color su transparent:
codice html:

<input  tpye="submit" name="sumit" value="crea" class="submit">

codice css

input.submit {
background-color: transparent;
background-image: url(image);
}


input.submit:hover {
background-image: url(image_hover);
}


input.submit:active {
background-image: url(image_active);
}

[erredeco]

Mi pare però che l'hover funzioni solo sotto Firefox, o sbaglio ?

[ashtur1]

io non ho provato quanto sopra...ma l' hover funziona con entrambi...pero sul submit non lo so...

[index]

Certo che ce ne sono di furbacchioni in questo forum!!!

Il selettore :hover, per quanto concerne IE5 e successivi fino a 6, esiste SOLO E SOLTANTO per <a...></a>.

Quindi come ho già detto prima... se vuoi creare una pagina cross-browser che faccia quello che mi hai chiesto L'UNICA soluzione è JAVASCRIPT.

Ciao.

[carlostefano]

Ciao Michele,
se intendi IE6 compreso ti rispondo che anch'io sapevo così, però ho fatto una prova mettendo quella proprietà e come ti ho detto funziona. Se volete posto un esempio funzionante.


Ciao,
carlostefano

[index]

In IE6??? Non ci credo...

[carlostefano]

Originariamente inviato da index
In IE6??? Non ci credo...

Facevi bene a non crederci
mi sono accorto di aver inlcuso nella pagina un commento condizionale che, nel caso in cui il browser sia IE, scarichi un file .js contenente il codice per visualizzare correttamente una barra di navigazione. A quanto pare esso ha anche effetto sui bottoni del form e senza di esso la pseudoclasse :hover non produce alcun risultato.


ciao,
carlostefano

[pierofix]

La solita soluzione per far funzionare l'hover anche su IE è la seguente:

CSS

input[type="submit"]:hover,
.input_submit_hover
{
   /* proprietà */
}


Javascript

window.onload = function()
{
   var inputs = document.getElementsByTagName('input')
   var submits = new Array()
   for (var i = 0; i < inputs.length; i++)
   {
      if ( inputs.item(i).getAttribute('type') == 'submit' )
      {
         submits.push(inputs.item(i))
      }
   }

   for (var i = 0; i < submits.length; i++)
   {
      submits[i].onmouseover = function()
      {
         this.className = 'input_submit_hover'
      }
      submits[i].onmouseout = function()
      {
         this.className = ''
      }
   }
}

Lo script javascript sarebbe bene inserirlo in un file esterno e linkarlo al documento usando un commento condizionale per IE.