AccessGratuit
Bine ati venit! Very Happy

Daca ati ajuns la aceasta pagina inseamna ca nu sunteti INREGISTRAT sau CONECTAT pe forumul AccessGratuit. Puteti face asta utilizand butoanele din meniu destinare acestor actiuni!
AccessGratuit.com
www.accessgratuit.com
cheers

Expando Image ( JavaSCRIPT )

AccessGratuit :: Despre AccessGratuit.com ::  

Vezi subiectul anterior Vezi subiectul urmator In jos

Expando Image ( JavaSCRIPT )

Mesaj Scris de Motanel la data de Mar Mar 30, 2010 9:31 pm

Expando Image (Demo)
Extinderea imagini la trecerea cursorului peste ea.


Puneti aceste doua coduri intre <HEAD> si </HEAD> in sursa pagini web.

CSS (Cascading Style Sheets)
<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>


Pentru postarea imaginilor in pagina web respectiva, folositi acest cod.

<img class="expando" border="0" src="LINK Imagine" width="100" height="100">


width: latimea imagini
height: inaltimea imagini
(latimea si inaltimea inainte de extinderea imagini)


Pentru orice intrebare sau nelamurire cu privire la acest tutorial, deschideti un topic in sectiunea "Ajutor & Intrebari" !!!

Motanel
Membru AccessGratuit

<b>Sex</b> Sex: masculin
<b>Numarul mesajelor</b> Numarul mesajelor: 84
<b>Credite</b> Credite: 83102
<b>Varsta</b> Varsta: 22

http://alexandrumiron.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

AccessGratuit :: Despre AccessGratuit.com ::  

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum