Connect

Vasile Dragomir

Tricolor

luni, 25 martie 2013

Tutorial cod pentru mărirea /micşorarea unei imagini când treci cu maous-ul peste ea

Flag Counter



Poate ai văzut pe unele site/blog unele imagini care atunci când treceai cu maous-ul peste ele se măreau automat . Desigur că şi tu ai dori să poţi face aşa ceva pe blogul tău . Nimic mai simplu am să îţi arăt cum se poate face acest lucru .

Iată acesta este codul care trebuie copiat şi instalat pe pagina ta de blog în HTML pentru Blogger



<img height="100" onmouseout="this.width=250;this.height=150;" onmouseover="this.width=400;this.height=300;" src=" URL-IMAGINE " width="100" />
 


Iar acesta este codul pentru alte platforme in caz ca nu ai blogger
<img src="URL-IMAGINE" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=250;this.height=150;" width="250" height="150" />

Unde URL-IMAGINE  este  url –leul imagini tale pe care am sa-ţi explic mai jos cum il găseşti .

height=150;" width="250" height="150 aceste mărimi este bine să fie alese în funcţie de imagine şi să ţinem cont dacă imaginea este pătrată aceste valori să fie egale sau dacă imaginea este dreptunghi atunci ele vor fi diferite .

ATENTIE:  Fiecare imagine are un cod URL al ei care trebuie introdus in locul URL-IMAGINE

Deci cum procedăm : Deschidem pagina noastră de blog şi intrăm în partea de postări

Aici fiecare dintre noi care avem un blog ştim cum să introducem o imagine din calculator , despre acestea este vorba în general deoarece la cele de pe alte bloguri/site aflarea adresei URL este identica cu ce vă voi arata în continuare .

Odată ce ai adus imaginea de pe calculatorul tău aici o introduci în postarea ta .

Iată imaginea din calculator este în postare şo vezi asă dacă ai setat opţiunea „Scrieti ” sau dacă ai setat HTML” vei vedea un cod în care dacă eşti atent  găseşti codul care te interesează ( codul URL din calculatorul tău )


Acest cod care este încercuit cu roşu îl copiezi şi îl introduci în codul tău de bază în locul ="URL-IMAGINE" după care  îl înserezi  în postarea ta în HTML , acum dacă dai clik pe „Scrie” vei vedea că a apărut două imagini una mai mică una mai mare cea originală

 

Pentru a fi mai uşor de şters şi pentru a nu face greşeli este bine ca ştergerea imagini originale (mari ) să o faci din această situaţie nu din HTML unde poţi şterge şi altceva .

Apoi dacă salvezi postarea şi o deschizi vei observa că aceasta atunci când treci cu maous-ul peste aceasta se măreşte iar dacă muţi maousul revine la loc .

Însă se poate întâmpla ca tu să schimbi sau să ştergi efectiv din calculator imaginea ta dar cel mai des este faptul că tu nu ai calculatorul deschis 24/24 de ore . Şi atunci este indicat ca să copiezi codul URL al imagini postate pe blog imagine care va rămâne sigur 24/24 de ore pe internet şi atunci codul sigur va funcţiona tot mereu .
Pentru a găsi acest cod va trebui să dai clic dreapta pe imaginea pe care tu ai copiat-o de pe calculator în postarea ta
 

Cea mare care am spus mai sus să o ştergi consider că încă nu ai şters-o , iar aici dai clic pe „ Deschide link în pagină nouă ” şi automat vei vedea în bara de sus o filă nouă deschisă .
 



Din această pagină copiezi URL-ul imagini şi acesta îl introduci în codul tău în locul "URL-IMAGINE" , apoi copiezi totul în HTML



<img src="http://1.bp.blogspot.com/-ws5XOrjGaOw/UVBvTIP7xBI/AAAAAAAAF0Q/3nAR0Fr05zE/s1600/sabina2.jpg " onmouseover="this.width=400;this.height=300;" onmouseout="this.width=250;this.height=150;" width="100" height="100" />



Cam aşa trebuie să arate codul final .



Verifici apoi schimbând în „Scrie ” şi vei observa că ai două imagini în postare una mare şi una mică ,ai grijă că dacă faci revenirea în HTML se poate ca să ai surpriza să fie modificat codul HTML ,verifică-l dar ideal ar fi să salvezi înainte de a trece înapoi în HTML pentru a reintroduce o nouă imagine cu un nou cod în cazul în care ai mai multe imagini ,este mai multă muncă dar mai multă siguranţă .


Daca ai experienţă poţi să faci ştergerea direct din







La final după ce ai introdus tot ce doreşti şi ai făcut salvările postării vei avea  ceea ce ai dorit ,o imagine care se măreşte atunci când treci cu maousul peste ea . Metoda de a găsi URL-ul unei imagini de pe internet este asemănătoare cu aceasta ,clic dreapta imagine Deschide link în pagină nouă ” şi copiezi URL-ul apoi , il introduci  în locul "URL-IMAGINE" şi gata .De obicei acest proceseu este folosit atunci cand avem imagini intr-o pagina unde vrem sa apara o imagine mica care se va mari atunci cand treci cu maousul peste ea .