...

View Full Version : Image zoom mouseover



css-quest
11-15-2010, 03:24 PM
Hello folks, I'm new here.
This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images.

It is probably best I explain this by using drawings.
As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later)

http://i54.tinypic.com/166nocm.png
(Figure 1)

Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position.

http://i55.tinypic.com/2sb3i3m.png
(Figure 2)

The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example!

Is there any way to do this or script I can use? My javascripting skills aren't brilliant!

Cheers.

connollyc4
11-15-2010, 04:30 PM
I can't see any of the images.. ?

css-quest
11-15-2010, 05:03 PM
Image 1: http://i54.tinypic.com/166nocm.png
Image 2: http://i55.tinypic.com/2sb3i3m.png

:)

phpdeveloper
11-15-2010, 05:11 PM
It is possible with the help of CSS and JQuery.

First of all display small div with image and when mouse hover the image or div then that div replace another css or div which is show big image.

If you have knowledge about jquery and css then you can do easily.

Look at below url :

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Demo URL : http://www.sohtanaka.com/web-design/examples/image-zoom/

coothead
11-15-2010, 05:43 PM
Hi there css-quest,

and a warm welcome to these forums. ;)

Have a look at this example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>untitled document</title>

<style type="text/css">
body {
background-color:#000;
}
#container {
position:relative;
width:326px;
margin:260px auto;
}
#container img {
width:100px;
height:108px;
border:3px double #eee;
position:absolute;
}
#container .bigger {
width:200px;
height:216px;
margin:-54px 0 0 -50px;
z-index:1;
}
#p1 {left:0;}
#p2 {left:110px;}
#p3 {left:220px;}
</style>

<script type="text/javascript">

function bigPic(){

pic=document.getElementsByTagName('img');

for(c=0;c<pic.length;c++) {
pic[c].onmouseover=function() {
this.className='bigger';

this.onmouseout=function() {
this.className='';
}
}
}
}
window.addEventListener?
window.addEventListener('load',bigPic,false):
window.attachEvent('onload',bigPic);

</script>

</head>
<body>

<div id="container">
<img id="p1" src="dog.jpg" alt="">
<img id="p2" src="apple.jpg" alt="">
<img id="p3" src="banana.jpg" alt="">
</div>

</body>
</html>

coothead

css-quest
11-15-2010, 05:49 PM
It is possible with the help of CSS and JQuery.

First of all display small div with image and when mouse hover the image or div then that div replace another css or div which is show big image.

If you have knowledge about jquery and css then you can do easily.

Look at below url :

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Demo URL : http://www.sohtanaka.com/web-design/examples/image-zoom/

That seems really useful, thanks! I'm not very familiar with jQuery, but say I wanted to use a different shaped image, (for example, a hexagon), would I just use CSS to position the DIVs together and make the image hexagonal or would I somehow have to draw the hexagon on to the webpage?

The other thing is, using that script, is it possible to remove the bit on the right that displays a larger version? :)

Thanks!

css-quest
11-15-2010, 05:52 PM
Hi there css-quest,

and a warm welcome to these forums. ;)

Have a look at this example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>untitled document</title>

<style type="text/css">
body {
background-color:#000;
}
#container {
position:relative;
width:326px;
margin:260px auto;
}
#container img {
width:100px;
height:108px;
border:3px double #eee;
position:absolute;
}
#container .bigger {
width:200px;
height:216px;
margin:-54px 0 0 -50px;
z-index:1;
}
#p1 {left:0;}
#p2 {left:110px;}
#p3 {left:220px;}
</style>

<script type="text/javascript">

function bigPic(){

pic=document.getElementsByTagName('img');

for(c=0;c<pic.length;c++) {
pic[c].onmouseover=function() {
this.className='bigger';

this.onmouseout=function() {
this.className='';
}
}
}
}
window.addEventListener?
window.addEventListener('load',bigPic,false):
window.attachEvent('onload',bigPic);

</script>

</head>
<body>

<div id="container">
<img id="p1" src="dog.jpg" alt="">
<img id="p2" src="apple.jpg" alt="">
<img id="p3" src="banana.jpg" alt="">
</div>

</body>
</html>

coothead

Oh wow, even better! Again, same question, for hexagonal shapes (and I wanted to "connect" them together) would it just be a mtter of positioning the DIVs in the right places?

Thanks :)

vwphillips
11-15-2010, 06:40 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:relative;left:100px;top:100px;
}

#tst IMG {
width:200px;height:150px;z-Index:100;
}

/*]]>*/
</style>
<script type="text/javascript">
// AnimateII (08-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:relative;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimateII('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
//

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.

