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>
.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
Anonim
24 februarie 2010, 18:41
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.
Costi
24 februarie 2010, 18:46
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.
Iulia
2 aprilie 2010, 11:06
Am incercat sa fac si asta si... nu a functionat. Eu am vrut doar sa mareasca imaginea si am adaugat doar primul cod.
Costi
2 aprilie 2010, 11:51
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
YahooValik
28 octombrie 2010, 01:45
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
Constantin
30 noiembrie 2010, 20:00
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.
DaNuTzA
18 martie 2011, 23:28
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
Constantin
18 martie 2011, 23:44
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
DaNuTzA
19 martie 2011, 10:20
am pus chiar deasupra lui (head) primul cod,iar al 2-lea in postul unde am vrut sa apara imaginea. Multumesc frumos pentru ajutor
Constantin
19 martie 2011, 11:20
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
thamara
25 mai 2011, 15:44
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
Constantin
25 mai 2011, 19:01
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.
thamara
25 mai 2011, 19:10
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
Constantin
25 mai 2011, 20:26
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.
tamara
2 iunie 2011, 16:00
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?
Constantin
2 iunie 2011, 16:50
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.
tamara
2 iunie 2011, 17:10
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
Constantin
3 iunie 2011, 16:10
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.
tamara
4 iunie 2011, 11:08
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
thamara
8 iulie 2011, 19:02
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
Constantin
9 iulie 2011, 14:50
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.