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
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.
RăspundețiȘtergereUn salut.
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ȘtergereAm 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ȘtergereBuna Iulia nu am inteles cum ai folosit doar primul cod?
RăspundețiȘtergereDupa 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
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ȘtergereSalut YahooValik am incercat de mai multe ori sa i-au legarura cu tine dar a fost imposibil asa ca,las un comentariu aici:
RăspundețiȘtergerePentru 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.
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ȘtergereBuna 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Ștergeream 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ȘtergereSalut 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Ștergeredragă constantin,
RăspundețiȘtergeream 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
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Ștergeremulțam pentru promptitudine. și dacă vreau chiar mânuța și ochișorii aceștia de la tine, care este url-ul ?
RăspundețiȘtergereș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
thamara URL_imagini este urmatorul: http://img37.imageshack.us/img37/7209/heid.gif
RăspundețiȘtergerein 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.
mulțumesc pentru url. l-am plasat și merge fain.
RăspundețiȘtergereref. 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?
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Ștergeremulțam pentru promptitudine.
RăspundețiȘtergerela 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
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Ștergeremulț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Ștergeream rezolvat durerea mea cu imaginea la recerea peste un cuvânt sau link cu soluția de tooltips
RăspundețiȘtergerede 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
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ȘtergereBuna !
RăspundețiȘtergereStii 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 .
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ȘtergereCu parere de rau te anunt ca, nu cunosc un cod pentru un document Excel.
RăspundețiȘtergereSalut, as vrea sa fac acelasi cod dar sa fie la click.cum procedez?Multumesc
RăspundețiȘtergereSalut 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