Всем привет! 
Задача следующая: надо к рисунку сделать привязанные сообщения, при этом рисунок должен менять размер согласно размеру браузера, и текст тоже вместе с ним.
Моё решение было следующим:
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Resizing image diagramm
</title>
<style type="text/css">
<!--
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.background {
font-face: Arial;
font-size: 14px;
position: absolute;
top: 10%;
right: 20%;
z-index: 2;
}
.background_two {
font-face: TimesNewRoman;
font-size: 14px;
background: green;
position: absolute;
top: 20%;
right: 30%;
z-index: 1;
}
img {
position: relative;
border: 0px;
z-index: 0;
}
-->
</style>
<script type="text/javascript">
function getClientWidth()
{
return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight()
{
return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientHeight:document.body.clientHeight;
}
function imageSize()
{
widthBrowser = getClientWidth() -3;
heightBrowser = getClientHeight() -4;
document.image.width = widthBrowser;
setTimeout('imageSize()', 1000);
}
</script>
</head>
<body onLoad="imageSize()">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<img src="image.jpeg" name="image" alt="" />
<div class="background">text</div>
<div class="background_two">text_two</div>
</td>
</tr>
</table>
</body>
</html>
|
но мне оно кажется кривым и ненадёжным по ряду причин:
1) при изменении размеров экрана сначала сдвигаются текстовые блоки, а потом уже вслед за ними картинка (дёрганное изменение размера)
2) на этот скрипт срабатывает защита браузера IE
3) проходит некоторое время, пока скрипт сообразит размеры картинки.
Вопрос: какое решение придумали бы вы? |