position: absolute;
top:0;
bottom:0;
left:0;
right:0;
Плавное изменение цвета фона с PNG-маской.
Оформлял тут сайтик, применил такой скрипт:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Fade effects and PNG-transparency</title>
<script type="text/javascript">
<!--
function fade(sElemId, sRule, bBackward) {
if (!document.getElementById(sElemId)) return;
var aRuleList = sRule.split(/\s*,\s*/);
for (var j = 0; j < aRuleList.length; j++) {
sRule = aRuleList[j];
if (!fade.aRules[sRule]) continue;
var i=0;
if (!fade.aProc[sElemId]) {
fade.aProc[sElemId] = {};
}
else if (fade.aProc[sElemId][sRule]) {
i = fade.aProc[sElemId][sRule].i;
clearInterval(fade.aProc[sElemId][sRule].tId);
}
if ((i==0 && bBackward) || (i==fade.aRules[sRule][3] && !bBackward)) continue;
fade.aProc[sElemId][sRule] = {'i':i, 'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")', fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)};
}
}
fade.aProc = {};
fade.aRules = {};
fade.run = function(sElemId, sRule) {
fade.aProc[sElemId][sRule].i += fade.aProc[sElemId][sRule].bBackward?-1:1;
var finishPercent = fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3];
var startPercent = 1 - finishPercent;
var aRGBStart = fade.aRules[sRule][0];
var aRGBFinish = fade.aRules[sRule][1];
document.getElementById(sElemId).style[fade.aRules[sRule][2]] = 'rgb('+
Math.floor( aRGBStart['r'] * startPercent + aRGBFinish['r'] * finishPercent ) + ','+
Math.floor( aRGBStart['g'] * startPercent + aRGBFinish['g'] * finishPercent ) + ','+
Math.floor( aRGBStart['b'] * startPercent + aRGBFinish['b'] * finishPercent ) +')';
if ( fade.aProc[sElemId][sRule].i == fade.aRules[sRule][3] || fade.aProc[sElemId][sRule].i ==0) clearInterval(fade.aProc[sElemId][sRule].tId);
}
fade.back = function (sElemId, sRule){fade(sElemId, sRule, true);};
fade.addRule = function (sRuleName, sFadeStartColor, sFadeFinishColor, sCSSProp, nMiddleColors, nDelay) {
fade.aRules[sRuleName] = [fade.splitRGB(sFadeStartColor), fade.splitRGB(sFadeFinishColor), fade.ccs2js(sCSSProp), nMiddleColors || 50, nDelay || 1];
}
fade.splitRGB = function (color){var rgb = color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g); for (var i=0; i<3; i++) rgb = parseInt(rgb, 16); return {'r':rgb[0],'g':rgb[1],'b':rgb[2]};};
fade.ccs2js = function (prop){var i; while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2); return prop;};
fade.addRule("fadeRule0","#7C799D","#0000FF","background-color", 30);
fade.addRule("fadeRule1","#000000","#FFFFFF","color", 30);
function f_on() {
this.style.cursor = "pointer";
fade(this.id, "fadeRule0");
fade(this.id, "fadeRule1");
}
function f_off() {
fade.back(this.id, "fadeRule0");
fade.back(this.id, "fadeRule1");
}
function im(obj,fi) {
if (obj.filters) {
obj.style.backgroundImage = 'url('+fi.src+')';
obj.runtimeStyle.backgroundImage = "none";
obj.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + fi.src + "',sizingMethod='scale')";
}
else {
obj.style.backgroundImage = 'url('+fi.src+')';
}
}
function on() {
var cells = document.getElementsByTagName("td");
fonImg = new Image();
fonImg.src = 'img/cat_main.png';
for (var j=0; j<cells.length; j++) {
//if (cells[j].className == "my_class") {
cells[j].id = "td" + j;
cells[j].onmouseover = f_on;
cells[j].onmouseout = f_off;
cells[j].style.backgroundColor = "#7C799D";
cells[j].style.padding = '15px 5px 15px 10px';
if (/*@cc_on 1 | @*/ 0) cells[j].style.height = '100%';
im(cells[j],fonImg);
//}
}
}
//-->
</script>
</head>
<body bgcolor="#7C799D" onload="on()" style="font-family: Arial; font-weight: bold">
<table width="30%" id="table1">
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
</table>
</body>
</html>[/HTML]
Здесь можно посмотреть в работе.
Это одно из возможных применений функций Игоря Цыгырлаш, влом было что-то придумывать.
Закрытые слэшами строчки можно использовать для отбора элементов по классу.
Да, кто знает, что нужно дописать после
obj.style.backgroundImage = 'url('+fi.src+')';
чтобы FF растягивал рисунок по высоте? А то я на скорую руку просто подогнал размерчик...
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Fade effects and PNG-transparency</title>
<script type="text/javascript">
<!--
function fade(sElemId, sRule, bBackward) {
if (!document.getElementById(sElemId)) return;
var aRuleList = sRule.split(/\s*,\s*/);
for (var j = 0; j < aRuleList.length; j++) {
sRule = aRuleList[j];
if (!fade.aRules[sRule]) continue;
var i=0;
if (!fade.aProc[sElemId]) {
fade.aProc[sElemId] = {};
}
else if (fade.aProc[sElemId][sRule]) {
i = fade.aProc[sElemId][sRule].i;
clearInterval(fade.aProc[sElemId][sRule].tId);
}
if ((i==0 && bBackward) || (i==fade.aRules[sRule][3] && !bBackward)) continue;
fade.aProc[sElemId][sRule] = {'i':i, 'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")', fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)};
}
}
fade.aProc = {};
fade.aRules = {};
fade.run = function(sElemId, sRule) {
fade.aProc[sElemId][sRule].i += fade.aProc[sElemId][sRule].bBackward?-1:1;
var finishPercent = fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3];
var startPercent = 1 - finishPercent;
var aRGBStart = fade.aRules[sRule][0];
var aRGBFinish = fade.aRules[sRule][1];
document.getElementById(sElemId).style[fade.aRules[sRule][2]] = 'rgb('+
Math.floor( aRGBStart['r'] * startPercent + aRGBFinish['r'] * finishPercent ) + ','+
Math.floor( aRGBStart['g'] * startPercent + aRGBFinish['g'] * finishPercent ) + ','+
Math.floor( aRGBStart['b'] * startPercent + aRGBFinish['b'] * finishPercent ) +')';
if ( fade.aProc[sElemId][sRule].i == fade.aRules[sRule][3] || fade.aProc[sElemId][sRule].i ==0) clearInterval(fade.aProc[sElemId][sRule].tId);
}
fade.back = function (sElemId, sRule){fade(sElemId, sRule, true);};
fade.addRule = function (sRuleName, sFadeStartColor, sFadeFinishColor, sCSSProp, nMiddleColors, nDelay) {
fade.aRules[sRuleName] = [fade.splitRGB(sFadeStartColor), fade.splitRGB(sFadeFinishColor), fade.ccs2js(sCSSProp), nMiddleColors || 50, nDelay || 1];
}
fade.splitRGB = function (color){var rgb = color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g); for (var i=0; i<3; i++) rgb = parseInt(rgb, 16); return {'r':rgb[0],'g':rgb[1],'b':rgb[2]};};
fade.ccs2js = function (prop){var i; while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2); return prop;};
fade.addRule("fadeRule0","#7C799D","#0000FF","background-color", 30);
fade.addRule("fadeRule1","#000000","#FFFFFF","color", 30);
function f_on() {
this.style.cursor = "pointer";
fade(this.id, "fadeRule0");
fade(this.id, "fadeRule1");
}
function f_off() {
fade.back(this.id, "fadeRule0");
fade.back(this.id, "fadeRule1");
}
function im(obj,fi) {
if (obj.filters) {
obj.style.backgroundImage = 'url('+fi.src+')';
obj.runtimeStyle.backgroundImage = "none";
obj.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + fi.src + "',sizingMethod='scale')";
}
else {
obj.style.backgroundImage = 'url('+fi.src+')';
}
}
function on() {
var cells = document.getElementsByTagName("td");
fonImg = new Image();
fonImg.src = 'img/cat_main.png';
for (var j=0; j<cells.length; j++) {
//if (cells[j].className == "my_class") {
cells[j].id = "td" + j;
cells[j].onmouseover = f_on;
cells[j].onmouseout = f_off;
cells[j].style.backgroundColor = "#7C799D";
cells[j].style.padding = '15px 5px 15px 10px';
if (/*@cc_on 1 | @*/ 0) cells[j].style.height = '100%';
im(cells[j],fonImg);
//}
}
}
//-->
</script>
</head>
<body bgcolor="#7C799D" onload="on()" style="font-family: Arial; font-weight: bold">
<table width="30%" id="table1">
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
<tr>
<td>abra kadabra</td>
</tr>
</table>
</body>
</html>[/HTML]
Здесь можно посмотреть в работе.
Это одно из возможных применений функций Игоря Цыгырлаш, влом было что-то придумывать.
Закрытые слэшами строчки можно использовать для отбора элементов по классу.
Да, кто знает, что нужно дописать после
obj.style.backgroundImage = 'url('+fi.src+')';
чтобы FF растягивал рисунок по высоте? А то я на скорую руку просто подогнал размерчик...
Ещё, уважаемые модераторы, я загрузил страницу в "Мои исходники" и png-картинку пришлось положить туда же. Если можно, уберите на неё ссылку, но саму картинку то оставить нужно, чтобы всё нормально отображалось. Да и вообще, не место этой страничке среди исходников, а куда положить не знаю. Спасибо.
Ну почему не место? Просто нужно правильно оформить код, положить все с картинкой в ZIP архив и закачать
Цитата: Ghirik
Это одно из возможных применений функций Игоря Цыгырлаш, влом было что-то придумывать.
А в оригинале функции тоже написаны в одну строку? Они так быстрее работают что-ли? ;)
Красивое меню, мне понравилось.
Все это скрыть от IE 6 и младше.
Либо задавать высоту с помощью скрипта.
Цитата: Ghirik
obj.style.backgroundImage = 'url('+fi.src+')';
чтобы FF растягивал рисунок по высоте? А то я на скорую руку просто подогнал размерчик...
чтобы FF растягивал рисунок по высоте? А то я на скорую руку просто подогнал размерчик...
Для того, что б картинка растягивалась в FF на всю высоту родительского элемента, придется родительскому, в CSS, задать position: relative; , а самой картинке:
Код:
Все это скрыть от IE 6 и младше.
Либо задавать высоту с помощью скрипта.