luni, 10 februarie 2014

Blog atelier – imagine RollOver

Mecanic de blog tutorial rollover code
Deoarece trec printr-o perioadă de totală apatie şi dezinteres raportat la orice (mai puţin o chestiune care îmi zdruncină nervii şi-mi toacă minuţios puţinele grame de răbdare rămase în dotare), dar animat de dorinţa de a-mi face totuşi prezenţa pe acest blog, vin cu un scurt tutorial, aşa cum am mai făcut în câteva rînduri, AICI, pentru aceia care posibil ar fi interesaţi de astfel de subiecte. După cum spuneam, lipsa de chef pe care o manifest plenar de ceva vreme, mă lasă fără lucru, iar când omu’ n-are ce face... ştim cu toţii, îşi face, se cheamă lucru manual. Uite aşa,
s-a materializat acest text, articol fiind totuşi un termen mult, dar mult prea pretenţios.

Zilele trecute am avut năstruşnica idee de a toaleta blogul, nu ceva foarte serios, mici retuşuri, mai degrabă estetice decât practice ori funcţionale. Epocala idee era să creez o imagine dinamică în sidebar, la modul concret, poza de profil să se schimbe cu o alta în momentul în care cursorul mouse-ului trece peste ea (onMouseOver, îi zice, tehnic vorbind) şi să revină la imaginea iniţială odată cu ieşirea mouse-ului din perimetrul pozei. Genial, nu? Bine, nu-i chiar atât de nemaipomenită ideea, au aplicat-o alţii cu mult înaintea mea. Totuşi, cele câteva minute de, aşa-zisă, muncă în atelierul hărniciei, migălind la o invenţie aproape fără rost nu mi-au dăunat câtuşi de puţin, asortându-se perfect cu starea-mi de spirit făcută franjuri. Iar pentru ca strădania să nu rămână întru totul inutilă m-am gândit să vă fac cunoscut rezultatul experimentului, poate, cine ştie, îi va fi cuiva de folos.

Dar să lăsăm sporăvăielile (dacă vreţi puteţi urma linkul, cu siguranţă vă veţi alege cu ceva mult mai util, cel puţin în privinţa culturii generale, decât continuând să lecturaţi aceste rânduri dezlânate) şi să trecem la chestiile practice. Aşadar, reţeta pentru obţinerea unui aşa-zis efect „image rollover”, într-o aproximativă limbă română i s-ar spune imagine rotativă sau rostogolitoare, necesită următoarele ingrediente: două poze şi câteva linii de cod. Atât? Evident, vă este trebuinţă „tigaia” ori „oala” în care să le gătiţi cu măiestrie pentru a încânta mai apoi privirile năucite de plăcere ale privitorilor, (care desigur vă vor considera de-acu’ înainte un zeu/zeiţă, după caz, al/a blogosferei), mai înainte menţionatul rol fiind jucat de propriul vostru blog.

Aşadar, vreţi să vă umflaţi în pene afişând pe propriul blog un ceva mirobolant similar cu imaginea rotativă de aici?

Aici scrieţi textul vostru. Dacă nu doriţi să afişaţi text, eliminaţi porţiunea de cod marcată cu gri (vezi codul mai jos).
Bine aţi venit în casa mea virtuală. Plimbaţi-vă pe aici, citiţi, comentaţi, faceţi ce vreţi, dar mai ales nu vă grăbiţi să plecaţi, staţi cât de mult vă face plăcere, pe scurt, simţiţi-vă ca acasă.



Dacă răspunsul este DA, mai jos aveţi codul de inserat în obiectul widget. Tot ceea ce trebuie să faceţi este să înlocuiţi „AdresaPoza1” şi „AdresaPoza2” cu propriile voastre adrese care duc la locul virtual în care aveţi „depozitate” minunatele fotografii pe care vreţi să le rostogoliţi la fiecare trecere a săgeţii mouse-ului pe deasupra lor. Oricât de genial aş fi n-am cum să vă scriu linkul corespunzător, calea sau path-ul (că-s mai de modă veche, old fashioned, cum s-ar zice) respectivelor fişiere de imagine, *.gif, *.jpg sau .*png; aici vă descurcaţi singuri (ale mele sunt pe G+; deci intru pe profil/fotografii, dau click pe poza dorită, apoi click-dreapta pe imagine, iar din meniul senzitiv selectez "Copiază adresa imaginii", pe care o "lipesc" cu Ctrl+V în locul dorit din cod). De regulă, va trebui să jonglaţi cu dimensiunile imaginii (încercaţi însă să păstraţi proporţia cu originalul, altfel imaginea va ieşi deformată) pentru a se încadra în cele ale barei laterale. Îndepliniţi şi această ultimă sarcină deloc dificilă, modificând valorile "width" şi "height" scrise cu roşu.

