[JavaScript] Obrazek, Jak uzyskać taki efekt obrazka ? Opcje

[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

[PHP] pobierz, plaintext 
openside("Top Obrazki");
?>
 
 <link href="http://www.kinolive.pl/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
 
<link href="http://www.kinolive.pl/stylesheets/horinaja.css" media="screen" rel="stylesheet" type="text/css" />
 
 
 
<script src="http://www.kinolive.pl/javascripts/prototype.js" type="text/javascript"></script>
    <script src="http://www.kinolive.pl/javascripts/cookie.js" type="text/javascript"></script>
    <script src="http://www.kinolive.pl/javascripts/tooltip.js" type="text/javascript"></script>
    <script src="http://www.kinolive.pl/javascripts/flowplayer-3.1.4.min.js" type="text/javascript"></script>
    <script src="http://www.kinolive.pl/javascripts/cookie.js" type="text/javascript"></script>
<script src="http://www.kinolive.pl/javascripts/flash.js" type="text/javascript"></script>
 
<script src="http://www.kinolive.pl/javascripts/json.js" type="text/javascript"></script>
 
 
 
<script src="http://www.kinolive.pl/javascripts/tooltip.js" type="text/javascript"></script>
 
              <h3>Ostatnio komentowane filmy</h3>
              <div id="movies_commented_block"><div class="random-block">
 
 
 
 
  <div class="left">
    <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>
        <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;">
                        <img alt="7339121" src="http://www.kinolive.pl/system/covers/12834/medium/7339121.3.jpg?1303587960">
                  </div>
 
  </div>
 
 
 
 
<?php
closeside();
[PHP] pobierz, plaintext 

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

Skrypcik śmiga aż miło.

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

Drogi @Budzan jesteś Wielki

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:

[PHP] pobierz, plaintext 
openside("Top Obrazki");
?>
<script type="text/javascript" src="/javascripts/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/javascripts/highslide.css" />
 
<script type="text/javascript">
    hs.graphicsDir = '';
    hs.outlineType = null;
    hs.wrapperClassName = 'colored-border';
</script>
 
<div>
<a id="thumb1" href="http://s2.ifotos.pl/img/losnumero_hnnresh.jpg" class="highslide" onmouseover ="return hs.expand(this)">
	<img src="http://s2.ifotos.pl/img/losnumero_hnnresh.jpg" alt="Los Numeros"
		title="The Best" height="150" width="90" /></a>
 
<div class="highslide-caption">
    The Best.
</div>
<?php
closeside();
[PHP] pobierz, plaintext 

Pozdrawiam

Ten post edytował Adam11 29.04.2011, 14:50:29