2017 altex.ro

Mareste o imagine cu ajutorul efectului onmouseover

Intr-o postare anterioara am văzut cum se poate mari o imagine cu ajutorul unui clic. Astazi vom vedea un mod simplu pentru a mari o imagine pur si simplu trecand mouse-ul peste ea.

Tot ce trebuie sa faceti este sa inserati codul de mai jos, de fiecare data cand vrem sa adaugi o imagine cu acest efect.

Codul este, urmatorul:
<img src="URL-IMAGINE" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=250;this.height=150;" width="250" height="150" />

"this.width=400;this.height=300;" este latimea si inaltimea cand imaginea se mareste;
"this.width=250;this.height=150;" width="250" height="150" este latimea si inaltimea imagini reduse;

Si efectul este urmatorul:

5 comentarios:

  1. am o problema :)
    imi place efectul asta de vizualizare a imaginii fara sa deschida alta pagina, dar:
    intr-o pagina cu mai multe imagini una langa alta, in momentul in care treci mouse-ul peste imagine se deformeaza pagina.
    lucrez la o expunere de fotografii si nu imi place spatiul care se creeaza cand trec cu mouse-ul peste o imagine landscape. toate elementele din pagina fug spre stanga si spre dreapta ca sa faca loc imaginii marite si se creeaza un mare spatiu gol deasupra si sub imaginea marita.
    exista vreun script in care imaginea sa se maresca ... cumva deasupra fara sa impinga celelalte elemente spre exterior?
    sper ca intelegi ce spun pentru ca nu pot sa iti dau un link pentru a vedea exact despre ce fenomen vorbesc. inca nu am incarcat site-ul pe web.

    RăspundețiȘtergere
  2. Buna Tina, acest efect este folosit doar pentru o singura imagine. Pentru ce vrei tu daca am inteles bine iti recomand sa folosesti un script de "fereastra modala" vezi aici mai multe detalii: http://nouwidget.blogspot.ro/2011/05/ferestre-modale-mass-media-cu-shadowbox.html

    RăspundețiȘtergere
  3. am vazut-o si pe asta. am vazut tot ce ai tu pe blog despre imagine. problema cu shadowbox e ca din cate am inteles de la voi da eroare cu IE si in cazul asta nu imi convine.
    as vrea ceva ca in ca de ex in cautarea de imagini pe Google (cel putini in IE si Firefox). cand treci cu mouse-ul peste imagine se mareste imaginea, dar se mareste deasupra celorlate, nu le impinge pe celelalte in lateral.
    crezi ca ma poti ajuta cu asta?
    multumesc oricum.

    RăspundețiȘtergere
  4. OK voi cauta o varianta in acest sens, sa vad daca exista un sript gratis.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc