Forum PHP.pl > [php] Powiększanie zdjęć

Pomoc - Szukaj - Użytkownicy - Kalendarz

pjamorski

4.02.2008, 11:35:06

Cześć

Mam sobie taki kod :

Kod

Jak widać jest to tabeleczka z przykłądową zawartością fotek. Wszystko działa wporzo. Jak mógłbym uzyskać coś takiego że po najechaniu kursorem mychy zdjęcię w ramce powiększy się troszkę. Fajnie jakby ten efekt działał na każde najechane zdjęcie. Proszę o mały przykład na jednym tylko zdjęciu.
Dzięki wielkie

P.S.
Szukałem w stylach css, coś jak a.hover na linki itd, ale porażka

Lion_87

4.02.2008, 11:41:18

polecam google!!! Od tak np:
http://vivee.info/2007/12/28/galeria-z-pow...mi-miniaturami/

pjamorski

4.02.2008, 11:57:28

Jak dla mnie to troszeczkę jest zagmatwane.
Mógłbym proscić o coś bardziej easy?

Dzięki

Wieviór

4.02.2008, 12:11:19

Ale co jest zagmatwane? Masz gotowy kod z dobrym wytłumaczeniem, czego chcieć więcej? ;]

pjamorski

4.02.2008, 12:25:37

Ja się jeszcze na tym nie znam. Czy to muszę jako Javascript wstawić?

kod:

Kod
[*]$(document).ready(function() {[*] $("li").fadeTo("slow", .5);[*] $("li").hover(function(){[*] $(this).addClass("big").fadeTo("fast", 1);[*] },function(){[*] $(this).removeClass("big").fadeTo("fast", .5);[*] });[*] });

To właśnie jest dla mnie nie zrozumiałe

Lion_87

4.02.2008, 12:44:37

hmmmmmmmmmmm
to wejdź se na tą stronę co Ci linka podałem i wejdź w przykład a potem:

myszką w lewy górny róg --------->Plik
potem--------->Zapisz stronę jako

no i już gotowe. Masz ją i se zmieniaj jak chcesz!!!!!!!!!!!!!!!!!!!!!!

nowotny

4.02.2008, 13:13:37

Ehhh... lenistwo się szerzy... ;P Ukradzione z ww. strony:

[HTML] pobierz, plaintext 
<html><body>
<style>
img {                         
	width:100px;
	height:100px;
	border:2px white solid;
	background:white 50% 50%;
	float:left;
	margin:5px;
	position:relative;
}
.big {
	height: 250px;
	width: 250px;
}</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(document).ready(function() {
 
        $("img").fadeTo("slow", .5);
 
        $("img").hover(function(){
            $(this).addClass("big").fadeTo("fast", 1);
        },function(){
              $(this).removeClass("big").fadeTo("fast", .5);
        });
 
        });
</script>
<table border='1' align='center' valign='top' background='tlo.png'>
    <tr><td width='500' height='490' align='center' valign='top'>
        <table border='1' align='left' valign='top' background='tlo.png' cellpadding='5' cellspacing='10'>
        <tr><td width='100' height='100' align='left' valign='top' ><img src='gosia/1.jpg' width='100' height='100'>1</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/2.jpg' width='100' height='100'>2</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/3.jpg' width='100' height='100'>3</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/4.jpg' width='100' height='100'>4</td>
        </tr>    
        <tr><td width='100' height='100' align='left' valign='top'><img src='gosia/5.jpg' width='100' height='100'>5</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/6.jpg' width='100' height='100'>6</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/7.jpg' width='100' height='100'>7</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/8.jpg' width='100' height='100'>8</td>
        </tr>
        <tr><td width='100' height='100' align='left' valign='top'><img src='gosia/9.jpg' width='100' height='100'>9</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/10.jpg' width='100' height='100'>10</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/11.jpg' width='100' height='100'>11</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/12.jpg' width='100' height='100'>12</td>
        </tr>    
        <tr><td width='100' height='100' align='left' valign='top'><img src='gosia/13.jpg' width='100' height='100'>13</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/14.jpg' width='100' height='100'>14</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/15.jpg' width='100' height='100'>15</td>
            <td width='100' height='100' align='left' valign='top'><img src='gosia/16.jpg' width='100' height='100'>16</td>
        </tr>    
        </table>
    </td></tr></table></body></html>
[HTML] pobierz, plaintext

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.