Rollover su pulsanti di un form

[Sebulba]

Originariamente inviato da 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.

E tutto ciò funziona su Safari e Camino???

+ semplicemente... è possibile avere un effetto rollover per submit che vada bene per tutti i browser?

Grazie Ciao

[Sebulba]

Suvvia una rispostina datemela per favore...

[pierofix]

Se Safari e Camino supportano correttamente le basi degli standard, come immagino, la soluzione che ti ho proposto dovrebbe funzionare già senza l'intervento del 'piano B' che prevede l'entrata in scena del javascript.

Tuttavia non ho mai provato, pertanto non so darti notizie certe.

[Another-Life]

[OT]:

che vantaggi ha questa dichiarazione??

input[type="submit"]:hover

[pierofix]

In che senso 'vantaggi'?

E' un potente selettore di attributo [ http://www.diodati.org/w3c/css2/sele...bute-selectors ] CSS standard; peccato che quel mona di IE non lo riconosca (ecco perchè occorre giocare un po' con javascript).

[sidvizioso]

a me questo metodo non funziona su explorer 6...

usando il css normale sneza javascript mi funziona su firefox e su explorer 7.... non so come fare..
aiuuto!!

[carlostefano]

File hover.htc, in questo caso dentro una cartella denominata "javascripts", situata sotto la root.


<attach event="ondocumentready" handler="parseStylesheets" />
<script>
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+))hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+[a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}

function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) return [doc.getElementById(identify[1])];

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>



Commento condizionale da includere nella header della pagina:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(/javascripts/hover.htc);}
</style>
<![endif]-->

[carlostefano]

ma il tag CODE non funziona più qui? :berto:

[Another-Life]

Originariamente inviato da pierofix
In che senso 'vantaggi'?

E' un potente selettore di attributo [ http://www.diodati.org/w3c/css2/sele...bute-selectors ] CSS standard; peccato che quel mona di IE non lo riconosca (ecco perchè occorre giocare un po' con javascript).

Scusa ho detto una cavolata^^

[F|45c0]

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

codice:

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.


Cosa intendi per COMMENTO ADDIZIONALE?
Sicuramente e' una stupidata... per voi, ma nn mi e' chiaro, puoi essere piu' preciso?

Grazie

PS nn so come mettere la citazione...