Forum PHP.pl

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:

[HTML] pobierz, plaintext 
<img src="gg.jpg" id="zdjecie" onmouseover="Powieksz('BIG_gg.jpg');">
[HTML] pobierz, plaintext 

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?

[HTML] pobierz, plaintext 
< id="powieksz" style="border: 0px; index: 10;"><img src="" style="width: 500px; height: 370px;"></div>
[HTML] pobierz, plaintext 

Ten post edytował patryk9200 10.08.2009, 23:29:27

Najprościej?
Użyj gotowców...

Fraza dla google: lightbox

thickbox też będzie dobry

eventualnie jak chcesz się bawić sam pobaw się z position:absolute dla diva i display oraz z-index...

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ś...

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ź)

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:

[HTML] pobierz, plaintext 
<img src="zdjecie.jpg" id="zdjecie" onmouseover="Powieksz;" onmouseout="Ukryj;">
[HTML] pobierz, plaintext 

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ą:

[HTML] pobierz, plaintext 
onclick="document.getElementById('zdjecie').src='duże.jpg'"
[HTML] pobierz, plaintext 

weź w tym układzie to

http://www.bosrup.com/web/overlib/

znalazłem ciekawy dymek na stronie http://americanautoparts.com.pl/zapytanie.html#skok po najechaniu na "i" koło formularza, jak zrobić coś takiego?

no przecież Ci dałem gotowy skrypt post wyżej. To jest właśnie overlib.

A zajrzeć w kod to nie potrafisz? Firebug w Firefoxie ci pomoże.

masz

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

prawym przyciskiem i pokaż źródło i se weź co potrzebujesz

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.

[HTML] pobierz, plaintext 
  
 <!&#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,"
 ")[*] }[*] 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,"|")}
 if(x=d.getElementById("tooltip"))b.removeChild(x)
 }
 a.onmousemove=function(e){
 e=e||event;with(this.t.style){
 left=e.clientX+(E.scrollLeft||b.scrollLeft)+"px"
 top=e.clientY+(E.scrollTop||b.scrollTop)+"px"
 }
 }
 }
 }
 }
 function addEvent(O,E,F,x){
 return(x=O.addEventListener)?x(E,F,1):(x=O.attachEvent)?x('on'+E,F):!1
 }
 addEvent(window,'load',tooltip);
 // ]]> –>
  
[HTML] pobierz, plaintext 

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ę.

to moze cos takiego:

[HTML] pobierz, plaintext 
<img src="zdjecie.jpg" id="zdjecie" onmouseover="this.src='zdjecie_duze.jpg" onmouseout="this.src='zdjecie.jpg'">
[HTML] pobierz, plaintext 

albo jak chcesz tego tooltipa:

[JAVASCRIPT] pobierz, plaintext 
    var tooltip = null;
    var x;
    var y;
    document.onmousemove = updateTooltip;
 
    function updateTooltip(e) {
    	if (tooltip != null) {
	      var scrTop = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
	      var scrLeft = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
	      x = (document.all) ? window.event.x + scrLeft : e.pageX;
	      y = (document.all) ? window.event.y + scrTop : e.pageY;
 
          tooltip.style.left = ((x * 1) + 10) + "px";
          tooltip.style.top  = ((y * 1) + 10) + "px";
      }
    }
 
    function showTooltip(id) {
      tooltip = document.getElementById(id);
      tooltip.style.display = "block"
      if (tooltip != null && (x > 0 || y > 0)) {
        tooltip.style.left = ((x * 1) + 10) + "px";
        tooltip.style.top  = ((y * 1) + 10) + "px";
      }
    }
 
    function hideTooltip() {
      tooltip.style.display = "none";
    }
[JAVASCRIPT] pobierz, plaintext 

uzycie:

[HTML] pobierz, plaintext 
<style type="text/css">
.tooltip {
    position: absolute;
    display: none;
    width: auto;
    z-index: 45;
}
</style>
<script type="text/javascript" src="tooltip.js"></script>
 
<div class="tooltip" id="zdjecie1">
<img src="zdjecie_duze.jpg">
</div>
<img src="zdjecie" onmouseover="showTooltip('zdjecie1')" onmouseout="hideTooltip()">
[HTML] pobierz, plaintext