2017

Mareste imaginea atunci cand mause-ul trece peste ea

Acest efect va transforma o imagine mica in una mare (se numeste efect de zoom) prin simpla trecere a mause-ului peste ea. Mai jos sunt doua exemple::



Cum se obtine acest efect? Mergem la Aspect --> Editare HTML si cautam linia <head> inainte de ea adaugi codul urmator:

<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>

Si acum pentru a crea  un efect adaugi in postarea dorita urmatorul cod:

<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span><img src="URL de la imagen" /><br />Descriere imagine</span></a>

La sfarsit mai ramane de schimbat URL de la imagine si Descriere imagine

26 comentarios:

  1. Feliciatari! foarte interesant acest truc cu imaginile.Urmaresc blogul tau de mai bine de 3 luni de zile si adevarul este ca,cu fiecare zi ce trece imi place tot mai mult sa il vizitez si sa folosesc sfaturile,ideile si aplicatiile tale Costi.
    Un salut.

    RăspundețiȘtergere
  2. Si eu iti multumesc pentru aprecieri.Pentru toti cei care viziteaza acest blog ii anunt ca,incerc sa le stau la dispozitie cu sfaturi daca au probleme de rezilvat in legatura cu blogul lor si in fiecare zi o sa aduc noi informatii.

    RăspundețiȘtergere
  3. Am incercat sa fac si asta si... nu a functionat. Eu am vrut doar sa mareasca imaginea si am adaugat doar primul cod.

    RăspundețiȘtergere
  4. Buna Iulia nu am inteles cum ai folosit doar primul cod?

    Dupa ce adaugi primul cod inainte de (head) salvezi modificarea si pentru a mari imaginea trebuie sa adaugi intr-o postare unde vrei sa apara respectiva imagine intreg al doilea cod cu modificarile respective URL imagine si Descriere imagine daca doresti nu este obligatorie descrierea.

    de nu acesta nu va functiona

    RăspundețiȘtergere
  5. am o mica mare intrebare si nevoie de ajutor...pot folosi acest cod la un blog simplu la un post simplu...nu sa editez documentu blogului sa introduk in sectiunea head...ci purshisimplu p/u un simplu pamintesc blog atunci cind pun vrio poza in vrun post pot folosi aces efect de marire la punerea cursorului pe ea...merci anticipat...astept raspuns

    RăspundețiȘtergere
  6. Salut YahooValik am incercat de mai multe ori sa i-au legarura cu tine dar a fost imposibil asa ca,las un comentariu aici:

    Pentru a mari o imagine este nevoie de "class="thumbnail" acest efect face diferenta intre o imagine normala si una marita , deci intr-un cuvant daca nu folosesti acest cod nu este posibil sa utilizezi aces efect.

    RăspundețiȘtergere
  7. Buna! am incercat si eu sa pun acest efect si nu merge:|...imi afiseaza imaginea micsorata,iar langa ea imaginea marita ,iar sub ele descrierea

    RăspundețiȘtergere
  8. Buna Danuta deci pentru ca efectul sa fie valabil ATENTIE! primul cod trebuie adaugat exact deasupra <head> , daca nu il poti rezolva lasa-mi aici adresa blogului tau pentru a vedea daca este vreo problema in codul html OK

    RăspundețiȘtergere
  9. am pus chiar deasupra lui (head) primul cod,iar al 2-lea in postul unde am vrut sa apara imaginea. Multumesc frumos pentru ajutor

    RăspundețiȘtergere
  10. Salut Danuta daca ai reusit cu el este ok sau daca doresi alta varianta mai simpla pentru marit imaginea gasesti aici http://nouwidget.blogspot.com/2011/01/mareste-o-imagine-efectul-zoom.html

    RăspundețiȘtergere
  11. dragă constantin,
    am o mare rugăminte : explică-mi și mie detaliat cum pot face ca dacă trec mouse-ul peste un cuvânt simplu, sau peste un cuvânt ce reprezintă un link spre un alt post, să-mi apară o imagine, uite un exemplu aici
    http://www.graines-bocquet.fr/graine/9/GRAINES-DE-LEGUMES,-SEMENCES-POTAGERES
    urmăresc blogul tău și am încercat multe aplicații. unele mi-au reușit, altele nu, dar oricum sunt destule pe care le folosesc, după ce le încerc pe blogul meu ,,ciornă”
    te-am mai întrebat pe la altă secțiune, unde ți-am mai pus întrebări sau ți-am cerut ajutorul, dar nu mi-ai răspuns, cum să fac să pun și eu mânuța și ochișorii aceștia de la tine, care invită la comment.
    în speranța că-mi vei răspunde, mulțam fain

    RăspundețiȘtergere
  12. Buna Thamara pentru adaugarea unei imagini la comentari cum apare la mine acest desen animat trebuie sa mergi la Desing - Editare HTML - Extindeti sablon control si cauta urmatoarea linie: <h4 id='comment-post-message'><data:postCommentMsg/></h4> sterge partea asta de cod din ea: <data:postCommentMsg/> si adauga: <img src='url_imagine'/> unde inlocuiesti url_imagine cu imaginea dorita de tine sa apara deasupra in comentarii.

    RăspundețiȘtergere
  13. mulțam pentru promptitudine. și dacă vreau chiar mânuța și ochișorii aceștia de la tine, care este url-ul ?
    și durerea mea cea mai mare, cea cu imaginea la mouseover peste un link ?
    am un blog de grădinărit și vreau să-mi apară imaginea unei flori, de pildă, când trec cu mousul peste numele acelei flori ( ca în exemplul din site-ul francez)?
    încă o dată, mulțumesc mult, îmi este de foarte mare ajutor ceea ce faci tu aici

    RăspundețiȘtergere
  14. thamara URL_imagini este urmatorul: http://img37.imageshack.us/img37/7209/heid.gif

    in ce priveste un script care sa schimbe un text in imagine de moment nu am voi cauta in zilele urmatoare si il voi posta cu siguranta pe blog.

    RăspundețiȘtergere
  15. mulțumesc pentru url. l-am plasat și merge fain.
    ref. mărirea imaginilor la mouseover, mi-a mers la două postări, dar mai departe nu mai vrea. la postările noi îmi apare imaginea mică, sub ea img. mare și sub, descrierea.
    ce este greșit?

    RăspundețiȘtergere
  16. Buna thamara in primul rand incearca si reduce animatia de pe blog, acesta in primul rand ingreuneaza foarte mult deschiderea blogului tau, in al doilea rand nu este nevoie de 4 ceasuri pe blog acest widget are un efect de largire a pagini de blog si eu o vad in Firefox iesita din spatiu!!! dupa ce rezolvi aceste doua probleme o sa verific ce problema poate fi cu marirea imaginilor in postarile noi.

    RăspundețiȘtergere
  17. mulțam pentru promptitudine.
    la mine pe chrome, se vede foarte bine, nu iese din pagină.
    îți dau linkul blogului meu de testare
    http://akhenathen.blogspot.com/
    nici aici nu merge, și aici nu am decât câteva animații.
    mai mult, aici nu merge nici la mai vechi, nici la mai noi imagini, adică nu merge decât cu ambele imagini afișate. iar ceea ce dincolo merge, același script copiat în html-ul postării și în edit html al șablonului, nu merge
    adică, aici http://achenathen.blogspot.com/2011/05/traandafirii-mei-galbeni-si-urcaciosi.html#more merge, iar aici http://akhenathen.blogspot.com/2011/06/trandafirul-meu-degraba-urcator-si.html , apare cum vei vedea

    RăspundețiȘtergere
  18. Buna thamara problema este mai complexa decat as fi crezut, o sa-l studiez intr-o zi sa vad cu cine intra in conflict acel script.

    RăspundețiȘtergere
  19. mulțumesc mult. am aplicat multe trucuri și de la http://bloggerajutor.blogspot.com/ , cum ar fi zâmbilici la comentarii, culoare diferită la răspunsul autorului în comentarii, numerotare cu norișori la comment,( atea nu le am și pe blogul-test), și multe alte încercări

    RăspundețiȘtergere
  20. am rezolvat durerea mea cu imaginea la recerea peste un cuvânt sau link cu soluția de tooltips
    de la http://nouwidget.blogspot.com/2010/08/tooltips-cu-css.html
    mulțumesc mult.
    am făcut eu mai multe încercări pe blogul meu test, până mi-a ieșit. acum urmează să-mi organizez ceea ce voiam pe blogul meu de bază.
    încă o dată, MULȚUMESC.
    o rugăminte : pune-ți și tu o căsuță de căutare pe blog, să nu mai iau tot blogul la mână din post în post până găsesc ceea ce descoperisem la o citire anterioară și cred la un moment dat că a venit timpul să-mi folosească...!
    de pildă am căutat după http://nouwidget.blogspot.com/2011/04/o-galerie-de-imagini-diferita.html#comment-form două zile la rând !!!
    o căsuță de căutare, etichete, ceva să mă ducă direct la ceea ce-mi trebuie
    aaa,, și am rezolvat și problema asta cu imaginea de la potul acesta : am șters codul de deasupra < head > și l-am scris deasupra < /head>

    cine persverează reușește :D

    RăspundețiȘtergere
  21. Felicitari! thamara ma bucur ca ai reusit sa rezolvi probemele cu blogul tau,in ce priveste un motor de cautare intern il voi adauga curand.

    RăspundețiȘtergere
  22. Buna !

    Stii cum poti face sa apara text la trecerea cu mouse-ul peste o imagine , gen un fel de comentariu care sa descrie respectiva imagine ? Un sfat , o idee .

    RăspundețiȘtergere
  23. Intr-un document Excel ce coduri trebuie sa folosesc pentru a mari imaginea atasata intr-o celula (sau mai multe celule) atunci cand mouse-ul trece peste ea? Va multumesc si astept raspunsul dvs.

    RăspundețiȘtergere
  24. Cu parere de rau te anunt ca, nu cunosc un cod pentru un document Excel.

    RăspundețiȘtergere
  25. Salut, as vrea sa fac acelasi cod dar sa fie la click.cum procedez?Multumesc

    RăspundețiȘtergere
  26. Salut Coman, acest cod nu se poate modifica pentru click! cauta pe blog si o sa gasesti un cod pentru ce vrei tu

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc