Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Powiększenie obrazka
Forum PHP.pl > Forum > Przedszkole
patryk9200
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ć"
  1. <?php
  2. <script>
  3.                        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>')
  4.                        </script>
  5. ?>

dlaczego tak się dzieje?? folder images i plik PopBox.js mam w głównym katalo strony...
gu
Skie
Ja bym to zrobił mniej więcej tak:

Kod
ChangeSize = function(obj, width, height) {
   new_width = obj.clientWidth + width;
   new_height = obj.clientHeight + height;

   obj.style.width = new_width + 'px';
   obj.style.height = new_height + 'px';
   obj.onmouseout = function() { ChangeSize(obj, -width, -height); };
}


I wywoływał to na obrazku tak:

Kod
<img src=adres onmouseover="ChangeSize(this, 20, 50);">


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. ;-)
patryk9200
Cytat(Skie @ 21.06.2009, 00:39:16 ) *
Ja bym to zrobił mniej więcej tak:

Kod
ChangeSize = function(obj, width, height) {
    new_width = obj.clientWidth + width;
    new_height = obj.clientHeight + height;

    obj.style.width = new_width + 'px';
    obj.style.height = new_height + 'px';
    obj.onmouseout = function() { ChangeSize(obj, -width, -height); };
}


I wywoływał to na obrazku tak:

Kod
<img src=adres onmouseover="ChangeSize(this, 20, 50);">


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...
pEbE
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 ; )
patryk9200
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...
piotrooo89
to musisz ustawić pozycjonowanie absolutne, a jak chcesz płynnie możesz zainteresować sie jQuery, albo w czystym JS setTimeOut.
patryk9200
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?
piotrooo89
http://qrayg.com/learn/code/qtip/
patryk9200
nie wiem dlaczego ale żadne z rozwiazań nie działa... oto kod do którego próbuję to zastosować:
  1. <?php
  2. <table width="250" cellpadding="0" cellspacing="0">
  3.                  <tbody><tr>
  4.                     <td colspan="5" width="250"><div id="qTip"><script>
  5.                        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>')
  6.                        </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>
  7.                  </tr>
  8.                  <tr>
  9.                     <td colspan="5" width="250">
  10.                        <table style="border: 1px solid rgb(110, 110, 110); width: 252px; font-weight: bold;" cellpadding="0" cellspacing="0">
  11.                            <tbody><tr>
  12.                                <td style="padding: 3px; width: 130px;"><span style="color: rgb(0, 79, 187);">Numer ogłoszenia:</span></td>
  13.                                <td style="padding: 3px;"><span style="color: rgb(0, 0, 0);">E01058</span></td>
  14.                            </tr>
  15.                        </tbody></table>
  16.                     </td>
  17.                  </tr>
  18. ?>

  1. <tr>
  2. <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>
  3. <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>
  4. <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>
  5. <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>
  6. </tr>
  7. <tr>
  8. <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>
  9. <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>
  10. <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>
  11. <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>
  12. </tr>
  13. </tbody></table>


Wywołanie w ten sposób działa:
  1. <img src="http://autos24.pl/files/small_pics_no2/41058" onMouseOver="PopEx(this,-54,-37.5,216,150,20,'resizeimg');">

ale jeśli dodam to do kodu powyżej to znika w ogóle zdjęcie...
piotrooo89
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:
  1. <script src="qTip.js" type="text/JavaScript"></script>


ostylowujesz sobie:
  1. div#qTip
  2. {
  3. padding: 3px;
  4. border: 1px solid #666;
  5. display: none;
  6. background: #999;
  7. color: #FFF;
  8. font: bold 9px Verdana, Arial, sans-serif;
  9. position: absolute;
  10. z-index: 1000;
  11. }


i wywołanie:
  1. <a title="<img src='duze_zdjecie.jpg'>" href="#">
  2. <img src="miniaturka.jpg" style="border: medium none; padding: 4px;">
  3. </a>


wsio.
krzysiekk
witam moze ten artykuł pomoże

http://cssglobe.com/post/1695/easiest-tool...ew-using-jquery
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.