Salve, ho un problema per quanto riguarda un abbellimento grafico per una select.
Il mio scopo sarebbe quello di trovare il modo ( funzionante almeno x IE6 e FireFox ) di modificare il background -color e la grandezza del font sull' onmouseover delle option. Pensavo fosse cosa facile visto che con Firefox bastava settare option:hover e il gioco era fatto. Poi ahimè ho constatato da subito però che su IE6 non andava affatto perche non è supportato l'attributo :hover di conseguenza mi sono scervellato nel trovare qualche soluzione ma nessuna funzionante. Vi posto anche qualche riga di codice con cui poter cominciare.
Copiando e incollando questa porzione di codice presa da un esempio bastato sulle liste funziona
vi ringrazio per l'aiuto.codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Suckerfish :hover example</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <STYLE type=text/css media=all>BODY { FONT: 100% arial, helvetica, sans-serif } H1 { FONT-SIZE: 1.5em; COLOR: orange } A { COLOR: #006; TEXT-DECORATION: none } P:hover { COLOR: #ccc } P.sfhover { COLOR: #ccc } P:hover A { COLOR: blue; TEXT-DECORATION: underline } P.sfhover A { COLOR: blue; TEXT-DECORATION: underline } P A:hover { COLOR: orange } </STYLE> <SCRIPT type=text/javascript><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementsByTagName("P"); alert(this); alert(sfEls.length); alert("PRIMA "+this.className); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></SCRIPT> <META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD> <BODY> <H1>Suckerfish :hover</H1> An example accompanying the <A href="http://www.htmldog.com/articles/suckerfish/hover/">Suckerfish :hover article</A> in HTML Dog.</P> Move your cursor over the paragraphs to reveal any links that might be contained within them.</P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In erat</A>. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In erat</A>. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In erat</A>. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</P></BODY></HTML>
questo invece è quello che ho prodotto io...
codice:<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <STYLE type=text/css media=all> BODY { FONT: 100% arial, helvetica, sans-serif } OPTION:hover { COLOR: green; FONT-SIZE: 2.5em } </style> <SCRIPT language= "Javascript" type="text/javascript"><![CDATA[//><!-- function rollON(value){ alert(value.className); } function rollOFF(value){ alert(value.className); } sfHover = function() { var sfEls = document.getElementsByTagName("option"); alert("Numero option trovate = "sfEls.length); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover = rollON(sfEls[i]); sfEls[i].onmouseout=sfEls[i].onmouseout = rollON(sfEls[i]); } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></SCRIPT> <META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD> <BODY> <select size="3" id="nav" multiple> <option value="0" >Primo</option> <option value="1" >Secondo</option> <option value="2" >Terzo</option> </select> </body> </html>
Rispondi quotando