// **** Notes
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity', clip, 'color', 'background-Color'.
//
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//
// Note 3: To animate colors('color' or 'background-Color') the start and finish values may be.
// HEX('#FF0000') or RGB('rgb(255,0,0)'), abbreviated HEX or named colors are not allowed.
//
// Note 4: To animate 'clip' the start and finish values may be
// arrays of the top, right, bottom and left values([0,100,20,0])
// or the standard clip format 'rect(0px,100px,20px,0px)'.
//
// Note 5: It may be required to access the current value of the effect.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively && each field is an array.
// For color each field is an array storing the R, G, B values.
// The current effect value is recorded in A.data[0].
//
// Note 6: A function may be called on completion of the effect by assigning the function
// to the animator instance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//


// **** Functional Code(2.61K) - NO NEED to Change


function zxcAnimateII(mde,obj,srt){
this.obj=(typeof(obj)=='string')?document.getElementById(obj):obj;
this.mde=mde.replace(/[-#]/g,'');
this.data=[srt?this.convert(srt,this.mde):0];
this.to=null;
}

zxcAnimateII.prototype={

animate:function(srt,fin,ms,c){
this.std=!(this.mde.indexOf('olor')>0||this.mde=='clip'||this.mde=='opacity');
srt=this.convert(srt,this.mde);
fin=this.convert(fin,this.mde);
this.pos=true;
for (var z0=0;z0<srt.length;z0++){
if (srt[z0]<0||fin[z0]<0){
this.pos=false;
}
}
c=c||'';
this.c=c.charAt(0).toLowerCase();
this.mS=ms||2000;
clearTimeout(this.to);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.mS);
this.data=[[],srt,fin];
this.cng();
},

cng:function(){
var ms=new Date().getTime()-this.srttime;
for (var z0=0;z0<this.data[2].length;z0++){
this.data[0][z0]=Math.floor(this.c=='s'?(this.data[2][z0]-this.data[1][z0])*Math.sin(this.inc*ms)+this.data[1][z0]:this.c=='c'?(this.data[2][0])-(this.data[2][z0]-this.data[1][z0])*Math.cos(this.inc*ms):(this.data[2][z0]-this.data[1][z0])/this.mS*ms+this.data[1][z0]);
if (this.pos&&this.data[0][z0]<0){
this.data[0][z0]=0;
}
}
this.cngstyle();
if (ms<this.mS){
this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
}
else {
this.data[0]=this.data[2];
this.cngstyle(this.data[0]);
if (this.Complete){
this.Complete(this);
}
}
},

cngstyle:function(){
var v=this.data[0];
if (this.std){
this.obj.style[this.mde]=v[0]+'px';
}
else if (this.mde.indexOf('olor')>0){
this.obj.style[this.mde]='rgb('+v[0]+','+v[1]+','+v[2]+')';
}
else if (this.mde=='clip'){
this.obj.style[this.mde]='rect('+v[0]+'px,'+v[1]+'px,'+v[2]+'px,'+v[3]+'px)';
}
else if (this.mde=='opacity'){
zxcOpacity(this.obj,v[0]);
}
},

convert:function(col,mde){
if (typeof(col)=='object'){
return col;
}
else if (mde=='clip'){
col=col.replace(/[rect()px]/g,'').split(',');
return [col[0]*1,col[1]*1,col[2]*1,col[3]*1];
}
else if (!col.toString().match('#')){
return [parseInt(col)];
}
else {
col=parseInt(col.substring(1,3),16)+','+parseInt(col.substring(3,5),16)+','+parseInt(col.substring(5 ,7),16);
col=col.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(col[0]),parseInt(col[1]),parseInt(col[2])];
}
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

</head>

<body>
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
</div>
http://209.188.89.109/showthread.php?t=209326
<script type="text/javascript">
/*<![CDATA[*/

function zxcZoomImage(o){
var p=document.getElementById(o.ID),imgs=p.getElementsByTagName('IMG');
for (var ary=[],z0=0;z0<imgs.length;z0++){
ary[z0]=imgs[z0];
}
this.imgs=[];
for (var img,w,h,z1=0;z1<ary.length;z1++){
this.addevt(ary[z1],'mouseover','zoom',z1);
w=ary[z1].width*o.Zoom;
h=ary[z1].height*o.Zoom;
img=new Image();
img.src=ary[z1].src;
img.style.position='absolute';
img.style.zIndex='2';
img.style.left=ary[z1].offsetLeft-(w-ary[z1].width)/2+'px';
img.style.top=ary[z1].offsetTop-(h-ary[z1].height)/2+'px';
img.style.width=w+'px';
img.style.height=h+'px';
this.imgs[z1]=[new zxcAnimateII('clip',img,[h/2,w/2,h/2,w/2]),[h/2,w/2,h/2,w/2],[0,w,h,0]];
img.style.clip='rect('+h/2+'px,'+w/2+'px,'+h/2+'px,'+w/2+'px)';
p.appendChild(img);
}
this.ms=o.AnimationSpeed||1000;
this.lst=this.imgs[0];
}

zxcZoomImage.prototype={

zoom:function(nu){
this.lst[0].obj.style.zIndex='100';
this.lst[0].animate(this.lst[0].data[0],this.lst[1],this.ms);
this.lst=this.imgs[nu];
this.lst[0].obj.style.zIndex='101';
this.lst[0].animate(this.lst[0].data[0],this.lst[2],this.ms);
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}

}

new zxcZoomImage({
ID:'tst',
Zoom:2,
AnimationSpeed:1000
});
/*]]>*/
</script>
</body>

</html>

css-quest
11-16-2010, 01:55 PM
Thanks for all the scripts. However, I've noticed one issue, basically I want the other two surrounding images (that aren't active (or onmouseover)) to shrink so that they can still wholly be seen.

At the moment, the active image overlaps the none-active images, instead of shrinking them, or moving them out of the way - is there a script for this or something that can be changed to make this happen in the above script? :)

Also: I've used relative positioning on my images to have them aligned alongside one another. However, the parses obviously reads the image as a bounding box and not the actual proportions of the image, is there a way to modify the script so that it will only read the proportions of the image and not see it as a box?

The last and final question I have is, I have noticed when I move my mouse off all of the images, they don't shrink back to their default size, I'm assuming it's just a matter of adding an onmouseout somewhere?

Thank you.

vwphillips
11-17-2010, 11:08 PM
from PM

Hello,

Thanks for providing me with your really useful script for image rollovers. Are you able to modify it to match my requirements or do you know of any other scripts that will do this for me?


see

http://www.vicsjavascripts.org.uk/ImageExpandMenu/ImageExpandMenu.htm

or visit my site ans search 'expand'

css-quest
11-18-2010, 05:20 PM
Hi, I have just tried using your script but the images don't appear in the DIV element. What am I doing wrong?

Here's my code:

<html>
<head>
<script type="text/javascript">
// Image Expand Menu (01-June-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To expand / magnify images nested in a <DIV>.
// The size of the images are increase or decrease in proportion to the mouse position over the <DIV>
// With both 'Vertical' and 'Horizontal' applications.
// Moving the mouse over the menu causes adjacent menu items to expand
// with options to adjust the left and top positions and opacity.
// There may be as many applications on a page as required.

// **** Functional Code(3.65K) - NO NEED to Change

function zxcImageExpandMenu(o){
var tl=o.TopLeft||[0,0];
var op=o.Opacity||[100,100];
this.obj=document.getElementById(o.ID);
this.pobj=this.obj.parentNode;
this.data=o.Mode.charAt(0).toUpperCase()=='V'?['top','left','height','width',1]:['left','top','width','height',0];
this.data=this.data.concat([o.MouseDistance||100,((o.Expansion||200)/100)-1,tl[0],tl[1]-tl[0],op[0],op[1]-op[0]]);
var clds=this.obj.getElementsByTagName('IMG');
this.ary=[];
for (var z0=0;z0<clds.length;z0++){
this.ary.push([clds[z0],this.data[0]=='left'?clds[z0].offsetWidth:clds[z0].offsetHeight,this.data[0]=='left'?clds[z0].offsetHeight:clds[z0].offsetWidth]);
}
this.spc=o.Separation||0;
this.Reset();
this.obj.style.visibility='visible';
this.addevt(this.pobj,'mousemove','Expand');
this.addevt(this.pobj,'mouseout','MseOut');
return this;
}

