Forum PHP.pl

Cześć,
potrzebuję skrypt który powiększy obrazek po najechaniu na niego myszką, próbowałem tego:
onmouseover="PopEx(this,-54,-37.5,216,150,20,\'resizeimg\');"
z strony: http://blog-lisu.eu/2009/02/26/popbox-powi...ki/#codesyntax3

ale mi wtedy zupełnie znika obrazek.
Tak wygląda kod do którego muszę do "doczepić"

[PHP] pobierz, plaintext 
<?php
<script>
                        document.write(&#092;'<a href="#" onClick="showslide('.($pictab[1]-1).');return false" ><img src="'+photos['.($pictab[1]-1).']+'" name="photoslider" onmouseover="PopEx(this,-54,-37.5,216,150,20,'resizeimg');" id="photoslider"  style="filter:revealTrans(duration=2,transition=23); border: 1px solid #000000;  width: 250px; height: 190px" border=0 ></a>')
                        </script>
?>
[PHP] pobierz, plaintext 

dlaczego tak się dzieje?? folder images i plik PopBox.js mam w głównym katalo strony...
gu

Ja bym to zrobił mniej więcej tak:



I wywoływał to na obrazku tak:



Choć nie jestem pewien czy zadziała, gdyż nie testowałem a jest już dość późno i mogłem zrobić jakiś błąd. Ale tak czy siak powinno Cię to naprowadzić na rozwiązanie. ;-)

Twój sposób działa ale gdy obrazek jest powiększany to zmienia sie układ reszty elementów a chodzi mi dokładnie o taki efekt jak ma moje rozwiązanie czyli powiększony obrazek pokazuje się na treści...

Ja sie wzorowałem na tym, jak to robi helion: http://helion.pl/_powokl.js niewiem czy mozna dawac takie podpowiedzi, ale w kazdym razie zobacz sobie kod zrodlowy moze pomoze ; )

Potrzebowałbym z bardziej płynnym przejściem... i mam tez inne ID...

a da się zrobić po prostu tak: po najechaniu myszką na zdjęcie, powiększa się ale nad tym na które najechaliśmy bez żadnych zbędnych efektów? i jak najprosciej najlepiej bez urzycia id...

to musisz ustawić pozycjonowanie absolutne, a jak chcesz płynnie możesz zainteresować sie jQuery, albo w czystym JS setTimeOut.

znalazłem coś takiego: http://www.cino.ig.pl/index.php?a=opony&am...t=1&mode=0#
jak to działa i jak to podłaczyć do mojego kodu?

http://qrayg.com/learn/code/qtip/

nie wiem dlaczego ale żadne z rozwiazań nie działa... oto kod do którego próbuję to zastosować:

[PHP] pobierz, plaintext 
<?php
<table width="250" cellpadding="0" cellspacing="0">
                  <tbody><tr>
                     <td colspan="5" width="250"><div id="qTip"><script>
                        document.write('<a href="#" onClick="showslide(0);return false" ><img src="'+photos[0]+'" name="photoslider"  onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" id="photoslider"  style="filter:revealTrans(duration=2,transition=23); border: 1px solid #000000; width: 250px; height: 190px" border=0 ></a></p>')
                        </script><a href="#" onclick="showslide(0);return false"><img src="files/big_pics_no1/41058" name="photoslider" onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" id="photoslider" style="border: 1px solid rgb(0, 0, 0); width: 250px; height: 190px;" border="0"></a><p></p></div>      </td>
                  </tr>
                  <tr>
                     <td colspan="5" width="250">
                        <table style="border: 1px solid rgb(110, 110, 110); width: 252px; font-weight: bold;" cellpadding="0" cellspacing="0">
                            <tbody><tr>
                                <td style="padding: 3px; width: 130px;"><span style="color: rgb(0, 79, 187);">Numer ogłoszenia:</span></td>
                                <td style="padding: 3px;"><span style="color: rgb(0, 0, 0);">E01058</span></td>
                            </tr>
                        </tbody></table>
                     </td>
                  </tr>
?>
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<tr>
                     <td width="62" align="left"><a href="#" onclick="showslide(1);return false"><img src="files/small_pics_no2/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="center"><a href="#" onclick="showslide(2);return false"><img src="files/small_pics_no3/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="center"><a href="#" onclick="showslide(3);return false"><img src="files/small_pics_no4/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="right"><a href="#" onclick="showslide(4);return false"><img src="files/small_pics_no5/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                  </tr>
                  <tr>
                     <td width="62" align="left"><a href="#" onclick="showslide(5);return false"><img src="files/small_pics_no6/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="center"><a href="#" onclick="showslide(6);return false"><img src="files/small_pics_no7/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="center"><a href="#" onclick="showslide(7);return false"><img src="files/small_pics_no8/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                     <td width="62" align="right"><a href="#" onclick="showslide(8);return false"><img src="files/small_pics_no9/41058" style="border: 1px solid rgb(0, 0, 0);" border="0"></a>      </td>
                  </tr>
               </tbody></table>
[HTML] pobierz, plaintext 

Wywołanie w ten sposób działa:

[HTML] pobierz, plaintext 
<img src="http://autos24.pl/files/small_pics_no2/41058" onMouseOver="PopEx(this,-54,-37.5,216,150,20,'resizeimg');">
[HTML] pobierz, plaintext 

ale jeśli dodam to do kodu powyżej to znika w ogóle zdjęcie...

Ten post edytował patryk9200 22.06.2009, 07:40:00

daje Ci tutka krok po kroku jak tego nie zrobisz to za 50 zł mogę Ci to wdrożyć na stronę.

stąd KLIK ściągasz skrypt JS. (pisząc ściągasz mam na myśli kopiujesz cały tekst i wklejając go do nowego dokumentu który nazywasz qTip.js).

teraz tak skrypt do strony dołączasz:

[HTML] pobierz, plaintext 
<script src="qTip.js" type="text/JavaScript"></script>
[HTML] pobierz, plaintext 

ostylowujesz sobie:

[HTML] pobierz, plaintext 
<style>
div#qTip 
{
	padding: 3px;
	border: 1px solid #666;
	display: none;
	background: #999;
	color: #FFF;
	font: bold 9px Verdana, Arial, sans-serif;
	position: absolute;
	z-index: 1000;
}
</style>
[HTML] pobierz, plaintext 

i wywołanie:

[HTML] pobierz, plaintext 
<a title="<img src='duze_zdjecie.jpg'>" href="#">
	<img src="miniaturka.jpg" style="border: medium none; padding: 4px;">
</a>
[HTML] pobierz, plaintext 

wsio.

Ten post edytował piotrooo89 22.06.2009, 09:23:59

witam moze ten artykuł pomoże

http://cssglobe.com/post/1695/easiest-tool...ew-using-jquery