Показать сообщение отдельно
  #1 (permalink)  
Старый 01.10.2009, 13:36
Amberwood
 
Сообщений: n/a

Растягивание картинки
Добрый день!
Я написал скрипт, который растягивает картинку, придавая ей высоту и ширину документа.
<html>
<head>
<title>byLine</title>
<style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%;} #pic { z-index:1;  overflow: hidden; visibility:hidden;}</style>
</head>
<body>
<div id="content">
  <h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
  <h3>Lewis Carroll</h3>
  <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2>
  <h3>CHAPTER I</h3>
  <h4>Down the Rabbit-Hole</h4>
    <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
  <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
  <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>

</div>
<script>
function getDocumentHeight()
{
   return (document.body.scrollHeight >
document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}

function getDocumentWidth()
{
   return (document.body.scrollWidth >
document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}
width = getDocumentWidth();
height = getDocumentHeight();
document.writeln('<img src="_images/b2.png" id="imgId" width="', width,'" height="', height,'"  class="fon">')
</script>
</body>

Тут всё хорошо работает. Но в данном файле скрипт находится внутри body. Мне же необходимо немного дополнить скрипт, чтобы он еще и на CSS влиял, а для этого нужно расположить скрипт в head. Вот что у меня получилось:
<html>
<head>
<title>byLine</title>
<style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%;} #pic { z-index:1;  overflow: hidden; visibility:hidden;}</style>
<script>
function getDocumentHeight()
{
   return (document.body.scrollHeight >
document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}
function getDocumentWidth()
{
   return (document.body.scrollWidth >
document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}
function init(){
var imgId= document.getElementById('imgId');
imgId.width = getDocumentWidth();
imgId.height = getDocumentHeight();
}
</script>
</head>
<body onLoad="init();">
<div id="content">
  <h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
  <h3>Lewis Carroll</h3>
  <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2>
  <h3>CHAPTER I</h3>
  <h4>Down the Rabbit-Hole</h4>
    <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
  <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
  <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
  <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
</div>
<img src="_images/b2.png" id="imgId" class="fon">
</body>
Но оказалось, что этот вариант не работает. Я что-то не так сделал, или этот скрипт невозможно расположить в head?

Последний раз редактировалось Octane, 20.10.2009 в 21:38.
Ответить с цитированием