zxcImageExpandMenu.prototype={
Expand:function(e){
var mse=this.mse(e)[this.data[4]]-this.pos(this.obj)[this.data[4]];
for (var obj,c,p,exp,lft=0,z0=0;z0<this.ary.length;z0++){
obj=this.ary[z0][0];
c=Math.abs((this.sv(obj,this.data[0])+this.sv(obj,this.data[2])/2)-mse);
if (c<this.data[5]){
p=(this.data[5]-c)/this.data[5],exp=p*this.data[6];
obj.style[this.data[1]]=this.data[7]+this.data[8]*p+'px';
obj.style[this.data[2]]=this.ary[z0][1]*(1+exp)+'px';
obj.style[this.data[3]]=this.ary[z0][2]*(1+exp)+'px';
this.opac(obj,this.data[9]+this.data[10]*p);
}
else {
obj.style[this.data[1]]=this.data[7]+'px';
obj.style[this.data[2]]=this.ary[z0][1]+'px';
obj.style[this.data[3]]=this.ary[z0][2]+'px';
this.opac(obj,this.data[9]);
}
obj.style[this.data[0]]=lft+'px';
lft+=this.sv(obj,this.data[2])+this.spc;
}
this.obj.style[this.data[2]]=lft-this.spc+'px';
this.obj.style[this.data[0]]=(this.sv(this.pobj,this.data[2])-lft+this.spc)/2+'px';
},

Reset:function(){
for (var lft=0,z0=0;z0<this.ary.length;z0++){
var obj=this.ary[z0][0];
obj.style.position='absolute';
obj.style[this.data[0]]=lft+'px';
obj.style[this.data[1]]=this.data[7]+'px';
obj.style[this.data[2]]=this.ary[z0][1]+'px';
obj.style[this.data[3]]=this.ary[z0][2]+'px';
this.opac(obj,this.data[9]);
lft+=this.ary[z0][1]+this.spc;
}
this.obj.style[this.data[2]]=lft-this.spc+'px';
this.obj.style[this.data[0]]=(this.sv(this.pobj,this.data[2])-lft+this.spc)/2+'px';
},

MseOut:function(e){
var obj=e.relatedTarget||e.toElement;
if (obj){
while (obj.parentNode){
if (obj==this.pobj){
return false;
}
obj=obj.parentNode;
}
}
this.Reset();
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},

mse:function(e){
if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
return [e.pageX,e.pageY];
},

docs:function(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

sv:function(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
},

opac:function(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

}
</script>

<script type="text/javascript">

// Script instances must be generated after the page has been loaded

var E=new zxcImageExpandMenu({
ID:'H2', // the parent DIV unique id name. (string)
Mode:'H', // (optional) Horizontal('H') or Vertical('V') application. (string, 'H' or 'V', default = H)
MouseDistance:100, // (optional) the element distance from the mouse where expansion will be applied. (digits, default = 100)
Expansion:150, // (optional) the maximum expansion of the element as a percentage. (digits, default = 100)
Separation:0, // (optional) the separation between images. (digits, default = 0)
TopLeft:[20,0], // (optional) an array specifying the top(Horizontal) of left(Vertical) positions (array, default = [0,0])
// field 0 = the default position in px. (digits)
// field 1 = the expanded position in px. (digits)
Opacity:[80,100] // (optional) an array specifying the opacity. (array, default = [100,100])
// field 0 = the default opacity. (digits)
// field 1 = the expanded opacity. (digits)
});

E=new zxcImageExpandMenu({
ID:'H3',
Mode:'H',
MouseDistance:100,
Expansion:150,
TopLeft:[0,16],
Opacity:[0,100]
});

E=new zxcImageExpandMenu({
ID:'V2',
Mode:'H',
MouseDistance:100,
Separation:10,
Expansion:150,
TopLeft:[20,0],
Opacity:[50,100]
});


</script>


<style type="text/css">

.Hp {
position:relative;left:250px;top:130px;width:601px;height:140px;background-Color:#FFCC66;border:solid #FF6633 1px;

}

#H2 {
position:absolute;overflow:visible;visibility:hidden;left:50px;top:0px;border:solid #FF6633 0px;;
}

#H2 IMG {
border-Width:0px;
}

#H3 {
position:absolute;overflow:visible;visibility:hidden;left:50px;top:95px;width:600px;height:120px;bor der:solid #FF6633 0px;
}
</style>

</head>
<body>

<div class="Hp" >
<div id="H2" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
<a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt1.jpg" alt="Egypt" width="100" height="75" /></a>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt2.jpg" alt="Egypt" width="100" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt3.jpg" alt="Egypt" width="100" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt4.jpg" alt="Egypt" width="100" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" width="100" height="75" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
</div>
<div id="H3" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="15" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Number" width="90" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="Number" width="90" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="Number" width="90" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="Number" width="90" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="Number" width="90" height="20" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="15" height="20" />
</div>
</div>

</div>

</body>
</html>

radhiyoussef
11-28-2010, 01:44 PM
hello, i'm very,very new here... i stumbled upon this thread and wanted to ask a specific script related to this topic... i just want to ask for a script that when i hover the mouse away, the image will return to its default size... the client will hover the mouse on an image, the image will enlarge and then when the client hovered the mouse away, the image will return to its default size...

any help will be surely appreciated...

:confused:

coothead
11-28-2010, 01:52 PM
Hi there radhiyoussef,

and a warm welcome to these forums. ;)

Why don't you try the examples that have been already posted?

coothead

radhiyoussef
11-28-2010, 02:10 PM
thank you very much for this thread... the problem was with the free hosting site that i am using since they do not allow uploading of html and js files for free users... and after i inputted most of the scripts here, i need to publish first before i can see the output... anyway, this thread have been very helpful for my site :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum