Uciekające obrazki


(esc) #1

Jak wstawiam kod:

a { text-decoration: none }

  a {position: relative;}

  a img {display:none;}

  a:hover img {border:none !important;display: block ; position: absolute ; top: em; right: 8px;}/

który odpowiada za pojawienie się obrazka po najechaniu myszką na link, to reszta obrazków na stronie znika.

Jak to zablokować :?:


(matiit) #2

Nadaj oddzielną klasę obrazkom, które mają się pojawiać po najechaniu na link.


(esc) #3

Tylko jak nadać :?

Mam taki link:

14,03 m2  [/code]

(manieKMP) #4

1.jpg

PS. Dla tego 1.jpg"


(esc) #5

Tu gdzie jest twoja_nazwa to mam wpisać nazwę z mojego linku :?:


(manieKMP) #6

Niekoniecznie, wymyślasz jakąś nazwę klasy, bez polskich znaków, bez spacji (inaczej nadasz więcej klas dla elementu), czy jakiś innych znaków specjalnych, choć myślniki lub ta “krecha” z przykładu mogą być, “zakazane” za to są np. kropka, dwukropek, przecinek, średnik, hash, nawiasy itp. (wykorzystywane w zapisie kodu css…), nie powinieneś również korzystać nazw tagów.

Może być słowo określające element np. “kontakt”, “portfolio” (jeśli link prowadzi do strony kontaktowej) lub inne, które będziesz kojarzył z danym elementem, np. “lizak1”, “qwerty”, “mw”, ogólnie może być prawie dowolny ciąg znaków, np. “ksjfdl396s”…


(esc) #7

(R@z0r) #8

Jeśli nie robisz tego z powodu własnych zainteresować to lepiej to komuś zleć za kilka złotych, jeśli robisz to ze względu na zainteresowania to może zacznij od jakiegoś kursu HTML+CSS, bo na takie dochodzenie do rezultatu “od tyłu” to szkoda Twojego czasu.

Napisałem rozwiązanie twojego problemu: http://cdpn.io/BLhto


(manieKMP) #9

@esc, urywek z kodu jaki podałeś:

2 1.jpg

do podkreślonej części dodana jest klasa i zmienia podany przez Ciebie kod na:

14,03 m2 [/code]

(esc) #10

[quote name="manieKMP

14,03 m2 [/code]

(Konrad Kosowski) #11

Pokaz tego css co to go tam nasmoliles.

Na przyszlosc jednak radze oddzielac javascript od html, unikac takich kwiatkow jak file:///D:/strona/~pajtemp.htm#, puste tagow nie wstawiach (chyba, ze value dla inputow, albo atrybut dla Jquery).


(manieKMP) #12

A co zrobiłeś w css’ie?

Zmieniłeś podany w pierwszym poście np. na:

a {text-decoration: none; position: relative;}

a img {display:none;}

a:hover .twoja_nazwa {display:block; border: none; position: absolute; top: 1em; right: 8px;}

PS. Może masz gdzieś w kodzie konflikt lub błąd, np. w css’ie po kilka wystąpień sprzecznych własności dla odnośników…


(esc) #13

Może niedokładnie na początku napisałem, ale miałem na myśli odsyłacze obrazkowe, które mi znikają.

Zdjęcia i inne obrazki graficzne są na miejscu.


(Konrad Kosowski) #14

Nic juz z tego nie rozumiem… Na chwile oczyscmy kod html. Efekt bedzie taki:

14,03 m2 
 [/code]




Po jego uruchomieniu pojawi sie 14,03 m^2 i jakis tam obrazek. Anchor bedzie (domyslnie) podkreslony. Teraz dodajmy tego CSS:

[code]14,03 m2 1.jpg

Abstrahujac od bledu w parametrze TOP (em bez jednostki). Od gory:

zdejmujemy podkreslenie (w ogole brak dekoracji) dla anchora

Pozycjonujemy relatywnie do obiektu nadrzednego dla anchora

ukrywamy wszystkie img, dla ktorych obiektem nadrzednym jest anchor

w koncu dla wszystkich img, dla ktorych obiektem nadrzednym jest anchor, nad ktorym znajduje sie kursor zdejmujemy ramke (!important implikuje, ze jesli istnieje jakas inna regula, ktora ustawia inaczej, to zostanie ona pominieta), nastepnie zmieniony zostaje display dla tych img (swoja droga, rozumiem, ze to ma byc regula, ktora pokazuje, ale zdaje sie, ze wlasciwsze byloby display:inline), zaczynamy pozycjonowac absolutnie (sic!), w koncu blednie ustawiamy wartosc TOP oraz przenosimy obrazem o 8 pikseli w prawo.

Wobec tego - nie mam bladego pojecia jaki efekt chcialbys uzyskac. Czy obrazki miedzy tagami A maja byc stale widoczne? Co wiec ma sie dziac, gdy ktos najedzie na linka? No i przyklad by sie przydal gdzies udostepniony…


(manieKMP) #15

Chyba już wiem o co chodzi… :wink:

Odnośniki obrazkowe, które już wcześniej najwyraźniej miałeś, po dodaniu podanego przez Ciebie kodu, są/były zależne od “a img {display:none;}”, co nakazuje niewyświetlanie obrazków we wszystkich linkach…

Pierwotna koncepcja z określeniem klasy jest właściwa, z tym że te całe “display:none;” dalej pozostawało dla ogółu :wink:

Poprawka do kodu css z pierwszego postu:

a {text-decoration: none; position: relative;}

a .twoja_nazwa {display:none;}

a:hover .twoja_nazwa {display:block; border: none !important; position: absolute; top: 1em; right: 8px;}

jak chcesz, to za “twoja_nazwa” daj “dymek” albo “popup”

Dodaj klasy do obrazków, które domyślnie mają być ukryte, a dopiero po najechaniu pojawiać się.

PS. Powyższy kod w pierwszej linii odnosi się do ogółu linków (usuwa podkreślenie i pozycjonuje je relatywnie…), dwa kolejne wiersze odnoszą się do linków, w których są zawarte obrazki o konkretnej klasie i tylko na nią będą działać. Jeżeli masz na stronie linki tekstowe, z którymi się dzieją niechciane rzeczy (np. brak podkreślenia), wiedz że jest/będzie to wina “a {text-decoration: none; position: relative;}”…


(esc) #16

manieKMP :smiley: dzieki Ci Panie =D>