Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP]Wyświetlenie obrazka po najechaniu na nazwę.
Forum PHP.pl > Forum > Przedszkole
ciapus4
29.08.2012, 13:52:00
Witam, jakiego kodu użyć, żeby po najechaniu np. na słowo "zestaw z grila" bez klikania ukazał się obrazek przedstawiający ów zestaw.


Pozdrawiam
cv65
29.08.2012, 13:56:54
Musisz napisać takie coś np w Jquery do tego użyj hover
ciapus4
29.08.2012, 13:58:29
A, można przykładowy kod poprosić ?
b4rt3kk
29.08.2012, 14:00:52
Najpierw musisz ująć te słowa w jakiś blok tekstu wyodrębniony, nadać mu id czy coś, żeby móc to uchwycić w jQuery.

[HTML] pobierz, plaintext 
  1. <em rel="costam1">zestaw z grilla</em>
[HTML] pobierz, plaintext


później w jQuery trzeba sobie funkcję machnąć:

[HTML] pobierz, plaintext 
  1. $(function() { 
  2. $('costam1').mouseover(function(){
  3. //obsługa funkcji
  4. });
  5. });
[HTML] pobierz, plaintext
ze4lot
29.08.2012, 14:01:43
Ciężko jest zaproponować jakiś gotowy kod gdyż sposobów na rozwiązanie twojego problemu jest sporo. Jeśli chodzi o rozwiązanie w czystym PHP i HTML jest to niestety nie możliwe i trzeba posiłkować się CSS'em / JavaScript'em / ajax'em.
Imo najprościej będzie użyć jQuery (http://api.jquery.com/mouseover/). Do reszty powinieneś dojść sam gdyż nie będzie to trudne.
ciapus4
29.08.2012, 15:31:13
Dziękuje z zainteresowanie się tematem, w związku z tym, że jestem kompletnie zielony czytaj (uczę się), może ktoś zaproponować jakiś mały przykład, np dla jednego napisu, dajmy nato |schabowy| i wyświetla się zdjęcie schabowego (pewnie truje) wstydnis.gif


pozdrawia
b4rt3kk
29.08.2012, 18:38:37 
[HTML] pobierz, plaintext 
  1. <head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  3. <script>
  4. $(document).ready(function() {
  5. $('.naglowek').mouseover(function(){
  6. $('.obrazek').show('slow');
  7. });
  8. $('.obrazek').mouseout(function(){
  9. $('.obrazek').hide('slow');
  10. });
  11. });
  12. </script>
  13. <style>
  14. .obrazek {
  15. display: none;
  16. width: 200px;
  17. height: 200px;
  18. border: solid 1px black;
  19. background: red;
  20. position: absolute; top: 0px; left: 0px;
  21. }
  22. .naglowek {
  23. background: green;
  24. position: relative;
  25. width: 200px;
  26. }
  27. </style>
  28. </head>
  29.  
  30. <div class="naglowek">schabowy<div class="obrazek">costam</div></div>
[HTML] pobierz, plaintext


Wklej to do pustego dokumentu HTML i odpal. O to chodzi?
ciapus4
30.08.2012, 14:44:56
Witam, właśnie tak, dziękuję, tylko teraz w które miejsce wstawić ścieżkę do obrazka ?
radziopoke
30.08.2012, 15:59:10
tutaj:
[HTML] pobierz, plaintext 
  1. ...
  2. .obrazek { 
  3. ...
  4. background: url(obrazek.jpg);
  5. position: absolute; top: 0px; left: 0px;
  6. }
  7. ...
[HTML] pobierz, plaintext


i najlepiej ustawić jeszcze width i height w tym elemencie na wielkość obrazka smile.gif
ciapus4
30.08.2012, 17:21:27
1. czyli tu (obrazek.jpg) ?, a rozmiar bo inaczej otworzy się w oryginalnym rozmiarze ?
2. a, czy jest możliwość jak najadę myszą na np. słowo 'dania z grilla' to pojawią się na przykład dwa lub trzy zdjęcia?
3. jeszcze jedno ten kod to gdzie umieścić na stronie z menu, czy zrobić oddzielny plik, z jakimś rozszerzeniem np. .php ?
viking
30.08.2012, 17:42:51
jQuery jest tu super potrzebne. Niedługo do pogrubienia tekstu niektórzy będą radzić stosowanie tej biblioteki. Jeszcze jak by chociaż przykład był rozwojowy i zgodnie ze sztuką a nie kod który za chwilę wyleci:

[HTML] pobierz, plaintext 
  1. $('.naglowek').on('mouseover', function(){
  2.         $('.obrazek').show('slow');
  3.       });
[HTML] pobierz, plaintext


Kolejne. Na pewno background na klasie przy różnych zdjęciach to bardzo logiczne rozwiązanie.

Czysty HTML i CSS:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.       <head>
  4.     <style>
  5.       .naglowek {
  6.         position: relative;
  7.         background: red;
  8.       }
  9.  
  10.     .obrazek {
  11.     display: none;
  12.     position: absolute; top: 20px;left:20px;
  13.     width: 200px;
  14.     height: 200px;
  15.     border: solid 1px black;
  16.     }
  17.     .naglowek:hover .obrazek {
  18.       display:block;
  19.     background: green;
  20.     }
  21.     </style>
  22.     </head>
  23.      <body>
  24.     <div class="naglowek">schabowy<div class="obrazek">costam</div></div>
  25.     </body>
  26. </html>
[HTML] pobierz, plaintext
b4rt3kk
30.08.2012, 17:48:10
To tylko przykład, a nie rozwiązanie... Musisz dostosować to do swoich potrzeb. Ale jak się uprzesz, to też możesz i tego użyć, żeby było najprościej to tak:
- umieszczasz w tym samym pliku co chcesz zastosować skrypt
- to co pomiędzy <head>...</head> umieszczasz w head na swojej stronie
- tworzysz miniaturki samodzielnie (przy okazji optymalizujesz czas wczytywania strony), zmniejszanie w css mija się z celem
[HTML] pobierz, plaintext 
  1. <div class="naglowek">schabowy<div class="obrazek">costam</div></div>
[HTML] pobierz, plaintext

- wstawiasz w całości tam gdzie chcesz mieć ten nagłówek z obrazkiem
- w miejsce schabowy wpisujesz tytuł
- w miejsce costam dajesz obrazek

To co pomiędzy style musisz zmienić jeszcze:
[HTML] pobierz, plaintext 
  1. <style>
  2. .obrazek {
  3. display: none;
  4. padding: 5px;
  5. background: white;
  6. position: absolute; top: 0px; left: 0px;
  7. }
  8. .naglowek {
  9. position: relative;
  10. }
  11. </style>
[HTML] pobierz, plaintext


Wtedy rozmiar będzie się dostosowywał dynamicznie do zawartości.
ciapus4
30.08.2012, 17:53:44
Dzięki śliczne, a czy jest możliwość jak najadę dajmy na to na hasło 'potrawy z grilla' to otworzą się dwa lub trzy zdjęcia ?.
b4rt3kk
30.08.2012, 18:02:42
Jak dasz w miejsce costam, dwa lub trzy obrazki to tak, wyświetlą się.
ciapus4
30.08.2012, 18:12:53
Dzięki śliczne, a teraz tak jak będzie np. potrawy z grilla, zupy, dania jarski - to muszę napisać 3 takie skrypty ?
b4rt3kk
31.08.2012, 09:53:49
Nie, powielasz jedynie ten fragment:

[HTML] pobierz, plaintext 
  1. <div class="naglowek">schabowy<div class="obrazek">costam</div></div>
[HTML] pobierz, plaintext


Zmieniasz podpis i zdjęcie i tyle. Czyli np. ze schabowego robisz bigos, a w miejsce costam kolejne zdjęcie.
ciapus4
31.08.2012, 11:25:07
Jeszcze jedno, jak zmniejszyć obszar najeżdżania myszką bo mam np. |spaghetti| to jak wskaże myszką obok napisu to też się pojawia zdjęcie.


pozdrawiam
b4rt3kk
31.08.2012, 11:30:04
Wywal linijkę width w stylu:
[HTML] pobierz, plaintext 
  1. .naglowek {
  2. background: green;
  3. position: relative;
  4. width: 200px; <-- to usuń
  5. }
[HTML] pobierz, plaintext
ciapus4
31.08.2012, 21:46:46 
[HTML] pobierz, plaintext 
  1. <tr><td class="d">ŁOSOŚ Z WARZYWAMI </td><td class="w">350 g</td><td class="c">24,00 zł</td></tr>
[HTML] pobierz, plaintext


jak w to wkomponować 
[HTML] pobierz, plaintext 
  1. <div class="naglowek">schabowy<div class="costam">costam</div></div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <img src="gfx/losos warzywa.jpg" alt="" width="200" height="200" />
[HTML] pobierz, plaintext
- obrazek który ma się ukazywać po najechaniu myszą

b4rt3kk
1.09.2012, 01:18:24 
[HTML] pobierz, plaintext 
  1. <tr><td class="d"><div class="naglowek">ŁOSOŚ Z WARZYWAMI <div class="costam"><img src="gfx/losos warzywa.jpg" alt="" width="200" height="200" /></div></div></td><td class="w">350 g</td><td class="c">24,00 zł</td></tr>
[HTML] pobierz, plaintext
ciapus4
1.09.2012, 07:17:50
Witam, coś jest nie tak bo jak wklejam to co podałeś, to pojawia się obrazek pod łosoś z warzywami na stałe.

b4rt3kk
1.09.2012, 10:10:26 
[PHP] pobierz, plaintext 
  1. <tr><td class="d"><div class="naglowek">ŁOSOŚ Z WARZYWAMI <div class="obrazek"><img src="gfx/losos warzywa.jpg" alt="" width="200" height="200" /></div></div></td><td class="w">350 g</td><td class="c">24,00 zł</td></tr>
[PHP] pobierz, plaintext


Przekleiłem to co wstawiłeś post wyżej, zmieniłeś class diva. To powinno działać.
ciapus4
1.09.2012, 12:54:06
Kurczę jeszcze jest nie tak, poniewarz danie łosoś z warzywami jest nie w jednej linii, jak na załączonym skrinie.


b4rt3kk
1.09.2012, 16:54:03
Chyba szybciej by było jakbyś zlecił wykonanie strony komuś kto się na tym zna, bo tak to marnujesz swój czas. To z czym się borykasz to podstawy HTML. Btw. oprócz screena przydałby się fragment kodu.
ciapus4
1.09.2012, 19:43:21 
[HTML] pobierz, plaintext 
  1. <strong><u>DANIA JARSKIE</u></strong>
  2. 			<table>
  3. 			<tr><td class="d">FILET Z MORSZCZUKA PANIEROWANY </td><td class="w">150 g</td><td class="c">9,50zł</td></tr>
  4. 			<tr><td class="d">PIEROGI Z KAPUSTĄ I GRZYBAMI </td><td class="w">7 szt.</td><td class="c">9,00zł</td></tr>
  5. 			<tr><td class="d">NALEŚNIKI Z SEREM</td><td class="w">2 szt.</td><td class="c">9,00zł</td></tr>
  6. 			<tr><td class="d">NALEŚNIKI Z DŻEMEM</td><td class="w">2 szt.</td><td class="c">9,00zł</td></tr>
  7.  
  8.                         <tr><td class="d"><div class="naglowek">ŁOSOŚ Z WARZYWAMI<div class="obrazek"><img src="gfx/losos warzywa.jpg" alt="" width="300" height="300" /></div></div></td><td class="w">350 g</td><td class="c">24,00 zł</td></tr>
  9.                         <tr><td class="d">PSTRĄG Z WARZYWAMI </td><td class="w"> w/w 100 g</td><td class="c">7,00 zł</td></tr>
  10. 			</table>
[HTML] pobierz, plaintext


licze na Ciebie i nie chce żadnego weba.nie pacz na to obraz już jest OK, podpowiec tylko jak, żeby "łosoś z warzywami" by l w jednej linji.
b4rt3kk
1.09.2012, 20:44:08
Dodaj w sekcji head -> style w stylu o nazwie .naglowek:

[HTML] pobierz, plaintext 
  1. white-space: nowrap;
[HTML] pobierz, plaintext


Czyli pomiędzy:
[HTML] pobierz, plaintext 
  1. .naglowek {
  2. white-space: nowrap;
  3. }
[HTML] pobierz, plaintext


PS. możesz dać link do swojej strony?
ciapus4
2.09.2012, 13:41:58
Witam, no i za to "Cię kocham" b4rt3kk - teraz jest git. Restauracja "Maciek"
viking
2.09.2012, 17:30:44
Teraz mógłbyś jeszcze posprzątać bo cóż to jest?

[HTML] pobierz, plaintext 
  1. <div id="content">
  2. 	<html>
  3. <head>
  4. <style>
[HTML] pobierz, plaintext


I kilka innych kwiatków. Ten popup wyświetla się tylko dla łososia?
ciapus4
3.09.2012, 14:59:01
Witam, nie będą jeszcze zrobione inne zdjęcia i dodawane sukcesywnie, ale mam jeszcze jedno pytanie na tej stronie z menu, jak centralnie pod menu wstawić dane kontaktowe, bo podstawiają mi się po lewej ?

Kto chętny na odpowiedz ?
b4rt3kk
3.09.2012, 15:04:37
Masz tam takie coś:

[HTML] pobierz, plaintext 
  1. </div>
  2.  
  3. <div id="foot">
  4. 	&nbsp;
  5. </div>
[HTML] pobierz, plaintext


Pomiędzy </div> a <div id="foot"> wstaw:

[HTML] pobierz, plaintext 
  1. <div style="text-align:center;">dane kontaktowe</div>
[HTML] pobierz, plaintext
ciapus4
3.09.2012, 20:20:59
A, można jaśniej gdzie jest ten<div id=foot> ? ,albo jak zamknąć tą tabele, żebe można użyć <center>...</center> ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.