Autor Zpráva
looba
Profil
Zdravím.
Potřebuji udělat klikací mapu z vyscreenovaného obrázku přihlašovací stránky Facebooku. Když dám obrázek do backgroundu, v prohlížeči je zobrazen přes celou stránku, ale do toho asi klikací mapa udělat nelze. Byl bych však rád, kdybych se mýlil, protože to by bylo nejlepší řešení.
Takže buď tabulka 100% na 100% stránky a do ní obrázek, anebo čistě jen obrázek 100% na 100%. Ani jedna možnost však nevyhovuje mým požadavkům, neboť jsem doposud nepřišel na to, jak to roztáhnout na celou stránku. Ať už tu tabulku s obrázkem, nebo čistě jen obrázek.
Budu vdečný za jakoukoliv radu..
margin
Profil *
html, body, img výška 100%, šířka 100%.
looba
Profil
Však to je jedna z možností, ale při rozbrazení v prohlížeči jsou vidět cca desetipixelový okraje okolo obrázku. Já ho potřebuju roztáhnout na celou stránku.
martin1312
Profil
Nemáš ten screen malý?
Rfilip
Profil
html, body, img - margin 0, padding 0
looba
Profil
Ani margin s paddingem na nule ty okraje kolem obrázku neodstraní. Obrázek má rozlišení 1349 x 673, i kdyby měl malý rozlišení, roztáhl by se, ale pořád by byly okraje. Jde mi o to, že když dáte přihlašovací stránku Facebooku, tak je krásně roztažená do stran prohlížeče. To samé docílím s backgroundem v body, ale asi to těžko můžu použít jako klikací mapu, abych zfunkčnil tlačítka.

Tady je kdyžtak i kód na vyzkoušení, nastavte si tam border 1 a je vidět, že se to s dosavadníma radama prostě do krajů neroztáhne. Díky za další tipy..
<html>
  <head>
  <title></title>
  </head> 
  <body>
    <map name="prihlasit">
      <area href="wall.html" shape="rect" coords="1065, 29, 1200, 200">     
    </map>
    <img src="pictures/background.png" usemap="#prihlasit" width="100%" height="100%" border="0">   
  </body>   
</html>
Trejpa
Profil
looba:
Ušetřím ti práci se slepou uličkou. Každá area se počítá v pixelech ze současného obrázku. Zvětšení nebo zmenšení obrázku areu neposune, zůstane na místě podle zadaných pixelů od levého horního rohu.

S pevnou výškou obrázku by šel nad obrázek napozicovat odkaz, který by měl levou pozici (nebo margin) a svou šířku zadanou v procentech ze šířky stránky, takže by se roztahoval i posouval zároveň se zvětšujícím se obrázkem. Ovšem s poměrovou nebo procentní výškou to tak jednoduché nebude, asi bude třeba skriptem upravovat pozici odkazu podle zjištěné výšky okna a případně zohlednit poměr stran.
margin
Profil *
looba:
Díky za další tipy..
Tipy jsi dostal, ale neřídíš se jimi, poradil jsem ti [#2], jak roztáhnout obrázek. Stěžoval sis [#3], že máš 8px okraj stránky, dostal jsi radu [#4], jak se tohoto okraje zbavit. pak sem hodíš kód, ze kterého je zřejmé, že jsi výše uvedené rady vesele hodil za hlavu.
Ještě v některých prohlížečích narazíš na problém mezery pod obrázkem, asi 3px bílý proužek. A hlavně při jiné velikosti viewportu ti nebude sedět obrázková mapa, protože nepřemýšlíš.


Dodatek:
Myslel jsem si, že souřadnice obrázkové mapy jde zadat v procentech, ale nejde to, je to slepá cesta, jak píše Trejpa.

Trejpa:
S pevnou výškou obrázku by šel nad obrázek napozicovat odkaz,
Já v tom nevidím problém:
http://jsfiddle.net/jprXd/1/
http://fiddle.jshell.net/jprXd/1/show/
Odkaz má rozměry v procentech a je v procentech napozicovaný, kvůli zviditelnění jsem mu dal červený rámeček.
Nelíbí se mi mizivá přístupnost takového řešení.
looba
Profil
Díky, pomohlo. Ještě jedna věc.
Chci to zobrazit v IE 9 či 10 a potřebuju, aby byla v okně vedle title ještě ikona Facebooku. Vytáhl jsem to přímo z jejich stránek, ve Firefoxu nebo Chromu se to bez problému zobrazí, ale v IE ne. Dej do rootu favicon.ico a foukni do kódu <link href=favicon.ico rel="shortcut icon"> vole, možná si řikáte, což je sice také řešení, protože to funguje v obou výše zmíněných prohlížečích, ale v IE 10 ne. Existuje nějaká speciální deklarace?
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Vítejte na Facebooku – zaregistrujte se, přihlaste se a zjistěte více</title>
  <link rel="shortcut icon" href="https://fbstatic-a.akamaihd.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico" />
  </head> 
  <body>
  </body>   
</html>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: