2017 altex.ro

Mareste imaginea atunci cand mouse-ul trece peste ea (Efect zoom)

Intr-o prezentare anterioara aratam cum putem folosi un cod html ceva mai complicat pentru efectul zoom. Acum vin in sprijinul colaboratoarei mele Iulia si blogului ei Hazlii care doreste sa adauge o imagine pe care o poate mari numai atunci cand trece mause-ul peste ea, vom folosi de data aceasta un cod html foarte simplu si eficient in care dimensiunea imagini se poate modifica dupa nevoie.



Pentru a obtine acest efect trebuie sa copiezi codul de mai jos si sa il introduci intr-o postare ori de cate ori doresti ca o imagine sa apara marita.

codul html:

<img src="URL-IMAGINE" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

Inlocueste URL-IMAGINE cu url imagini care doresti sa apara
Si aceste dimensiuni se pot modifica dupa dorinta.
  • "this.width=400;this.height=300;" este latimea si inaltimea imagini marite
  • "this.width=200;this.height=150;" este latimea si inaltimea imagini reduse
  • 15 comentarios:

    1. Multumesc pentru tutorial. Acum il incerc si revin daca sunt probleme.

      PS. Eu de obicei uploadez pozele din calculator direct, fara sa folosesc link-uri. Pt situatia aceasta se poate face ceva, pentru marirea pozelor atunci cand se trece mousul peste?

      RăspundețiȘtergere
    2. Buna Iulia sunt si alte metode de marire a imaginilor dar acum nu am inteles prea bine la ce te referi! Astept sa imi explici mai concret la ce te referi?

      RăspundețiȘtergere
    3. Am incercat acest cod ,dar cand dau "finish" nu ramane codul intact,efectul fiind o simpla imagine efectul zoom dispare:(

      RăspundețiȘtergere
    4. Salut danyel Atentie!!! imaginea care doresti sa o maresti trebuie sa fie la aceste dimensiuni "this.width=200;this.height=150;" daca vrei ca esfectul zoom sa functioneze.

      RăspundețiȘtergere
    5. Buna am facut asa cum ai scris acolo,dar cand se mareste poza mi se vede in ceata,pozele normale sunt 100x75

      RăspundețiȘtergere
    6. Adrian, daca pozele sunt de 100x75 atunci matimea maxima este 200x150px , daca este mai mare atunci distorsioneaza imaginea. Deci in codul de mai sus modifica dimensiunile asa cum ti-am scris.

      RăspundețiȘtergere
    7. La mine merge perfect, dar am o problema. Imaginea se mareste spre dreapta, iar imaginile din marginea dreapta, ies din cadru. Cum fac sa redirectionez zona de marire?

      RăspundețiȘtergere
    8. Salu Corocodilul, De moment acest mic cod html nu se poate modifica, pentru redirectionare exista alte coduri mai complicate. Pentru a nu-ti iesi din cadru de exemplu: imaginile le pot deplasa la stanga.

      RăspundețiȘtergere
    9. Multumesc pentru precizare. Poti pune un cod html pentru deplasare la stanga? Ar fi suficient pentru ce am nevoie.

      RăspundețiȘtergere
    10. Buna ziua! cand ajunge imaginea la destinatie prin email, nu mai pot sa-i fac zoom.cum pot face asta? multumesc!

      RăspundețiȘtergere
    11. Salut Ovidiu, nu prea inteles ce vrei sa spui! adauga mai multe detalii

      RăspundețiȘtergere
    12. un cod de zoom pe poza gratuit de genul http://www.agendepiele.com/agende-piele/agenda-piele-lux-ap112.html

      gasim la tine?

      RăspundețiȘtergere
    13. Nu am asa ceva, sunt cateva dar de plata.

      RăspundețiȘtergere
    14. Care este codul html pentru a mari imaginea atunci cand dau click?

      RăspundețiȘtergere
    15. Codul il gasesti sub textul "codul html:" dar imaginea se mareste numai cand treci cu mouse-ul peste ea nu cand dai click!

      RăspundețiȘtergere

    Bine ai venit!
    In continuare poti lasa mesajul tau.

    Multumesc