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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    60
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Div containers changing background color when hovering over them?

    What I am trying to achieve is this:
    http://www.pageresource.com/dhtml/jtut6....
    Except with div containers rather than tables

    I tried to make it work by using
    Code:
    <script type="text/javascript">
    function changecolor(id, color) {
    element = document.getElementById(id);
    event.cancelBubble = true;
    oldcolor = element.currentStyle.background;
    element.style.background = color;
    }
    </script>
    
    <div id="myDiv" onMouseOver="changecolor (this.id, '#FFF');" onMouseOut="changecolor (this.id, '#000');">Black to White</div>
    but it doesn't .

    Code (I only tried it for the -mainone- div id):
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>interact</title>
    <link rel="stylesheet" type="text/css" href="reset-fonts-grids2.css">
    <script src="rounded.js"></script>
    <script type="text/javascript">
    function changecolor(id, color) {
    element = document.getElementById(id);
    event.cancelBubble = true;
    oldcolor = element.currentStyle.background;
    element.style.background = color;
    }
    </script>
    </head>
    <body>
    <div id="doc" class="yui-t7">
    <div id="hd">
    <p id="ep"> </p>
    <div id="masthead" class="rounded"><p>interact club</p></div>
    <p id="ep2"> </p>
    </div>
    <div id="bd">
    <div id="yui-main">
    <div class="yui-b">
    <div class="yui-gb">
    
    <div class="yui-u first">
    <div id="mainONE" class="rounded" onclick="window.location.href='index.php... onMouseOver="changecolor (this.id, '#FFFFFF');" onMouseOut="changecolor (this.id, '#000000');">
    news</div>
    </div>
    <div class="yui-u second">
    <div id="mainTWO" class="rounded" onclick="window.location.href='about.php...
    <a href="/about.php">about</a></div>
    </div>
    <div class="yui-u third">
    <div id="mainTHREE" class="rounded" onclick="window.location.href='activitie...
    <a href="/activities.php">activities</a></d...
    </div>
    <div class="yui-u fourth">
    <div id="mainFOUR" class="rounded" onclick="window.location.href='ask.php'"...
    <a href="/ask.php">ask</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    <div id="ft" class="rounded">
    <p>FOOTER</p>
    </div>
    <div id="extraft" class="rounded">
    <p>FOOTER</p>
    </div>
    </div>
    <script type="text/javascript">
    Rounded('rounded', 10, 10);
    </script>
    </body>
    </html>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    function changecolor(id, color) {
    element = document.getElementById(id);
    element.style.background = color;
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by brownleaf View Post
    Code:
    <div id="mainONE" class="rounded" onclick="window.location.href='index.php... onMouseOver="changecolor (this.id, '#FFFFFF');" onMouseOut="changecolor (this.id, '#000000');">
    news</div>
    Umm… Why don’t you just use <div id="mainONE"><a href="index.php">news</a></div> with the CSS *#mainONE a { display: block; } *#mainONE a:hover { background: black; }? This removes two scripting dependencies.

    You could also replace the suggested CSS code with *#mainONE:hover { background: black; } if support for this effect in MSIE6 isn’t an issue. (WIE7 supports the hover pseudo‐class for all elements.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    60
    Thanks
    6
    Thanked 0 Times in 0 Posts
    None of those work =S.

    HOWEVER, my div container edges are rounded, and one thing that I noticed is (for the javascript one i mean) is that the mouseover goes up to the bit where it begins to round.

    This is the script I used:
    http://www.editsite.net/blog/rounded_corners.html

    Code:
    function NiftyCheck() {
      if(!document.getElementById || !document.createElement) {
        return false;
      }
      var b = navigator.userAgent.toLowerCase();
      if (b.indexOf("msie 5") > 0 && b.indexOf("opera") == -1) {
        return false;
      }
      return true;
    }
    
    function Rounded(className, sizex, sizey, sizex_b, sizey_b) {
    	var bk;
    	if (!NiftyCheck()) return;
    	if (typeof(sizex_b) == 'undefined')
    		sizex_b = sizex;
    	if (typeof(sizey_b) == 'undefined')
    		sizey_b = sizey;
    	var v = getElements(className);
    	var l = v.length;
    	for (var i = 0; i < l; i++) {
    		color = get_current_style(v[i],"background-color","transparent");
    		bk = get_current_style(v[i].parentNode,"background-color","transparent");
    		AddRounded(v[i], bk, color, sizex, sizey, true);
    		AddRounded(v[i], bk, color, sizex_b, sizey_b, false);
    	}
    }
    
    Math.sqr = function (x) {
      return x*x;
    };
    
    function Blend(a, b, alpha) {
    
      var ca = Array(
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
      );
      var cb = Array(
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
      );
      return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
    
      return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
                 + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
    }
    
    function AddRounded(el, bk, color, sizex, sizey, top) {
      if (!sizex && !sizey)
    	return;
      var i, j;
      var d = document.createElement("div");
      d.style.backgroundColor = bk;
      var lastarc = 0;
      for (i = 1; i <= sizey; i++) {
        var coverage, arc2, arc3;
        // Find intersection of arc with bottom of pixel row
        arc = Math.sqrt(1.0 - Math.sqr(1.0 - i / sizey)) * sizex;
        // Calculate how many pixels are bg, fg and blended.
        var n_bg = sizex - Math.ceil(arc);
        var n_fg = Math.floor(lastarc);
        var n_aa = sizex - n_bg - n_fg;
        // Create pixel row wrapper
        var x = document.createElement("div");
        var y = d;
        x.style.margin = "0px " + n_bg + "px";
    	x.style.height='1px';
    	x.style.overflow='hidden';
        // Make a wrapper per anti-aliased pixel (at least one)
        for (j = 1; j <= n_aa; j++) {
          // Calculate coverage per pixel
          // (approximates circle by a line within the pixel)
          if (j == 1) {
            if (j == n_aa) {
              // Single pixel
              coverage = ((arc + lastarc) * .5) - n_fg;
            }
            else {
              // First in a run
              arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
              coverage = (arc2 - (sizey - i)) * (arc - n_fg - n_aa + 1) * .5;
              // Coverage is incorrect. Why?
              coverage = 0;
            }
          }
          else if (j == n_aa) {
            // Last in a run
            arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
            coverage = 1.0 - (1.0 - (arc2 - (sizey - i))) * (1.0 - (lastarc - n_fg)) * .5;
          }
          else {
            // Middle of a run
            arc3 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j) / sizex)) * sizey;
            arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
            coverage = ((arc2 + arc3) * .5) - (sizey - i);
          }
          
          x.style.backgroundColor = Blend(bk, color, coverage);
    	  if (top)
    	      y.appendChild(x);
          else
    	      y.insertBefore(x, y.firstChild);
          y = x;
          var x = document.createElement("div");
    		x.style.height='1px';
    		x.style.overflow='hidden';
          x.style.margin = "0px 1px";
        }
        x.style.backgroundColor = color;
        if (top)
    	    y.appendChild(x);
        else
    		y.insertBefore(x, y.firstChild);
        lastarc = arc;
      }
      if (top)
    	  el.insertBefore(d, el.firstChild);
      else
    	  el.appendChild(d);
    }
    
    function getElements(className) {
    	var elements = [];
    	var el = document.getElementsByTagName('DIV');  
    	var regexp=new RegExp("\\b"+className+"\\b");
    	for (var i = 0; i < el.length; i++) 
    	{
    		if (regexp.test(el[i].className)) 
    			elements.push(el[i]);
    	}
    	return elements;
    }
    
    function get_current_style(element,property,not_accepted)
    {
      var ee,i,val,apr;
      try
      {
        var cs=document.defaultView.getComputedStyle(element,'');
        val=cs.getPropertyValue(property);
      }
      catch(ee)
      {
        if(element.currentStyle)
      	{
    	    apr=property.split("-");
    	    for(i=1;i<apr.length;i++) apr[i]=apr[i].toUpperCase();
    	    apr=apr.join("");
    	    val=element.currentStyle.getAttribute(apr);
       }
      }
      if((val.indexOf("rgba") > -1 || val==not_accepted) && element.parentNode)
      {
    	 if(element.parentNode != document) 
    		 val=get_current_style(element.parentNode,property,not_accepted);
    	 else
    		 val = '#FFFFFF';
      }
      if (val.indexOf("rgb") > -1 && val.indexOf("rgba") == -1)
    	  val = rgb2hex(val);
      if (val.length == 4)
    	  val = '#'+val.substring(1,1)+val.substring(1,1)+val.substring(2,1)+val.substring(2,1)+val.substring(3,1)+val.substring(3,1);
      return val;
    }
    
    function rgb2hex(value)
    {
    	var x = 255;
    	var hex = '';
    	var i;
    	var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
    	var array=regexp.exec(value);
    	for(i=1;i<4;i++) hex += ('0'+parseInt(array[i]).toString(16)).slice(-2);
    	return '#'+hex;
    }
    Could that be the reason for the mouseover only working on the middle strip (where there are no corners)?

    If so, how can I change it so it works even with rounded corners?


  •  

    Posting Permissions

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