Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][JavaScript] Powiększanie zdjęć.
Forum PHP.pl > Forum > Przedszkole
patryk9200
Cześć,
Czy zna ktoś może jakiś skrypt bądź pomoże mi napisać który powodował by, ze po najechaniu na zdjęcie pokazywało by się w nowym okienku ale nie typu POP-UP tylko w formie np. div'a który sie wyświetla nad zawartością. Da sie takie coś zrobić w CSS?
A jeśli nie to jak moge wykonać coś podobnego używając tego w mniej więcej taki sposób:
  1. <img src="gg.jpg" id="zdjecie" onmouseover="Powieksz('BIG_gg.jpg');">

Mniej więcej, żeby tak taki div wyglądał. Chciałbym również, żeby gdy "zjadę " myszką z powiększonego obrazka on automatycznie znikał.
Jak to "opakować" w JavaScript?
  1. < id="powieksz" style="border: 0px; index: 10;"><img src="" style="width: 500px; height: 370px;"></div>
Fifi209
Najprościej?
Użyj gotowców...

Fraza dla google: lightbox
jmail
thickbox też będzie dobry winksmiley.jpg

eventualnie jak chcesz się bawić sam pobaw się z position:absolute dla diva i display oraz z-index...
patryk9200
Nie chodzi mi o coś w rodzaju lightbox, on przykrywa całą stronę a ja chcę żeby tylko pojawiała się miniaturka, wolę nie używać "kombajnów" do tego. Szukam małego prostego skryptu.
Fifi209
Cytat(patryk9200 @ 10.08.2009, 23:30:47 ) *
Nie chodzi mi o coś w rodzaju lightbox, on przykrywa całą stronę a ja chcę żeby tylko pojawiała się miniaturka, wolę nie używać "kombajnów" do tego. Szukam małego prostego skryptu.

To będzie go trzeba napisać samemu... A i tak pewnie do napisania go użyjesz "kombajnu", aby skrypt działał na wszystkich przeglądarkach.

Porady dostałeś...
Fafu
Jak nie chcesz kombajnu to weź lightbox w wersji 1:
http://www.huddletogether.com/projects/lightbox/
Usuniesz plik overlay.png i nie będzie ci przykrywało strony (chyba - sprawdź)
patryk9200
Lightbox w ogóle odpada bo u mnie musi to działać przy akcji onmouseover i po zjechaniu z zdjęcia powiększenie powinno zniknąć.
Mniej więcej jak na tej stronie http://www.cino.ig.pl/index.php?a=opony&am...t=1&mode=0# tylko, że to zdarzenie do wywołania powiększenia musi mieć mniej więcej taki wygląd:
  1. <img src="zdjecie.jpg" id="zdjecie" onmouseover="Powieksz;" onmouseout="Ukryj;">
i powiększało by zdjęcie do kturego link był by pobierane z elementu src....
Musi to działać na tej zasadzie po inny skrypt zamienia mi po kliknięciu w inny element zdjęcie metodą:
  1. onclick="document.getElementById('zdjecie').src='duże.jpg'"
jmail
weź w tym układzie to

http://www.bosrup.com/web/overlib/
patryk9200
znalazłem ciekawy dymek na stronie http://americanautoparts.com.pl/zapytanie.html#skok po najechaniu na "i" koło formularza, jak zrobić coś takiego?
jmail
no przecież Ci dałem gotowy skrypt post wyżej. To jest właśnie overlib.
wookieb
A zajrzeć w kod to nie potrafisz? Firebug w Firefoxie ci pomoże.
jmail
masz

http://www.jmail.pl/overlib.php

prawym przyciskiem i pokaż źródło i se weź co potrzebujesz
patryk9200
dobra znalazłem coś lepszego i prostego potrzebuję tylko lekkiej modyfikacji.
Na stroni http://forum.php.pl/index.php?showtopic=12...mp;#entry646827 znajduje się artykuł jak stworzyć dymek,
chciałbym tylko żeby ten dymek działał nie na znacznikach <a> tylko na dowolnych których atrybut name ma nazwę powieksz, i żeby zamiast pobierać dane z atrybutu title to pobierał z src i wstawiał go w kod tak żeby się zdjecie wyświetlało.
    1. <!&#8211; <![CDATA[[*] /***************[*] Copyright (c) 2004 Tomasz Elendt- Eluś[*] this script is free for non-commercial use[*] ***************/[*] function tooltip(d,E,b,i,a){[*] d=document;E=d.documentElement;b=d.body;if(!E)return;[*] for(i=0;a=b.getElementsByTagName("a")[i];i++){[*] if(a.title){[*] with(a.t=d.createElement("div")){[*] id="tooltip"[*] innerHTML=a.title.replace(/|/g,"
    2. ")[*] }[*] a.onmouseover=function(e){[*] with(this){title="";onmousemove(e)}[*] b.appendChild(this.t)[*] }[*] a.onmouseout=function(x){[*] with(this){title=t.innerHTML.replace(/<br />/g,"|")}
    3. if(x=d.getElementById("tooltip"))b.removeChild(x)
    4. }
    5. a.onmousemove=function(e){
    6. e=e||event;with(this.t.style){
    7. left=e.clientX+(E.scrollLeft||b.scrollLeft)+"px"
    8. top=e.clientY+(E.scrollTop||b.scrollTop)+"px"
    9. }
    10. }
    11. }
    12. }
    13. }
    14. function addEvent(O,E,F,x){
    15. return(x=O.addEventListener)?x(E,F,1):(x=O.attachEvent)?x('on'+E,F):!1
    16. }
    17. addEvent(window,'load',tooltip);
    18. // ]]> >
jmail
wejdź na moją stornę co to Ci ją dałem w linku i nei marudź. wsadzasz se na co chcesz. dodajesz tylko onmousover i onmouseout.

Ludzie Ci pomagają, robią wszystko co chcesz, a Ty nadal marudzisz
patryk9200
Cytat(jmail @ 11.08.2009, 01:39:02 ) *
wejdź na moją stornę co to Ci ją dałem w linku i nei marudź. wsadzasz se na co chcesz. dodajesz tylko onmousover i onmouseout.

Ludzie Ci pomagają, robią wszystko co chcesz, a Ty nadal marudzisz


Wiem, że jestem wybredny:D ale skrypt musi być niewielki bo się w koncu tyle tego nagromadz, że strona kilka minut się będzie ładować.
A jak sprawdziłem ta biblioteka ma setki linii kodu, potrzebuję czegoś wydajnego coś takiego jak znalazłem niewielkie a spełnia swoja funkcję.
Fafu
to moze cos takiego:
  1. <img src="zdjecie.jpg" id="zdjecie" onmouseover="this.src='zdjecie_duze.jpg" onmouseout="this.src='zdjecie.jpg'">

albo jak chcesz tego tooltipa:
[JAVASCRIPT] pobierz, plaintext
  1. var tooltip = null;
  2. var x;
  3. var y;
  4. document.onmousemove = updateTooltip;
  5.  
  6. function updateTooltip(e) {
  7. if (tooltip != null) {
  8. var scrTop = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
  9. var scrLeft = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
  10. x = (document.all) ? window.event.x + scrLeft : e.pageX;
  11. y = (document.all) ? window.event.y + scrTop : e.pageY;
  12.  
  13. tooltip.style.left = ((x * 1) + 10) + "px";
  14. tooltip.style.top = ((y * 1) + 10) + "px";
  15. }
  16. }
  17.  
  18. function showTooltip(id) {
  19. tooltip = document.getElementById(id);
  20. tooltip.style.display = "block"
  21. if (tooltip != null && (x > 0 || y > 0)) {
  22. tooltip.style.left = ((x * 1) + 10) + "px";
  23. tooltip.style.top = ((y * 1) + 10) + "px";
  24. }
  25. }
  26.  
  27. function hideTooltip() {
  28. tooltip.style.display = "none";
  29. }
[JAVASCRIPT] pobierz, plaintext

uzycie:
  1. <style type="text/css">
  2. .tooltip {
  3. position: absolute;
  4. display: none;
  5. width: auto;
  6. z-index: 45;
  7. }
  8. <script type="text/javascript" src="tooltip.js"></script>
  9.  
  10. <div class="tooltip" id="zdjecie1">
  11. <img src="zdjecie_duze.jpg">
  12. </div>
  13. <img src="zdjecie" onmouseover="showTooltip('zdjecie1')" onmouseout="hideTooltip()">
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.