Azi este Miercuri, 14 de Mai.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:

  • Efecte imagine pentru blogul tauCateva trucuri pentru a modifica o imagine si a o adapta la un sptiu anume pe blogul tau. Cu ajutorul unui simplu cod html se poate modifica: grosimea de margine, rotunjirea colturilor fara a folosi programe complicate de pe … Read More
  • O galerie simpla cu imangini miniaturaDaca iti place grafica si doresti sa optimizezi cat mai bine spatiul pe blog, poti folosi urmatorul cod JavaScript si CSS, pentru a forma o galerie care include imagini miniaturi si pot fi vizualizate pe rand intr-o alta dime… Read More
  • Protejeaza imaginile personalePicMarker iti permite sa adaugi filigran personalizat (imagine sa text)pe imaginile care doresti sa fie protejata contra furtului online.Este util atunci cand ai nevoie pentru a proteja drepturile tale de autor sau dacă dores… Read More
  • Efect de margine rotunjita a unei imaginiUn avantaj utilizand CSS3 este, aplicarea pe imagini a efectului de rotunjire (sunt efecte foarte interesante pe care le gasesti mai jos), fara a ne complica prea mult, atata timp cat el se vedea atunci cand folosim un browse… Read More
  • Mareste o imagine cu ajutorul efectului onmouseoverIntr-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 co… 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