+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS Obrazek popup (/thread-css-obrazek-popup)
Strony:
1
2
CSS Obrazek popup - Drakhtul - 06-12-2012
Witam. Mam taki problem. Chciałbym żeby po najechaniu na obrazek wyświetlała się ramka z informacjami. Tak jak w kodzie, który umieściłem ale tutaj jest tylko do tekstu. Mógłby go ktoś przerobic żeby działał na obrazkach?
HTML :
Kod:
<a class="tooltip">Classic<span class="classic">TEXT</span></a>CSS :
Kod:
a.tooltip {
color: #000000; outline: none;
position: relative;
}
a.tooltip span {
margin-left: -999em;
position: absolute;
}
a.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
left: 1em;
top: 2em;
margin-left: 0;
width: 250px;
background:#000;
color:#cecece;
padding: 5px 5px 5px 10px;
}
a.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
a.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
a.classic { padding: 0.8em 1em;}
a.custom { padding: 0.5em 0.8em 0.8em 2em;}RE: CSS Obrazek popup - Kartofelek - 06-12-2012
Twój kod ma błędy.
Możesz tak to zrobić:
Kod:
a.tooltip {
position:relative;
}
a.tooltip span {
display:none;
}
a.tooltip:hover span {
display:block;
background:white;
padding:5px 15px;
font:12px Arial, sans-serif;
color:#333;
position:absolute;
right:-100px;
top:30px;
}
<a href="">
<img src="" />
<span>Lorem ipsum sit dolor</span>
</a>Możesz też wykorzystać :before i http://css-tricks.com/css-content/
RE: CSS Obrazek popup - Drakhtul - 06-12-2012
Kod, który wysłałeś nie działa. Czekam na inne odpowiedzi
RE: CSS Obrazek popup - andrzejhi - 07-12-2012
Przepraszam może jestem głupi albo nie potrafię czytać ale coraz mniej rozumiem pytania które zamieszczacie. Rozumiem że na stronie jest wyświetlony obrazek a jak na niego najedziemy kursorem to obok się wyświetla ukryty tekst? Czy dobrze zrozumiałem. Ale jeśli tak to kompletnie nie rozumiem zamieszczonego kodu. przecież on nic nie ukrywa po najechaniu tekstu.
A poza tym to co zamieścił Kartofelek jest rozwiązaniem twojego problemu. Trzeba tylko wstawić tekst oraz ścieżkę do obrazka.
RE: CSS Obrazek popup - Drakhtul - 07-12-2012
Nie?
![[Obrazek: OPGiL.png]](http://i.imgur.com/OPGiL.png)
A to co to jest?
Czekam na pomoc
RE: CSS Obrazek popup - andrzejhi - 07-12-2012
No dobra ale robienie tego marginesem gdy jest styl block: none jest dziwnym podejsciem.
Ale nadal jestem zdania że kod Kartofelka powinien dzialac.
RE: CSS Obrazek popup - Kartofelek - 07-12-2012
Działać działa. Żadna przecież filozofia. Masz ukryty span (dispaly:none), który po najechaniu linku pokazujes (display:block). Reszta to dodatki.
RE: CSS Obrazek popup - Drakhtul - 07-12-2012
![[Obrazek: screenshot001pp.png]](http://img141.imageshack.us/img141/6047/screenshot001pp.png)
Kod Kartofelka powinien dzialac? U mnie wyglada to tak...
Marginesem czy blockiem... ja sie na tym nie znam... chcialbym o ile to mozliwe zeby ktos mi podal dzialajacy kod
RE: CSS Obrazek popup - Kartofelek - 07-12-2012
Kod podałem prawidłowy, to że go źle używasz, to już inna spraw
RE: CSS Obrazek popup - Drakhtul - 07-12-2012
Faktycznie cos tam smiga... nie wiem czy zapomniales czy zrobiles to specjalnie ale nie dopisales <a class="tooltip" href="#"> i przez to cale zamieszanie. Kod jest w gruncie rzeczy poprawny. Wyswietla ramke z tekstem tak jak prosilem. Dzieki. Tylko ze ja chcialbym zeby ta ramka z tekstem wyswietlala sie bezposrednio pod kursorem a nie pod obrazkiem. Da rade cos takiego zrobic czy nie bardzo? Moze jakis javascript? Pomoze ktos?