Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Obrazek
Forum PHP.pl > Forum > Przedszkole
Adam11
Witam wszystkich.

Walczę z efektem wyświetlania obrazka. Działa on gdy najadę na obrazek to on w chmurce powiększony się wyświetla.
Chciałbym następujący efekt uzyskać:



Źródło http://www.kinolive.pl

Patrzałem w kodzie źródłowym tej strony i znalazłem następujące JS:


cookie.js
flash.js
flowplayer-3.1.4.min.js
json.js
prototype.js
tooltip.js

Który JS odpowiada za tą Chmurkę powiększenia ?

Próbowałem takich cudów z każdym JS z tamtej strony dawałem w kod

  1. openside("Top Obrazki");
  2. ?>
  3.  
  4. <link href="http://www.kinolive.pl/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
  5.  
  6. <link href="http://www.kinolive.pl/stylesheets/horinaja.css" media="screen" rel="stylesheet" type="text/css" />
  7.  
  8.  
  9.  
  10. <script src="http://www.kinolive.pl/javascripts/prototype.js" type="text/javascript"></script>
  11. <script src="http://www.kinolive.pl/javascripts/cookie.js" type="text/javascript"></script>
  12. <script src="http://www.kinolive.pl/javascripts/tooltip.js" type="text/javascript"></script>
  13. <script src="http://www.kinolive.pl/javascripts/flowplayer-3.1.4.min.js" type="text/javascript"></script>
  14. <script src="http://www.kinolive.pl/javascripts/cookie.js" type="text/javascript"></script>
  15. <script src="http://www.kinolive.pl/javascripts/flash.js" type="text/javascript"></script>
  16.  
  17. <script src="http://www.kinolive.pl/javascripts/json.js" type="text/javascript"></script>
  18.  
  19.  
  20.  
  21. <script src="http://www.kinolive.pl/javascripts/tooltip.js" type="text/javascript"></script>
  22.  
  23. <h3>Ostatnio komentowane filmy</h3>
  24. <div id="movies_commented_block"><div class="random-block">
  25.  
  26.  
  27.  
  28.  
  29. <div class="left">
  30. <a href="http://www.kinolive.pl/filmy_online/faster-2010-lektor-pl" id="lastcommented-cover-12834"><img alt="okładka" src="http://www.kinolive.pl/system/covers/12834/thumb/7339121.3.jpg?1303587960" height="133" width="100"></a>
  31. <div class="tooltip" id="lastcommented-cover-12834-tooltip" style="border: 1px solid rgb(255, 255, 255); z-index: 5000; position: absolute; top: 2786px; left: 924px; display: none;">
  32. <img alt="7339121" src="http://www.kinolive.pl/system/covers/12834/medium/7339121.3.jpg?1303587960">
  33. </div>
  34.  
  35. </div>
  36.  
  37.  
  38.  
  39.  
  40. <?php
  41. closeside();


I nic mi nie wychodzi.

Przepraszam jeśli napisałem nie w tym dziale.

Pozdrawiam.
Budzan
poszukaj w google Highslide
Adam11
Witam.

Ładne są efekty ale taki jaki ja bym chciał to go nie ma, tylko na klikany obrazek jest.
Chciałbym tak że jak najadę kursorem myszki to on się powiększa jak na tej stronie w/w.

Pozdrawiam.
Budzan
no tak to wystarczy prosta modyfikacja w kodzie. zamiast onclick dać onmouseover
Adam11
Witam Ponownie cool.gif

Skrypcik śmiga aż miło.

Pobrałem paczuszkę i skusiłem się na no-outline.html

Drogi @Budzan jesteś Wielki specool.gif

Tylko moje pytanko brzmi takie:

Czy da radę uzyskać efekt taki jak najadę na obrazek czyli jak wyżej Pan napisał , z tym onmouseover i obrazek się powiększa w "Ramce obok" gdy zjadę z obrazka pierwotnego czyli miniaturki to "Powiększenie znika" ?

Kod mam następujący:

  1. openside("Top Obrazki");
  2. ?>
  3. <script type="text/javascript" src="/javascripts/highslide.js"></script>
  4. <link rel="stylesheet" type="text/css" href="/javascripts/highslide.css" />
  5.  
  6. <script type="text/javascript">
  7. hs.graphicsDir = '';
  8. hs.outlineType = null;
  9. hs.wrapperClassName = 'colored-border';
  10. </script>
  11.  
  12. <div>
  13. <a id="thumb1" href="http://s2.ifotos.pl/img/losnumero_hnnresh.jpg" class="highslide" onmouseover ="return hs.expand(this)">
  14. <img src="http://s2.ifotos.pl/img/losnumero_hnnresh.jpg" alt="Los Numeros"
  15. title="The Best" height="150" width="90" /></a>
  16.  
  17. <div class="highslide-caption">
  18. The Best.
  19. </div>
  20. <?php
  21. closeside();



Pozdrawiam smile.gif
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.