<!doctype html>
<html>

<head>

<!-- Cod JavaScript.-->
<script language="javascript">
        function MouseRollover(MyImage) {
         MyImage.src = "AdresaPoza2";
    }
        function MouseOut(MyImage) {
                MyImage.src = "AdresaPoza1";
    }
</script>
</head>

<body>

<!-- Aici se va afisa imaginea rollover.-->
<!--style="float:right" dacă se doreste alinierea la dreapta-->
<!--div align="center" dacă se doreste textul formatat central-->
<!-- modificati width/height pentru a se incadra corect in sidebar; daca valoarea width este egală cu latimea sidebar-ului atunci textul va fi afisat sub poza-->
<img src="AdresaPoza1" boarder="0px" width="120px" height="120px" style="float:left"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>

<div align="justify">Aici scrieţi textul vostru. Dacă nu doriţi să afişaţi text, eliminaţi porţiunea de cod marcată cu gri, adică tocmai asta pe care o citiţi acum. :D Exemplu: Bine aţi venit în casa mea virtuală. Plimbaţi-vă pe aici, citiţi, comentaţi, faceţi ce vreţi, dar mai ales nu vă grăbiţi să plecaţi, staţi cât de mult vă face plăcere, pe scurt, simţiţi-vă ca acasă.</div>

</body>
</html>

Asta este tot! Daţi-vă „rotunzi”, admiraţi-vă capodopera cât poftiţi, cu siguranţă se vor găsi câţiva novici (pe care cu onoare îi reprezint) care vi se vor alătura în actul de contemplare a magnificei voastre creaţii. O veste proastă pentru cei care au blogul pe platforma gratuită wordpress (.com), smecheria se pare că nu funcţionează din pricina codului javascript, neacceptat de numita platformă (d-aia am abandonat blogul cu şi despre de şah, mutându-l pe mult mai prietenosul blogspot).

Puteţi admira minunăţia în sidebar, acolo unde îmi iau în serios calitatea de gazdă ospitalieră şi vă urez bun venit pe blog, al doilea widget din bara laterală, imediat sub "Autori".

Pentru aceia care vor să-şi facă de lucru (pentru a părea ocupaţi) şi interesaţi de feluritele ghiduşii care se pot face pe un blog, internetul este o adevărată oază de inspitaţie, folosiţi cu încredere google search. Iar dacă manifestaţi şi porniri autodidactice w3schools este o sursă bună de informare şi instruire (sigur, mai sunt şi altele, sumedenie).


Sursa FOTO

14 comentarii:

  1. Aş spune că starea de apatie a cuprins întreaga Românie (mai şi rimează făr' de voie), cu siguranţă pe mine da; adăugând şi faptul că sănătatea îmi e hărţuită, fac şi eu... ce pot. Adică am redus aproape de zero activitatea mea în acest spaţiu - care şi aşa nu era una nemaipomenită. O virgulă în coasta câtorva articole şi bloguri pe care încerc să le urmăresc.
    Să mai credem că după atâta frig şi ceaţă/se arată soarele?, cum ne încânta Topârceanu în copilărie, azi, adulţi fiind, vedem clar că soarele nu prea iese pe strada noastră. După atâta război de ce natură o fi el, aşteptăm un "sol de pace c-o năframă-n vârf de băţ". Unde mă-sa îi solul ăla că mi-s nervii franjuri şi gâtul înţepenit de când îl tot aştept!
    Mai e şi blogul care se pare că mi-a devenit - probabil starea amplifică - o corvoadă. M-ai pomenit în marea ta generozitate şi pentru asta mulţumesc, dar articolele mele nu sunt decât praf aruncat în ochi puţinilor cititori de "cultură generală". Am rugat şi eu pe cineva să scrie articole pe blogul meu atunci când are chef, inspiraţie şi timp. Nu ştiu de-o va face, căci n-avem legături de sânge, de prietenie, decât poate îmbrăcăm aceeaşi armură quijotească a visătorilor care cred că mai pot salva limba, pe care eu o lepăd, piesă cu piesă, fără nepăsare. ;)
    Te-ai jucat şi tu printre linii şi coduri, ne-ai (şi te-ai) descoperit câteva taine. Mură-n gură celor ce nu ştiu, dar vor să se joacă cu setările. Datul ăsta mură-n gură o fi defect profesional? ;) :)
    "Vale!" = "Rămâi sănătos!", aşa am vrut a fi tradusă expresia cu ocazia altui articol; familiarul de astăzi "Să fii sănătos!" sau "Ai grijă de tine!"

    RăspundețiȘtergere
    Răspunsuri
    1. Eu aş completa: apatia, salvează România (sau pe noi locuitorii mioriticelor plaiuri), întrucât graţie acestei stări ignorăm până şi degringolada din juru-ne, devenită un fapt comun. Ceea ce mă deprimă şi nelinişteşte acum este însă starea sănătăţii tale, aşadar, pune-te repede pe picioare, implicit pe treabă (cu blogul), căci iată, devine deja vădită creşterea ratei "criminalităţii gramaticale", :o ;) :D
      Da, m-am cam jucat cu liniile de cod, poate au intrat un pic şi cuvintele în acelaşi joc, dar sper că nu m-am jucat cu nervii voştri, ai cititorilor. :D ;) În plus, am avut ocazia să facem cunoştinţă (voi mă ştiaţi Centurion, aici sau din G+, Bond... James Bond) ;)
      Mulţumesc pentru traducerea latinescului "vale". Recunosc, latina n-a fost tocmai punctul meu forte, deşi am avut-o drept materie de studiu 3 ani (în clasa a VIII-a şi în trepta I). Am considerat că pentru a-mi menţine echilibrul pe "aurita cale de mijloc", îmi sunt suficiente originile latine, au fost... nota mea favorită, 8 (opt), să nu stârnesc invidii ori depresii. :D Probabil dacă aş fi fost mai silitor, elev de 9, (zecele fiind rezervat geniilor sau profesorilor) ştiam...
      Aşadar, să fii (grabnic) sănătoasă şi aşa să rămâi! Să ai grijă de tine! O săptămână aşa cum ţi-o doreşti.

      Ștergere
  2. Neata, Centurion. :D Am si eu o asemenea imagine dinamica in sidebar, nu stiu daca ai observat-o, unde se pot admira fotografiile mele de pe instagram. :)) Poze cu autoarea blogului sunt suficiente pe fb, dar promit si mai multe surprize pentru viitor pe pagina de facebook a blogului. :P
    Pai tu publici mai des decat mine si te mai plangi ca nu ai chef de blog? Eu ce sa mai zic atunci?
    Apropos de articolele de pe bloguri, stii ca sunt fetele alea care scriu exclusiv despre beauty. Ei bine, ele isi numesc creatiile "postari", nu articole. Sa fie modestie exagerata sau obiectivitate, realism? :P :D
    Parerea mea? Poate ca avem asteptari prea mari de la noi si de la altii. Poate articolele sunt scrise exclusiv de ziaristi, iar noi, pe blogul personal, avem libertatea de a posta orice ne trece prin cap. Blogul nu e revista online. Iar noi publicam ganduri, creatii, povesti, poze, idei, clipuri, trasnai, aberatii. :P
    Seara frumoasa iti doresc! :)

    RăspundețiȘtergere
    Răspunsuri
    1. Seara bună, Nice!
      Am văzut widgetul de pe blogul tău, de acolo m-am inspirat, numai că nu doream o prezentare de slide-uri, ci mai degrabă să facem cunoştinţă (cum îi spunem Antonelei, voi mă ştiaţi drept Centurion, iar pt. cei din G+ şi mai nou FB, eram 007). Am observat că şi blogspotul permite adăugarea unui widget pt. derularea unui album cu poze, dar mi se pare cam incomod, drept pentru care, cândva, nu ştiu când, aloc vreo 30 de minute pentru a vă prezenta codul aferent unei asemenea ghiduşii ;)
      Postări, articole ori texte, cum le zic eu, până la urmă nu prea contează sunt oarecum sinonime atunci când vorbim de blog. Am însă nişte îndoieli în privinţa exclusivităţii acordate de tine jurnaliştilor, oi fi eu răutăcios, însă sunt destui care prin aşa numitele lor "articole" (ghilimele se impun) nu dovedesc nici măcar parcurgerea claselor gimnaziale, măcar pe aurita cale de mijloc :)))
      Hai că nu public des, cândva o făceam... acum... am locţiitor, păi altfel cum? Sunt "pensionar", în termeni cazoni "în rezervă" ("în retragere" fiind rezervat generalilor, iar eu n-am fost decât un modest centurion). :D :))
      Seară faină (atât cât a mai rămas din ea) şi o săptămână fără elemente negative (mai ales la serviciu). ;)

      Ștergere
  3. Bună dimineaţa, Centurion.
    Cu chef sau fără chef, ai făcut lucruri bune şi frumoase şi ne mai şi cadoriseşti cu informaţii atât de utile şi pentru asta îţi mulţumesc mult.
    Nu eşti singurul care trece printr-o astfel de stare. Important e să nu ne plafonăm în ea pe termen lung, pentru că ar fi un timp pierdut, pe care nu-l mai poţi recupera şi-ar fi păcat. Timpul nu se poate recupera, cei pierdut, pierdut rămâne!
    Ai o zi minunată, Centurion! :)

    RăspundețiȘtergere
    Răspunsuri
    1. Bună, Ştefania!
      Merci pentru apreciere, deşi nu prea merit laudele tale... Regret că nu am strarea necesară pentru a scrie despre lucruri şi fapte (istorice) mult mai interesante, aşa ca în vremurile bune ;)
      Da, ai dreptate, mă refeream şi eu într-o postare anterioară la TIMP, numindu-l eternul inamic... tocmai când începem să credem că ni l-am făcut prieten ne va dovedi contrariul...
      Seară plăcută, să ai. :)

      Ștergere
  4. Răspunsuri
    1. Bine ai venit, Daniela. :)
      Nu, nici pomeneală... Dacă eram deprimat nu cred că alocam cele 25-30 de minute necesare redactării acestui text. Iar dacă, prin absurd (dată fiind însăşi starea depresivă), "intram" pe blog şi eram capabil să leg două vorbe (dată fiind altă stare), foarte probabil v-aş fi descris cu lux de amănunte binefacerile şi proprietăţile curative întru alungarea depresiei obţinute prin combinarea a două lichide, whiskey + bere (nu contează marca, preferabile ar fi, J. Daniels şi Heineken) ;)

      Ori poate te referi la starea depresivă pe care ţi-a provocat-o lecturarea acestui text? Asta chiar aş înţelege :D

      Ștergere
  5. Eu credeam că evenimentul de la jumătatea lunii ianuarie ţi-a adus ceva energii, apoi ţinând cont şi de ajutorul primit de la acele vizite necurate... vei fi prezent tot timpul printre cuvinte... E aşa de rea vremea prin Reşiţa? :)

    RăspundețiȘtergere
    Răspunsuri
    1. Bună, Adrian :)
      Evenimentul acela la care faci referire, mi-a adus doar un an în plus, mai puţin un alt eveniment pe care-l aşteptam de prin toamnă...
      În ceea ce-l priveşte pe "amicul" amintit, nu degeaba i se atribuie arhicunoscutul epitet, întotdeauna există ceva necurat în subsidiar...
      În rest, vreme bună la Reşiţa, o toamnă târzie sau o primăvară timpurie, cum vrei să-i spui (azi au fost 18 ºC).
      Seară faină, alături de familie :-)

      Ștergere
  6. N-am inteles nimic dar de-abia acum mi-a dat prin cap sa trec sageata peste centurionul tau !!!! Te-am vazuuuut !!! Ce chestie!

    RăspundețiȘtergere
    Răspunsuri
    1. Nici nu era prea mult de priceput, afară (poate) de faptul că omul când n-are de lucru îşi face :D
      Tehnic, este o chestie aproape fără rost (afară de cel de a ne cunoaşte, mi-e cam greu să-i găsesc altă utilitate). Da' mă bucur că ne-am cunoscut :-)

      Ștergere
  7. Va salut! Cum se multiplica pentru a afisa pe o singura pagina mai multe imagini?

    RăspundețiȘtergere
    Răspunsuri
    1. Bine ai venit, RO MARYON :-)

      Dacă am înţeles bine, doreşti afişarea unei serii de "diapozitive".
      Aici este ceva care s-ar putea să-ţi fie de folos:
      http://www.ricocheting.com/code/javascript/html-generator/image-slideshow
      sau:
      http://forum.softpedia.com/topic/62437-slide-show/

      O să încerc în viitorul apropiat sau mai îndepărtat (în limita timpului disponibil, dar mai ales al chefului de "muncă") să pun pe blog un tutorial pentru o asemenea ghiduşie. Stai pe-aproape (în caz că nu te ajută linkurile anterior menţionate).

      Ștergere