Ultrabyte
15-04-2008, 17:00
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
<!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>
<P>An example accompanying the <A
href="http://www.htmldog.com/articles/suckerfish/hover/">Suckerfish :hover
article</A> in <A href="http://www.htmldog.com/">HTML Dog</A>.</P>
<P>Move your cursor over the paragraphs to reveal any links that might be
contained within them.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P></BODY></HTML>
qui invece ho cercato di riadattare il codice sopra incollato sulle option con i risultati nulli
<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>
quello che mi chiedo perchè al passagio del mouse sulle option non viene scatenata nessun'action ?
Un grazie anticipato :D
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
<!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>
<P>An example accompanying the <A
href="http://www.htmldog.com/articles/suckerfish/hover/">Suckerfish :hover
article</A> in <A href="http://www.htmldog.com/">HTML Dog</A>.</P>
<P>Move your cursor over the paragraphs to reveal any links that might be
contained within them.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P>
<P>Lorem ipsum <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">dolor</A> sit
amet, consectetuer adipiscing elit. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Suspendisse</A>
egestas ultricies pede. Phasellus suscipit blandit risus. <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Praesent</A>
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In
erat</A>. Duis nibh pede, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">accumsan</A>
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, <A
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">tellus</A> a
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit.
Praesent dui. Nulla accumsan turpis at erat.</P></BODY></HTML>
qui invece ho cercato di riadattare il codice sopra incollato sulle option con i risultati nulli
<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>
quello che mi chiedo perchè al passagio del mouse sulle option non viene scatenata nessun'action ?
Un grazie anticipato :D