...

View Full Version : Div containers changing background color when hovering over them?



brownleaf
08-24-2008, 04:08 AM
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


<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):

<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>

rangana
08-24-2008, 06:43 AM
function changecolor(id, color) {
element = document.getElementById(id);
element.style.background = color;
}

Arbitrator
08-24-2008, 07:41 AM
<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.)

brownleaf
08-24-2008, 01:38 PM
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


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)+v al.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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum