orizion
04-13-2004, 06:35 PM
hey
i am looking for some help on my little galleries that i am puting into my webpage.
http://orizion.indy-solutions.com/images/akiro1.jpg
this is what this gallery page looks like now.
i want all of the original sized images to sit in the right hand box.
when you click on one of the thumbnails in the box on the
left, then the corresponding image slides into the middle
of the box on the right, with only the edges of the images
to the sides of it showing.
can i somehow do this with javascript and layers?
or should i use flash?
can this be done in dreamweaver? if so how?
there are 2 examples below of what i am looking for.
http://orizion.indy-solutions.com/images/akiro2.jpg
http://orizion.indy-solutions.com/images/akiro3.jpg
and here is a link to the original page.
click here (http://orizion.indy-solutions.com/orizion/menu.html#)
the code for this page
<html>
<head>
<title>akiro</title>
<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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];}
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body onLoad="MM_preloadImages('/orizion/images/back_on.gif','/orizion/images/forward_on.gif','/artists/akiro/boarder_thumb_off.jpg',
'/artists/akiro/wmd_thumb_off.jpg','/artists/akiro/mc_thumb_off.jpg',
'/artists/akiro/train_thumb_off.jpg','/artists/akiro/tagger_thumb_off.jpg',
'/artists/akiro/chemist_thumb_off.jpg','/artists/akiro/boarder_thumb_on.jpg',
'/artists/akiro/train_thumb_on.jpg','/artists/akiro/wmd_thumb_on.jpg',
'/artists/akiro/chemist_thumb_on.jpg','/artists/akiro/tagger_thumb_on.jpg',
'/artists/akiro/mc_thumb_on.jpg','/orizion/images/st_on.gif')"
background="/orizion/images/bg_front.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="575" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" height="211"></td>
<td width="23" valign="top"> </td>
<td width="525" rowspan="4" valign="top">
<script language="JavaScript1.2">
//Manual Scroller- © Dynamic Drive 2001
//For full source code, visit http://www.dynamicdrive.com
//specify speed of scroll (greater=faster)
var speed=3
iens6=document.all||document.getElementById
ns4=document.layers
if (iens6){
document.write('<div id="container" style="position:relative;width:120px;height:220px;overflow:hidden;left:0px;top:80px;border=2px solid #636363">')
document.write('<div id="content" style="position:absolute;width:120px;left:3px;top:0px">')
}
</script>
<ilayer name="nscontainer" width=118 height=220 clip="0,0,116,160" visibility="show">
<layer name="nscontent" width=118 height=220 visibility=show top="3" left="136">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/artists/akiro/boarder_thumb_on.jpg',1)"><img name="Image3" border="0" src="/artists/akiro/boarder_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','/artists/akiro/train_thumb_on.jpg',1)"><img name="Image4" border="0" src="/artists/akiro/train_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','/artists/akiro/wmd_thumb_on.jpg',1)"><img name="Image5" border="0" src="/artists/akiro/wmd_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','/artists/akiro/chemist_thumb_on.jpg',1)"><img name="Image6" border="0" src="/artists/akiro/chemist_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','/artists/akiro/tagger_thumb_on.jpg',1)"><img name="Image7" border="0" src="/artists/akiro/tagger_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','/artists/akiro/mc_thumb_on.jpg',1)"><img name="Image8" border="0" src="/artists/akiro/mc_thumb_off.jpg" width="110" height="50"></a>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+217))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}
function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</td>
</tr>
<tr>
<td height="41"></td>
<td valign="top"><a href="javascript:moveup()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','/orizion/images/back_on.gif',1)"><img name="Image9" border="0" src="/orizion/images/back_off.gif" width="20" height="38"></a></td>
</tr>
<tr>
<td height="10"></td>
<td valign="top"><a href="javascript:stopscroll()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','/orizion/images/st_on.gif',1)"><img name="Image10" border="0" src="/orizion/images/stop_off.gif" width="20" height="7"></a></td>
</tr>
<tr>
<td height="58"></td>
<td valign="top"><a href="javascript:movedown()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','/orizion/images/forward_on.gif',1)"><img name="Image13" border="0" src="/orizion/images/forward_off.gif" width="20" height="58"></a></td>
</tr>
<tr>
<td height="19"></td>
<td></td>
<td></td>
</tr>
</table>
<div id="Layer1" style="position:absolute; width:330px; height:220px; z-index:1; left: 220px; top: 80px; overflow: hidden; border=2px solid #636363">
</div>
</body>
</html>
thank you very much in advance.
peace
orizion
i am looking for some help on my little galleries that i am puting into my webpage.
http://orizion.indy-solutions.com/images/akiro1.jpg
this is what this gallery page looks like now.
i want all of the original sized images to sit in the right hand box.
when you click on one of the thumbnails in the box on the
left, then the corresponding image slides into the middle
of the box on the right, with only the edges of the images
to the sides of it showing.
can i somehow do this with javascript and layers?
or should i use flash?
can this be done in dreamweaver? if so how?
there are 2 examples below of what i am looking for.
http://orizion.indy-solutions.com/images/akiro2.jpg
http://orizion.indy-solutions.com/images/akiro3.jpg
and here is a link to the original page.
click here (http://orizion.indy-solutions.com/orizion/menu.html#)
the code for this page
<html>
<head>
<title>akiro</title>
<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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];}
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body onLoad="MM_preloadImages('/orizion/images/back_on.gif','/orizion/images/forward_on.gif','/artists/akiro/boarder_thumb_off.jpg',
'/artists/akiro/wmd_thumb_off.jpg','/artists/akiro/mc_thumb_off.jpg',
'/artists/akiro/train_thumb_off.jpg','/artists/akiro/tagger_thumb_off.jpg',
'/artists/akiro/chemist_thumb_off.jpg','/artists/akiro/boarder_thumb_on.jpg',
'/artists/akiro/train_thumb_on.jpg','/artists/akiro/wmd_thumb_on.jpg',
'/artists/akiro/chemist_thumb_on.jpg','/artists/akiro/tagger_thumb_on.jpg',
'/artists/akiro/mc_thumb_on.jpg','/orizion/images/st_on.gif')"
background="/orizion/images/bg_front.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="575" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" height="211"></td>
<td width="23" valign="top"> </td>
<td width="525" rowspan="4" valign="top">
<script language="JavaScript1.2">
//Manual Scroller- © Dynamic Drive 2001
//For full source code, visit http://www.dynamicdrive.com
//specify speed of scroll (greater=faster)
var speed=3
iens6=document.all||document.getElementById
ns4=document.layers
if (iens6){
document.write('<div id="container" style="position:relative;width:120px;height:220px;overflow:hidden;left:0px;top:80px;border=2px solid #636363">')
document.write('<div id="content" style="position:absolute;width:120px;left:3px;top:0px">')
}
</script>
<ilayer name="nscontainer" width=118 height=220 clip="0,0,116,160" visibility="show">
<layer name="nscontent" width=118 height=220 visibility=show top="3" left="136">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/artists/akiro/boarder_thumb_on.jpg',1)"><img name="Image3" border="0" src="/artists/akiro/boarder_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','/artists/akiro/train_thumb_on.jpg',1)"><img name="Image4" border="0" src="/artists/akiro/train_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','/artists/akiro/wmd_thumb_on.jpg',1)"><img name="Image5" border="0" src="/artists/akiro/wmd_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','/artists/akiro/chemist_thumb_on.jpg',1)"><img name="Image6" border="0" src="/artists/akiro/chemist_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','/artists/akiro/tagger_thumb_on.jpg',1)"><img name="Image7" border="0" src="/artists/akiro/tagger_thumb_off.jpg" width="110" height="50"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','/artists/akiro/mc_thumb_on.jpg',1)"><img name="Image8" border="0" src="/artists/akiro/mc_thumb_off.jpg" width="110" height="50"></a>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+217))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}
function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</td>
</tr>
<tr>
<td height="41"></td>
<td valign="top"><a href="javascript:moveup()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','/orizion/images/back_on.gif',1)"><img name="Image9" border="0" src="/orizion/images/back_off.gif" width="20" height="38"></a></td>
</tr>
<tr>
<td height="10"></td>
<td valign="top"><a href="javascript:stopscroll()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','/orizion/images/st_on.gif',1)"><img name="Image10" border="0" src="/orizion/images/stop_off.gif" width="20" height="7"></a></td>
</tr>
<tr>
<td height="58"></td>
<td valign="top"><a href="javascript:movedown()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','/orizion/images/forward_on.gif',1)"><img name="Image13" border="0" src="/orizion/images/forward_off.gif" width="20" height="58"></a></td>
</tr>
<tr>
<td height="19"></td>
<td></td>
<td></td>
</tr>
</table>
<div id="Layer1" style="position:absolute; width:330px; height:220px; z-index:1; left: 220px; top: 80px; overflow: hidden; border=2px solid #636363">
</div>
</body>
</html>
thank you very much in advance.
peace
orizion