Azi este Sambata, 12 de Aprilie.2017

cu reduceri

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
  • Related Posts:

    • IconJ: a crea si a gazdui un favicon pe blogFavicon este un mic icon care apare lângă adresa de web în partea de sus a browser-ului. Trebuie să fie în format ICO şi se numeşte favicon prescurtarea de la "icon favorite", va apare în file browser-ul cat si pe fila de fa… Read More
    • Deschide fereastra pop-up cu defilareAm vazut mai multe moduri de a deschide o ferestre pop-up.Acum vin cu un exemplu de fereastra pop-up cu un efect de alunecare de sus in centru şi derulaţi la dreapta folosind un cod Javascript.Mergi la Aspect -- Editare HTML … Read More
    • Buton de traducere blog in 52 de limbiTranslateThis este un buton Javascript care poate fi adăugată cu usurinta pe blog cu obtiunea de al traduce in 52 de limbi.Trebuie doar să copiaţi şi sa inseraţi codul Javascript următoar intr-un gadget HTMLJavascript.<!--… Read More
    • Zoomit un puternic instrument online pentru afisare imagini in dimensiuni mariZoom.it este un instrument online puternic pentru a afişa imaginile în dimensiuni mari. Perfect integrat în blog-ul tau, foloseste ca funcţia zoom sau vizualiza pe tot ecranul.Doar trebuie sa-ti încarci imagini sau fotografii… Read More
    • Gadget-uri noi in Blogger in DraftCu câteva zile în urmă Blogger a inclus două gadget-uri noi pe Blogger in draft : un gadget pentru "Postari popular" si altul pentru "Statistică".La momentul adăugarea de gadget-uri, vom vedea că acestea au un număr de opţiun… Read More

    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