SLC
05-15-2006, 10:51 AM
This link shows the image behaviour i am trying to create. But have no idea what to do... please help. :confused:
Go to http://www.pinsapoestates.com/area.php
Go to http://www.pinsapoestates.com/area.php
Click to See Complete Forum and Search --> : Rollover behaviour problems ** PLEASE HELP
TiGGi
05-15-2006, 11:07 AM
looks good to me!
SLC
05-15-2006, 02:43 PM
a bit of confusion.. the link i put in my last thread is a website that belongs to someone else not actually my site..
i want to create the same rollover image thing on my site so needs really precise instructions to do it..
i want to create the same rollover image thing on my site so needs really precise instructions to do it..
TiGGi
05-15-2006, 03:42 PM
oh I get it, don't hold it against me, it's Monday...
Do you have dreamwaver?
Do you have dreamwaver?
TiGGi
05-15-2006, 04:08 PM
here is the script that you'll need, it has to go between head tags <head>paste here</head><script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Then you have to modify you <body> tag. This will download the images on page load so user doesn't have to wait for it to download when he mouseovers.
<body onload="MM_preloadImages('images/2B.gif','images/3B.gif','images/4B.gif','images/5B.gif')">
Now your html part comes:
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><img src="images/1.gif" name="main" width="276" height="246" id="main" /></td>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;"><img src="images/2A.gif" name="a2" width="106" height="120" border="0" id="a2" onmouseover="MM_swapImage('main','','images/2B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><a href="javascript:;"><img src="images/3A.gif" name="a3" width="120" height="120" border="0" id="a3" onmouseover="MM_swapImage('main','','images/3B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr>
<td><a href="javascript:;"><img src="images/4A.gif" name="a4" width="106" height="126" border="0" id="a4" onmouseover="MM_swapImage('main','','images/4B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><a href="javascript:;"><img src="images/5A.gif" name="a5" width="120" height="126" border="0" id="a5" onmouseover="MM_swapImage('main','','images/5B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table></td>
</tr>
</table>
Default big images is called 1.gif, then you have your small images on the site 2A, 3A, 4A, 5A and you big images 2B, 3B, 4B, 5B. You notice that 1.gif has name="main", this allows it to be referenced by smaller images.
Basicly what it does is when you mouse over a smaller image it tells to replace image called "main" with another image and when mouse leaves it restores the default image.
<img src="images/5A.gif" name="a5" width="120" height="126" border="0" id="a5" onmouseover="MM_swapImage('main','','images/5B.gif',1)" onmouseout="MM_swapImgRestore()" />
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Then you have to modify you <body> tag. This will download the images on page load so user doesn't have to wait for it to download when he mouseovers.
<body onload="MM_preloadImages('images/2B.gif','images/3B.gif','images/4B.gif','images/5B.gif')">
Now your html part comes:
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><img src="images/1.gif" name="main" width="276" height="246" id="main" /></td>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;"><img src="images/2A.gif" name="a2" width="106" height="120" border="0" id="a2" onmouseover="MM_swapImage('main','','images/2B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><a href="javascript:;"><img src="images/3A.gif" name="a3" width="120" height="120" border="0" id="a3" onmouseover="MM_swapImage('main','','images/3B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr>
<td><a href="javascript:;"><img src="images/4A.gif" name="a4" width="106" height="126" border="0" id="a4" onmouseover="MM_swapImage('main','','images/4B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td><a href="javascript:;"><img src="images/5A.gif" name="a5" width="120" height="126" border="0" id="a5" onmouseover="MM_swapImage('main','','images/5B.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table></td>
</tr>
</table>
Default big images is called 1.gif, then you have your small images on the site 2A, 3A, 4A, 5A and you big images 2B, 3B, 4B, 5B. You notice that 1.gif has name="main", this allows it to be referenced by smaller images.
Basicly what it does is when you mouse over a smaller image it tells to replace image called "main" with another image and when mouse leaves it restores the default image.
<img src="images/5A.gif" name="a5" width="120" height="126" border="0" id="a5" onmouseover="MM_swapImage('main','','images/5B.gif',1)" onmouseout="MM_swapImgRestore()" />
SLC
05-15-2006, 05:55 PM
thank you soo soo much :-) am a newbie and there is a lot for me to understand and take in.. but soo perfect your detailing :-)
I will have a read over it and let you know how i go.. fingers crossed.
thanks again for all your help, really do appreciate it :D
I will have a read over it and let you know how i go.. fingers crossed.
thanks again for all your help, really do appreciate it :D
SLC
05-15-2006, 06:08 PM
thank you soo soo much :-) am a newbie and there is a lot for me to understand and take in.. but soo perfect your detailing :-)
I will have a read over it and let you know how i go.. fingers crossed.
thanks again for all your help, really do appreciate it :D
I will have a read over it and let you know how i go.. fingers crossed.
thanks again for all your help, really do appreciate it :D
SLC
05-16-2006, 11:52 AM
I get the straight forward rollover but need instructions to do the following..
just say you have 4 small images and 1 large sized image next to them, what i would like to do is once you mouse over each of the 4 small images the 1 large one changes to show the small one on mouse over in a bigger images spot..
so the big one stays the same but changes as soon as you roll your mouse over small images individually
see an example of what im trying to achieve on this other persons website
Go to http://www.pinsapoestates.com/area.php
just say you have 4 small images and 1 large sized image next to them, what i would like to do is once you mouse over each of the 4 small images the 1 large one changes to show the small one on mouse over in a bigger images spot..
so the big one stays the same but changes as soon as you roll your mouse over small images individually
see an example of what im trying to achieve on this other persons website
Go to http://www.pinsapoestates.com/area.php
SLC
05-18-2006, 11:59 AM
THANK YOU TO TIGGI.. for this great explanation.. its has solved my problem :-)
1. you have to create your images and place them into your html page.
2. one thing that you have to remember is to give name to the image that will be changing. So select that image in DW and enter name down in Properties Panel
3. Select 1st image that will have onmouse over function.
In the "Tag Inspector" panel go to Behaviours tag and click on "+". This will expand list of functions and select "SWAP IMAGE". When it opens select image that will change, should be named.
Click on browse and find the image that is big image for the button image!
Hit ok then on the page you select next image and go through the same steps!
create 4 big versions of small images that will replace default big image when mouseover small ones
Big default image you need to name MAIN.
then you have to add swap image behaviour to all small images. When adding swap image select MAIN image from the list then click borwse and find big1 version of the small1 image.
Logic behind this is that you're creating swap image on small1 and selecting MAIN because this is the image you're replacing with big1 image that you browsed for.
you have to add swap image behaviour to each of the small image, but remember that everytime you're selecting MAIN from the list!!!!
1. you have to create your images and place them into your html page.
2. one thing that you have to remember is to give name to the image that will be changing. So select that image in DW and enter name down in Properties Panel
3. Select 1st image that will have onmouse over function.
In the "Tag Inspector" panel go to Behaviours tag and click on "+". This will expand list of functions and select "SWAP IMAGE". When it opens select image that will change, should be named.
Click on browse and find the image that is big image for the button image!
Hit ok then on the page you select next image and go through the same steps!
create 4 big versions of small images that will replace default big image when mouseover small ones
Big default image you need to name MAIN.
then you have to add swap image behaviour to all small images. When adding swap image select MAIN image from the list then click borwse and find big1 version of the small1 image.
Logic behind this is that you're creating swap image on small1 and selecting MAIN because this is the image you're replacing with big1 image that you browsed for.
you have to add swap image behaviour to each of the small image, but remember that everytime you're selecting MAIN from the list!!!!
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.