2017

cu reduceri

Mareste imagine "efect de alunecare" cand trece mouse-ul peste ea!

Există multe metode de a extinde o imagine atunci când trece mouse-ul peste ea, una dintre ele este EXPANDO, un script care permite imagini să-şi marească dimensiunea sa pană la cea real, cu un efect de alunecare, şi prin retragerea mouse-ului să revină la dimensiunea initiala, de asemenea, cu aceeaşi efect.



Pentru a obţine acest efect, în fotografiile tale intra in Editati HTML si inaintea liniei </head> adaugi urmatorul script:
<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\bexpando\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>
Salveaza modificarile si ultimul pas, adaugi intr-o postare noua sau intr-un obiect gadget codul de imagine urmator:
<img border="0" src="URL_imagine" class="expando" width="100" />
inlocuiesti URL_imagine cu url-ul imagini ce doresti sa apara cu acest efect.

Imaginea trebuie să fie puse una cu dimensiunea normală, şi în cazul indicat în culoarea rosie este dimensiunea miniatura.

20 comentarios:

  1. nu mi iese nu stiu de ce am facut exact cum at i spus oricum faci o treaba minunata bafta

    RăspundețiȘtergere
  2. Salut Adian,poate imi explici ce ai facut concret si nu a mers.

    RăspundețiȘtergere
  3. Buna rory, acest script functioneaza corect,nu da erroare, poate imi explici cum l-ai folosit si nu merge.

    RăspundețiȘtergere
  4. Am copiat scriptul exact cum l-ai pus tu, înainte de "head".
    Apoi, la imagine, am încercat să pun imaginea, dar când trec cu mouse-ul peste ea, nu face nimic. Nu-mi măreşte. Nu înţeleg ce am greşit.
    Dar, hai să-ţi explic că am luat imaginea de pe photobucket.com. Oare acolo e ceva în neregulă? Pentru că de multe ori mi se întâmplă să nu mi se recunoască imagini de pe acel site. Ce spui?
    O fi acel site cu... "defect"? :D

    RăspundețiȘtergere
  5. Deci rory, scriptul il adaugi inaintea acestei lini: </head> , incearca cu o imagine in format GIF si vezi ce se intampla, dar atentie la adaugarea cod script.

    RăspundețiȘtergere
  6. Salut Dj.Nyck, cum nu se poate vedea ce sablon are blogul tau (apare privat), nu pot sa te ajut.

    RăspundețiȘtergere
  7. Salut, Constanti eu am facut aceasta metoda pe blogul meu dar nu imi mareste poza deloc dar eu am scos un templase de pe net care este mau diferit oare de asta nu merge la mine ?

    si as vrea sa ma mai ajuti cu ceva de ex am gasit aici http://trollarts.com/ daca dai oleaca jos la pagina o sa apara un buton cu apare la tine ""top"" si te trimite in sus la pagina dar la el se cheama """de la inceput;)"" eu as vrea sa pun un asemene buton si la mine dar mar interesa cum as putea sa pun de ex 2 linkuri de la 2 reclame diferite si sa dispara dupa un timp asa cum apare pe http://trollarts.com/ ca sa nu mai ocut spatiul la mine cu reclame pe blog el sa apara si dail in intereseaza pe client poate sa dee daca nu poate sa inchida reclama . ma poti ajuta cu aceste 2 probleme?


    Multumesc mult tineo tot asa

    RăspundețiȘtergere
  8. Salut Samuel poti lasa intr-un comentariu adresa url a blogului tau sa vad cum arata asa te pot ajuta!

    RăspundețiȘtergere
  9. Este valabil si pentru Stefan adresa url a blogului sa vad ce sablon folositi! si ce browser?

    RăspundețiȘtergere
  10. Buna Constantin .Am un blog de fotografie www.ovidiurusufotos.com la care as vrea sa aduc cateva modificari .Te rog mult sa ma ajuti daca ai timp si dispozitie . Mai exact as vrea sa-MI DISPARA FORMULARUL DE COMENTARII LA FIECARE POSTARE IAR APOI SA MODIFIC BUTOANELE DE NEXT SI PREW. SPER CA M-AM FACUT INTELES .ASTEPT RASPUNSUT TAU ovirusu@gmail.com este adresa mea.Multumesc !!!

    RăspundețiȘtergere
  11. Merge perfect acest efect: http://nouwidget.blogspot.ro/2011/09/mareste-o-imagine-cu-ajutorul-efectului.html Avantajul e ca nu trebuie integrat in sablon si are acelasi rezultat:)Multumim Constantin! PS Foarte greu codul antispam:(

    RăspundețiȘtergere
  12. OK Dan, in ce priveste codul antispam este dat automat de Blogspot, deci nu se poate interveni la el.

    RăspundețiȘtergere
  13. Buna, Felicitarii pentru minunatul blog, deoarece, eu unul am invatat multe de aici si pentru asta va multumesc. Ce nu imi reuseste este acest script, am icercat in fel si fel de modalitati..dar nimic inca :( si as vrea a stiu daca ma puteti ajuta

    RăspundețiȘtergere
  14. Salut Vali,multumesc pentru apreciere. Poate adaugi aici adresa blogului tau sa vedem despre e este vorba!

    RăspundețiȘtergere
  15. Buna, multumesc pentru raspuns,numele blogului il gasiti in profilul google din interiorul numelui.
    Multumesc anticipat.

    RăspundețiȘtergere
  16. ATENTIE! acest cod functioneaza nimai pe blogspot

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc