Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Changing the hover caharacteristics

    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

    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:

    Code:
    <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'),'[col='+this.value+']','[/col]');">
        <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:

    Code:
    /*
    *  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 ?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!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('[col='+obj.ary[0]+']','[/col]');
    }
    
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks for your reply,

    Can you tell me why this won't work ?

    Code:
    <span class="select">Color: 
     <select name="x_color" onChange="wrapText(document.getElementById('TheTextArea'),'[col='+this.value+']','[/col]');">
     <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

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    You can't change the native behavier of an option mouseover(turns blue)
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Well I tried your code out ...
    ... and you sure know your stuff !!!

    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •