Zaloguj się

erfix · 09-09-2012, 23:41

Siemka
mam obrazek i chcę by jego poszczególne elementy były menu. Czyli jak ktoś najedzie na domek i go kliknie to zęby przenosiło do strony głównej jak na ławkę to czat czy na głośnik to do muzyki. To jest jeden obrazek z wieloma elementami. Musze go pociąć ?; czy jest jakiś sposób zęby ustawić obrazek jako tło a na niego nanieść "punkty" odsyłaczy??

**Kartofelek** · 09-09-2012, 23:45

jest. Niewidzialne linki z pozycją absolutną, a obrazek jako tło elementy nadrzędnego z pozycjonowaniem relatywnym.

erfix · (Ten post był ostatnio modyfikowany: 10-09-2012, 00:14 przez erfix.)

No to gitara. Wiec teraz muszę mieć jakiegoś div'a i w nim jako tło ostawić obrazek, tak ? Jakiejś wartości jeszcze muszę podać poza (position:relative Wink

?

Edit
Obrazek mam ale jak zrobić te linki?

erfix · 10-09-2012, 00:46

Co nie co z tego kumam ale to jest pliku index.html? tak? Nic do css nie muszę dodawać tylko sobie linki poustawiać ? A jak ustawić wielkość linku bo położenie już widzę.

erfix · (Ten post był ostatnio modyfikowany: 10-09-2012, 03:12 przez erfix.)

Wielkie dzięki. Już zabieram się do pracy Smile

EDIT

Elo. Zrobiłem to tak jak napisał kornell i działa Smile

ale są dwie małe wady.
1. Do o koła obrazka pojawiła się ramka na 1px; a border jest na 0.
2. Na środku obrazka pojawiła się ikonka taka jak na stronach że brak obrazka.

**Kartofelek** · 10-09-2012, 13:55

Żadne map tylko odpowiednio stylowana lista

Kod:
<ul style="backround:url(.....) no-repeat; width:....px; height:....px; position:relative; list-style:none; padding:0; margin:0;">

<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem pierwszą pozycją menu. tego tekstu i tak nie bedzie widac</li>

<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem fruga pozycją menu. tego tekstu i tak nie bedzie widac</li>

<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem trzecia pozycją menu. tego tekstu i tak nie bedzie widac</li>

</ul>

erfix · (Ten post był ostatnio modyfikowany: 13-09-2012, 05:17 przez erfix.)

Chrome, IE nawet nie mam zainstalowanej. Tego co napisał Kartofelek nie bardzo kminie i nie bardzo to działa;/

tak wygląda mój kod

Kod:
<img src="background:url(images/urban.png) no-repeat center;" width="800" height="600" border="0" usemap="#map" />

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:erfix -->

<area shape="rect" coords="282,59,476,315" alt="Strona GĹ‚Ăłwna" href="index.html" />

<area shape="rect" coords="577,117,716,318" alt="Radio" href="radio.html" />

<area shape="rect" coords="327,450,509,565" alt="Galeria" href="galeria.html" />

<area shape="rect" coords="123,455,251,595" alt="Forum" href="forum.pl" />

<area shape="rect" coords="541,489,667,600" alt="Imprezy" href="imprezy.html" />

<area shape="rect" coords="600,330,763,479" alt="NEWSY" href="newsy.html" />

</map>

Chyba że gdzieś powinienem mieć jakiś plik jeszcze a o tym nic nie wiem . Ten kod mam w index.html a obrazek w folderze images. Coś jeszcze ?

erfix · 14-09-2012, 02:51

Wiec jak powinno być? Bo w jakimś poradniku wyczytałem że własnie tak.

erfix · 16-09-2012, 20:34

Wielkie dzięki, działa.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie