Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Expando Image ( marirea imagini la trecerea cursorului peste ea ) javascript


Navigare :: Javascript/Jquery
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Expando Image ( marirea imagini la trecerea cursorului peste ea ) javascript Sam 27 Mar 2010 - 1:37
Acesta este un script destul de simplu care mareste o imagine la trecerea cursorului peste ea, nu cand se da click.
Scriptul este cel mai bine functional pe browserul Mozilla FireFox.

Aici aveti o demonstratie a efectului: Previzualizare


Bun, sa incepem.

Pentru inceput, avem doua coduri css si javascript. Ele trebuiesc puse in pagina html intre <head> si </head>

CSS:
<style type="text/css">
img.expando{
border: none;
vertical-align: top;
}
</style>

JavaSCRIPT:
<script language="JavaScript">
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>

Dupa ce ati pus acele coduri, pentru al aplica pe o imagine va trebuii sa folositi acest cod, pe care-l puteti pune oriunde in pagina web
<img class="expando" border="0" src="LINK Imagine" width="100" height="100">
width este latimea imagini cand este mica inainte de marire si height inaltimea.

Cam asta este tot, daca doriti sa adaugati mai multe imagini, nu trebuie de cat sa multiplicati cod-ul pentru imagine dat mai sus.
 Elk
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: Re: Expando Image ( marirea imagini la trecerea cursorului peste ea ) javascript Sam 27 Mar 2010 - 5:04
Mersi motanel !

O sa-l folosesc si eu indragostit
 Cosminel4u
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: Re: Expando Image ( marirea imagini la trecerea cursorului peste ea ) javascript Sam 14 Mai 2011 - 8:50
Cum pot seta dimensiunea maxima la care sa se extinda ?!
Chiar am nevoie ? planset
Vreau sa se mareasca de la 100x100 pana la maxim 800x600
se poate?
 Continut sponsorizat
Rang:


MesajSubiect: Re: Expando Image ( marirea imagini la trecerea cursorului peste ea ) javascript



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu