...

View Full Version : Changing the hover caharacteristics



jeddi
01-28-2009, 06:52 AM
I think I might need a js soloution to this because my usual
HTML keeps changing my selected background.

Here is the problem:
Link to form with color select (http://www.devchoice.info/testing.php)

Notice in the color selector, the background color that I have given it
it the option statement changes on hove to a blue/gray.

Instead of background color change I would like the text to BOLD.
So on hovering over green, the text green goes to green but
the background color stays green.

Here is what I have:


<div class="my_editor" >
<span class="editor"> Editor: </span>
<img class="imgbtn" src="/picts/bold.gif" width="21" height="20" alt="Bold" title="Bold" >
<img class="sptr" src="/picts/separator.gif" width="6" height="20" alt="">
<span class="select">Color:
<select name="x_color" onChange="wrapText(document.getElementById('TheTextArea'),'','');">
<option style = "background: black; color: white;" value = 'black' selected= "selected" >black &nbsp;&nbsp;</option>
<option style = "background: blue;color: white;" value = 'blue' >blue &nbsp;&nbsp;</option>
<option style = "background: red;" value = 'red' >red &nbsp;&nbsp </option>
<option style = "background: green;" value = 'green' >green &nbsp;&nbsp;</option>
<option style = "background: yellow;" value = 'yellow' >yellow &nbsp;&nbsp;</option>
<option style = "background: gray;" value = 'gray' >grey &nbsp;&nbsp;</option>
<option style = "background: white" value = 'white' >white &nbsp;&nbsp;</option>
<option style = "background: brown;color: white;" value = 'brown' >brown &nbsp;&nbsp;</option>
<option style = "background: orange;" value = 'orange' >orange &nbsp;&nbsp;</option>
</select>
</span>
</div>

And my CSS:


/*
* Editor Styles
*/

.my_editor {
width: 600px;
background: #E1E1E2;
border: 1px solid #000;
margin: 10px 300px 10px 110px;
float:left;
}

.imgbtn {
background: #E1E1E2;
margin: 10px 0 4px 0;
padding:1px;
float:left;
}

.imgbtn:hover{
background: #cff;
border: 1px solid #33f;
padding:0px;
}


.editor {
background: #E1E1E2;
margin:0 10px 0 10px;
padding-top:12px;
float:left;
}

.select{
background: ;
padding:10px 5px 0 0;
float:left;
}

.select select{
background: ;
}

.sptr {
background: #E1E1E2;
padding-top:10px;
float:left;
}


I am not sure if this can be done just with the CSS or do I need an
onhover element in the OPTION stmt ?

vwphillips
01-28-2009, 01:01 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.my_editor {
position:relative;
}


#Select {
position:absolute;overflow:hidden;left:125px;;top:2px;width:100px;height:18px;font-Size:14px;text-Align:center;border:solid gray 1px;
}

#Select IMG{
position:absolute;z-Index:1;left:80px;top:0px;width:18px;height:18px;
}
.item {
position:relative;height:18px;border:solid black 1px;
}

.bold {
font-Weight:bold;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

var ColAry=[];
ColAry[0]=['black','black','white'];
ColAry[1]=['blue','blue','white'];
ColAry[2]=['red','red'];
ColAry[3]=['green','green'];
ColAry[4]=['yellow','yellow'];
ColAry[5]=['gray','gray'];
ColAry[6]=['white','white'];
ColAry[7]=['brown','brown','white'];
ColAry[8]=['orange','orange',];

function zxcSelect(id,ary,cls,cls1){
var obj=document.getElementById(id);
for (var z0=0;z0<ary.length;z0++){
var item=zxcES('DIV',{color:(ary[z0][2]||'#000000'),backgroundColor:ary[z0][1]},obj,ary[z0][0]);
item.className=cls;
item.onmouseover=function(){ this.className=this.className+' '+cls1; }
item.onmouseout=function(){ this.className=this.className.replace(' '+cls1,''); }
item.ary=ary[z0];
item.onmouseup=function(){ zxcChange(this); }
}
obj.closed=true;
obj.min=obj.offsetHeight;
obj.max=obj.scrollHeight;
obj.getElementsByTagName('IMG')[0].onmouseup=function(){
var obj=this.parentNode;
zxcES(obj,{height:(obj.closed?obj.max:obj.min)+'px'});
obj.closed=!obj.closed;
}
obj.onmouseout=function(){ zxcClose(this); }
}

function zxcChange(obj){
alert('+']','');
}

function zxcClose(obj){
var ev=window.event||arguments.callee.caller.arguments[0];
if (zxcCkEventObj(ev,obj)){
zxcES(obj,{height:obj.min+'px'});
obj.closed=true;
}
}

function zxcCkEventObj(e,p){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (e.target) eobj=e.target;
else if (e.srcElement) eobj=e.srcElement;
if (eobj.nodeType==3) eobj=eobj.parentNode;
var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==p) return false;
while (eobj.parentNode){
if (eobj==p) return false;
eobj=eobj.parentNode;
}
return true;
}


function zxcES(ele,style,par,txt){
if (typeof(ele)=='string'){ ele=document.createElement(ele); }
for (key in style){ ele.style[key]=style[key]; }
if (par){ par.appendChild(ele); }
if (txt){ ele.appendChild(document.createTextNode(txt)); }
return ele;
}

/*]]>*/
</script></head>

<body onload="zxcSelect('Select',ColAry,'item','bold');" >
<div class="my_editor" >
<span class="editor"> Editor: </span>
<img class="imgbtn" src="/picts/bold.gif" width="21" height="20" alt="Bold" title="Bold" >
<img class="sptr" src="/picts/separator.gif" width="6" height="20" alt="">
<span class="select">Color:
</span>
<div id="Select" ><img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></div>
</div>
</body>

</html>

jeddi
01-28-2009, 05:04 PM
Thanks for your reply,

Can you tell me why this won't work ?



<span class="select">Color:
<select name="x_color" onChange="wrapText(document.getElementById('TheTextArea'),'','');">
<option style = "background-color: black; color: white;" value = 'black' selected= "selected" onMouseOver="background-color: black;">black &nbsp;&nbsp;</option>
<option style = "background-color: blue;color: white;" value = 'blue' onMouseOver="background-color: blue;" >blue &nbsp;&nbsp;</option>
<option style = "background-color: red;" value = 'red' onMouseOver="background-color: red;">red &nbsp;&nbsp;</option>
<option style = "background-color: green;" value = 'green' onMouseOver="background-color: green;">green &nbsp;&nbsp;</option>
<option style = "background-color: yellow;" value = 'yellow' onMouseOver="background-color: yellow;">yellow &nbsp;&nbsp;</option>
<option style = "background-color: gray;" value = 'gray' onMouseOver="background-color: gray;">grey &nbsp;&nbsp;</option>
<option style = "background-color: white" value = 'white' onMouseOver="background-color: white;">white &nbsp;&nbsp;</option>
<option style = "background-color: brown;color: white;" value = 'brown' onMouseOver="background-color: brown;">brown &nbsp;&nbsp;</option>
<option style = "background-color: orange;" value = 'orange' onMouseOver="background-color: orange;">orange &nbsp;&nbsp;</option>
</select>
</span>


It looks like it should, but I tried it and it doesn't :confused:

vwphillips
01-28-2009, 05:15 PM
You can't change the native behavier of an option mouseover(turns blue)

jeddi
01-28-2009, 06:30 PM
Well I tried your code out ...
... and you sure know your stuff !!!

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum