| Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа |
| |
|
правила · список вопросов · преамбула · обратная связь
Это бывает нужно для изменения картинки по наведению мыши (4.8), а также для эмуляции title в NN4 (5.8)
<style type="text/css"><!--
a.hiddenlink, a.hiddenlink:link, a.hiddenlink:visited,
a.hiddenlink:active, a.hiddenlink:hover {
color:...цвет текста по умолчанию...;
text-decoration:none;
cursor:default;
}
--></style>
...
<a href="javascript:;" class="hiddenlink">
/\ вот и начался /__\ мой новый / \ абзац!
<table border="0" cellspacing="6" cellpadding="0" align="left"> <tr> <td bgcolor="#000000"><font size="7" color="#FFFFFF" style="font-family:sans-serif;font-size:300%;"><b> А </b></font> </td> </tr> </table>вот и начался мой новый абзац!
Буквица - буква между двумя в <td>.
Параметры bgcolor в <td>, color,
size и style в <font> задавать по вкусу ;)
Это возможно, но если просто прописать bordercolor (!), то в NN рамка будет
объемная, а в IE - монотонная.
Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table>
параметры bordercolorlight="#RRGGBB" (!) и bordercolordark="#RRGGBB" (!),
которые нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ
экрана в графический редактор и узнав RGB-цвет светлых и темных «граней» рамки.
Чтобы рамка была монотонной и в IE, и в NN, делаем так:
<table border="0" cellspacing="0" cellpadding="...толщина отступа..." bgcolor="...цвет бордера...">
<tr>
<td>
<table width="100%" border="0" bgcolor="...цвет фона...">
..Наша табличка...
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="...цвет линий...>
<tr>
<td>
<table width="100%" cellspacing="...толщина линий..." border="0">
<tr bgcolor="...цвет фона первой строки...">
..первая строка...
</tr>
<tr bgcolor="...цвет фона второй строки...">
..вторая строка...
</tr>
...
</table>
</td>
</tr>
</table>
Нужно в верхнем ряду таблицы поставить в фиксированных ячейках width="XXX", а
в той, что должна занимать остальную часть таблицы, прописать width="100%".
При этом, если контент фиксированных ячеек по ширине меньше, чем номинальная
ширина ячейки, то нужно в такую ячейку поставить «распорку» - пустой
прозрачный gif с параметром width, равным ширине ячейки за вычетом удвоенного
cellpadding таблицы.
Если «свободных» ячеек должно быть больше одной, то пропишите их размер в
процентах, так, чтобы соотношение процентов соответствовало желаемому
соотношению размеров, а сумма составляла 100%. Hапример,
width="33%" и width="67%"
сделает две ячейки, одна вдвое шире другой.
Hужно поместить их в <div> с уменьшенной с помощью CSS высотой строк, а в
самих тегах прописать нормальную высоту строк:
<style type="text/css"><!--
div.noemptystrings{
line-height:0.4em;
}
div.noemptystrings form,div.noemptystrings h1,div.noemptystrings h2 {
line-height:1.2em;
}
--></style>
...
<div class="noemptystrings">
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<form>
Элементы формы...
</form>
</div>
Значения 0.4em и 1.2em в стилях ориентировочные, их нужно «подгонять» в
зависимости от используемых размеров шрифтов.
Для Mozilla/NN6 используем CSS:
table { empty-cells:show; }
Для NN4- нужно поместить в ячейку или «пустой» gif, с применением
правил, описанных в п. 2.23
title) показывался в NN4?Это можно сделать только для ссылок и для некоторых элементов формы. Если в NN4 нужно показывать комментарий для других элементов HTML, нужно поместить их в «пустую» ссылку, как описано в п. 5.1.
Вставляем в <head> скрипт:
<script language="JavaScript" type="text/javascript"><!--
var tipId=0;
var tipOffId=0;
function showTip(tipTxt,x,y) {
if (document.layers) {
if (!document.layers.tip) {
document.layers.tip=new Layer(window.innerWidth)
}
document.layers.tip.left=x-5;
document.layers.tip.top=y+15;
document.layers.tip.document.open();
document.layers.tip.document.write('<table border="0" '+
'cellspacing="0" cellpadding="1"><tr><td bgcolor="#000000">'+
'<table border="0" cellspacing="0" cellpadding="1"><tr><td '+
'style="background:#FFFFCC;font-family:sans-serif;"><small '+
'style="font-size:8pt;">'+unescape(tipTxt)+'</small></td></tr>'+
'</table></td></tr></table>');
document.layers.tip.document.close();
document.layers.tip.visibility='show'
tipOffId=setTimeout('tipOff();',6000)
}
}
function tipOn(tipTxt,eventObj) {
if (document.layers) {
tipId=setTimeout('showTip(\''+escape(tipTxt)+'\','+
eventObj.x+','+eventObj.y+');',500);
}
}
function tipOff() {
if (document.layers) {
clearTimeout(tipId);
clearTimeout(tipOffId);
if (document.layers.tip) {
document.layers.tip.visibility='hide'
}
}
}
//--></script>
...
<a href="page.html" title="Комментарий"
onmouseover="tipOn('Комментарий',event);" onmouseout="tipOff();">
Это возможно, если вставляемая страничка не содержит скриптов и если <iframe>
лежит не в ячейке таблицы.
Для начала вставляем в <head> скрипт:
<script language="JavaScript" type="text/javascript"><!--
function chIframe(lnk) {
if (document.layers){
if (document.layers[lnk.target]) {
if (document.layers[lnk.target].origX==undefined) {
document.layers[lnk.target].origX=
document.layers[lnk.target].pageX;
document.layers[lnk.target].origY=
document.layers[lnk.target].pageY;
}
with (document.layers[lnk.target]) {
left=origX;
clip.left=-origX;
top=origY;
clip.top=-origY;
src=lnk.href;
}
}
return false;
} else return true;
}
//--></script>
А <iframe> прописываем так:
<iframe name="myIframe" src="myiframe.html" width="X" height="Y">
<div id="myIframe"
style="position:relative;width:X;height:Y;include-source:url('myiframe.html');">
Ваш браузер не поддерживает вложения HTML-документов.
Нажмите <a href="myiframe.html" target="myIframe">сюда</a>,
чтобы увидеть документ в новом окне.
</div>
</iframe>
Если вы хотите, чтобы ваша ссылка изменяла содержимое iframe, пропишите ее так:
<a href="newpage.html" target="myIframe" onсlick="return chIframe(this);">
Вот пример:
<html>
<head>
<title>Страничка с неподвижным фоном</title>
<style type="text/css">
<!--
body{
background-image:URL('back.gif');
background-attachment:fixed;
margin:0px;padding:0px;
}
#body{position:absolute;z-index:1;width:auto;}
-->
</style>
<script language="JavaScript1.2" type="text/javascript"><!--
var oldScrollX=0;
var oldScrollY=0;
var NN=((document.layers)?true:false);
function fixBg() {
if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){
document.layers.bg.left=oldScrollX=window.pageXOffset;
document.layers.bg.top=oldScrollY=window.pageYOffset;
}
}
function makeBg() {
if (NN) {
document.layers.bg = new Layer(window.innerWidth);
document.layers.bg.left = 0;
document.layers.bg.top = 0;
document.layers.bg.height = window.innerHeight;
document.layers.bg.background.src = 'back.gif';
document.layers.bg.visibility = 'show';
document.layers.bg.zIndex = 0;
document.layers.bg.document.open();
document.layers.bg.document.write('<table width="100%" '+
'height="105%" border="0" cellspacing="0" cellpadding="0">'+
'<tr><td> </td></tr></table>')
document.layers.bg.document.close();
setInterval("fixBg();",100);
}
}
//--></script>
</head>
<body background="back.gif" onload="makeBg();"><script
language="JavaScript1.2"><!--
if (NN) document.write('<div id="body">')
//--></script>
...
...
...
Baш HTML
...
...
...
<script language="JavaScript1.2"><!--
if (NN) document.write('</div><table height="NNNN">'+
//
//Здесь пишем высоту странички в пикселах при разрешении 640x480
'<tr><td> </td></tr></table>');
//--></script></body>
</html>
правила · список вопросов · преамбула · обратная связь · наверх
По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)
|
Закладки на сайте Проследить за страницей |
Created 1996-2024 by Maxim Chirkov Добавить, Поддержать, Вебмастеру |