Azi este Vineri, 11 de Aprilie.2017

cu reduceri

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:

Related Posts:

  • Modifica dimensiunea unei imaginiMai mult ca sigur in multe randuri am scris un articol in care atasam cateva imagini care trebuiesc reduse la o anumita dimensiune pentru a se incadra in postul respectiv sau intr-o anumita parte a blogului si surpriza, pierd… Read More
  • Creaza propiul tau avatar onlineAvatar este o parte importanta a personalitatii tale online. Este o pictograma care te reprezinta pe forumuri, în messenger, reţele sociale, comunităţi online etc. Deci, dacă nu doriţi să utilizezi logo-ul tipic sau folosire… Read More
  • Cun scriem un text pe fondul unei imagineUn exemplu de text scris peste o imagineAtentie! textul sa nu depaseasca dimensiunea imaginiIn anumite situatii dorim sa facem o descriere pe o imagine si nu stim cum.Cu ajutorul unei aplicatii simple rezolvam aceasta problem… Read More
  • IconUtils 4.2 GratisIconUtiil este o soluţie completă pentru crearea şi editarea de icoane şi cursoare, de asemenea poti converti imagini existente in baza de date a IconUtils pentru a fi utilizate ca pictograme, dă un aspect unic pe desktop a b… Read More
  • Thumbalizr captura de ecranAvand in vedere necesitatea de a lua capturi de ecran (de la o imagine sau pagina web etc) am fost mereu in cautarea unui program gratis si usor de folosit cu mai multe obtiuni de a aleger o dimensiune anume.Thumbalizr îndepl… Read More

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