Tak na szybko:
1. Otwórz w gimipe obrazek DALEJ.PNG i obróć go o 50 stopni. Następnie zapisz go w katalogu ,gdzie masz zapisany plik start.html i overtogif.gif
2. Zmień kod w pliku start.html na taki:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
<title> [tytuł strony] </title>
<style type="text/css" >
body{
margin:0;
padding:0;
width: 100%;
height:100%;
background-color:#232522;
}
img{ border:0;}
#splash{
background:pink url(overtogif.gif) no-repeat;
margin:0;
width: 1024px;
height: 768px;
position:absolute;
top: 50%;
left: 50%;
margin-left: -512px;
margin-top: -384px;
}
#link_strona{
position:relative;
background: transparent url(DALEJ.PNG) no-repeat;
dislpay: block;
width: 264px;
height: 292px;
top: 400px;
left: 380px;
outline: none;
}
#link_forum{
position:relative;
background: transparent url(DALEJ.PNG) no-repeat;
width: 264px;
height: 292px;
display: block;
top: -310px;
left: 590px;
outline: none;
}
</style>
</head>
<body>
<div id="splash">
<a id="link_strona" href="http://overto.xaa.pl/"><img alt="" src="DALEJ.PNG" /></a>
<a id="link_forum" href="http://overto.xaa.pl/forum"><img alt="" src="DALEJ.PNG" /></a>
</div>
</body>
</html>
Działa na 100% w najnowszych: Firefoxie, IE 9 i Operze.
Zamiast rozciągania tła na cała stronę, ustawiłem na sztywno warstwę z grafiką w gif, wyśrodkowałem ją i wewnątrz niej zakotwiczyłem i wypoziomowałem linki do dalszych stron. Dla innych rozdzielczości można w javascript zrobić ich detekcję i do każdej napisać oddzielny kod css i przygotować większą grafikę tła.
Można też zrobić jeden duży obraz tła i skalować go za pomocą css, ale problemem będzie dopasowanie pozycji ukośnych linków.
Ogólne dyskusje
