TheMaelstrom
09-19-2005, 06:57 PM
I've been tearing my hair out on this guys... :confused: I have the folder in place which holdsd the graphics in question but when I try to activate the onmouseover event it screws up... I've tried testing this on IE6 and NN8 to the same effect...
What's expected is for the border to highlight, the internal background to highlight (ie. switch to a lighter version) and the corner graphic to do the same... That's the theory... in practice the following happens:
* Border change works...
* Corner change works...
* Background image in the DIV reverts to the page background image??? :eek:
Last part is what's rattling my brain... :confused: Anyone have any ideas what's going on? All relevant graphics are valid, names are correct and in the folder "gfx", by which the folder is in the same directory as the page...
Thanks,
Maelstrom...
--- CODE BELOW ---
<html>
<head>
</head>
<style type="text/css">
.textDiv
{
border: 1px solid #1f7c1f;
background-image: url(./gfx/grille_low.gif);
background-position: center center;
background-repeat: repeat;
padding: 2px 2px 2px 10px;
color: #83e083;
font-family: Arial;
font-size: 8pt;
z-index: 0;
position: absolute;
}
.textDiv:first-line
{
font-weight: bold;
color: #33cc33;
}
.textDivCnr
{
border: 0px;
background-image: url(./gfx/corner_low.gif);
z-index: 5;
position: absolute;
height: 10px;
width: 10px;
background-repeat: no-repeat;
}
body
{
background-color: black;
margin: 0px;
padding-left: 5px;
background-image: url(./gfx/grille_gray.gif);
}
</style>
<body>
<div id="test1" style="width: 150px; height: 200px; left: 9px; top: 9px;" class="textDiv" onMouseOver="hLight('test1')" onMouseOut="lLight('test1')">
Heading<br>Benedictiones patris tui fortiores fuerunt benedictionibus genitorum meorum, usque ad terminum collium perpetuorum erunt super caput Joseph, et super verticem Nazaraei inter fratres suos.
</div>
<div id="test1_cnr" class="textDivCnr" style="left: 9px; top: 9px;"></div>
<script>
<!--
function hLight(elem)
{
var elemDiv, elemCnr;
elemDiv = elem + "";
elemCnr = elem + "_cnr";
document.getElementById(elemDiv).style.backgroundImage = "url(./gfx/grille_high.gif)";
document.getElementById(elemDiv).style.backgroundRepeat = "repeat";
document.getElementById(elemCnr).style.backgroundImage = "url(./gfx/corner_high.gif)";
document.getElementById(elemDiv).style.border = "1px solid #29a429";
}
function lLight(elem)
{
var elemDiv, elemCnr;
elemDiv = elem + "";
elemCnr = elem + "_cnr";
document.getElementById(elemDiv).style.backgroundImage = "url(./gfx/grille_low.gif)";
document.getElementById(elemDiv).style.backgroundRepeat = "repeat";
document.getElementById(elemCnr).style.backgroundImage = "url(./gfx/corner_low.gif)";
document.getElementById(elemDiv).style.border = "1px solid #1f7c1f";
}
//-->
</script>
</body>
</html>
What's expected is for the border to highlight, the internal background to highlight (ie. switch to a lighter version) and the corner graphic to do the same... That's the theory... in practice the following happens:
* Border change works...
* Corner change works...
* Background image in the DIV reverts to the page background image??? :eek:
Last part is what's rattling my brain... :confused: Anyone have any ideas what's going on? All relevant graphics are valid, names are correct and in the folder "gfx", by which the folder is in the same directory as the page...
Thanks,
Maelstrom...
--- CODE BELOW ---
<html>
<head>
</head>
<style type="text/css">
.textDiv
{
border: 1px solid #1f7c1f;
background-image: url(./gfx/grille_low.gif);
background-position: center center;
background-repeat: repeat;
padding: 2px 2px 2px 10px;
color: #83e083;
font-family: Arial;
font-size: 8pt;
z-index: 0;
position: absolute;
}
.textDiv:first-line
{
font-weight: bold;
color: #33cc33;
}
.textDivCnr
{
border: 0px;
background-image: url(./gfx/corner_low.gif);
z-index: 5;
position: absolute;
height: 10px;
width: 10px;
background-repeat: no-repeat;
}
body
{
background-color: black;
margin: 0px;
padding-left: 5px;
background-image: url(./gfx/grille_gray.gif);
}
</style>
<body>
<div id="test1" style="width: 150px; height: 200px; left: 9px; top: 9px;" class="textDiv" onMouseOver="hLight('test1')" onMouseOut="lLight('test1')">
Heading<br>Benedictiones patris tui fortiores fuerunt benedictionibus genitorum meorum, usque ad terminum collium perpetuorum erunt super caput Joseph, et super verticem Nazaraei inter fratres suos.
</div>
<div id="test1_cnr" class="textDivCnr" style="left: 9px; top: 9px;"></div>
<script>
<!--
function hLight(elem)
{
var elemDiv, elemCnr;
elemDiv = elem + "";
elemCnr = elem + "_cnr";
document.getElementById(elemDiv).style.backgroundImage = "url(./gfx/grille_high.gif)";
document.getElementById(elemDiv).style.backgroundRepeat = "repeat";
document.getElementById(elemCnr).style.backgroundImage = "url(./gfx/corner_high.gif)";
document.getElementById(elemDiv).style.border = "1px solid #29a429";
}
function lLight(elem)
{
var elemDiv, elemCnr;
elemDiv = elem + "";
elemCnr = elem + "_cnr";
document.getElementById(elemDiv).style.backgroundImage = "url(./gfx/grille_low.gif)";
document.getElementById(elemDiv).style.backgroundRepeat = "repeat";
document.getElementById(elemCnr).style.backgroundImage = "url(./gfx/corner_low.gif)";
document.getElementById(elemDiv).style.border = "1px solid #1f7c1f";
}
//-->
</script>
</body>
</html>