|
|
Add the following points to web
page
Notes
|
 |
|
1. |
at HTML
Source of web page add this Javascript text
<SCRIPT type=text/javascript>
//slide_move Horizontal
function carousel(params){
if(!(params.width>0&&isFinite(params.width)))params.width=100;
if(!(params.height>0&&isFinite(params.height)))params.height=100;
if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
if(!(params.steps>0&¶ms.steps<100&&isFinite(params.steps)))params.steps=20;
if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
document.write("<div
style='position:relative;overflow:hidden;'
id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var
cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;
var
counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var
img_index=params.images.length+1,img_index_cap=2*params.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction,
targ, attr, faraway;
function init(){
if(params.direction=="left" ||
params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" ||
params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]=faraway;
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'px solid
'+params.image_border_color;
for(var i=0;i<params.images.length;i++){
images[i]=img.cloneNode(true);
images[i].src=params.images[i];
if(params.links&¶ms.links[i]&¶ms.links[i]!=''){
targ=params.lnk_targets&¶ms.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr&¶ms.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new
Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new
Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr&¶ms.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var
t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}
if(params.titles&¶ms.titles[i]&¶ms.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
images[i+params.images.length]=images[i];
if(params.images.length==faces)
images[i+2*params.images.length]=images[i];
cdiv.appendChild(images[i]);
}
var
face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
var
face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension[i]=face_size*Math.sin(pi_piece*i);
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
}
}
init();
cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]=faraway;
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
}
</SCRIPT> |
2. |
- at Normal Source of web page,
right click the
specific cell, on the shortcut menu
click Cell Proprieties, the Cell Proprieties
dialog box appears, select the Horizontal
alignement combo box to value
Center, and then click ok
- at Normal Source, into/to
this cell add Table size 1 column and 1
row, from Table menu, select Insert
and then select Table ... , the Insert Table
dialog box appears, (size coordinates: 1 row and 1
Column) and then click ok. New Table display
into previous cell
- at Normal Source,
right click
the Table, on the shortcut menu click
Table Proprieties, the Table Proprieties
dialog box appears, select Alignments combo
box to value Center, uncheck
Specify Width, Border Size = 0 and then click
ok
- at Normal Source, Select this
Table created
- at HTML source, appears the
place selected at Normal Source and the following
HTML Text corresponding
<td
width="100%"> </td>
- at HTML source, replace the
previous HTML test (<td
width="100%"> </td> by the HTML
test (color of old text - red, color of new text - black
)
<td width="100%"> <p align="center">
<IMG
height=1 alt="" src="Pictures ... " width=0
border=0></TD> <DIV
class=centerdiv> <SCRIPT
type=text/javascript> //slide_move
Horizontal
carousel({id:'Pictures
...', border:'', size_mode:'image', width:154, height:100, sides:6, steps:40, speed:1, direction:'left', images:['pictures_move_horizontal_files/1075_100a.jpg', 'pictures_move_horizontal_files/2238_100a.jpg', 'pictures_move_horizontal_files/374_100a.jpg', 'pictures_move_horizontal_files/1897_100.jpg', 'pictures_move_horizontal_files/87_100a.jpg'
],
lnk_base:'pictures ...', //Link
target for all
...) titles:['','','','','','','','','','','','','',''],
image_border_width:1, image_border_color:'black' }); </SCRIPT>
</td> | |
3. |
info: width='154'
height='100' direction: left list of
pictures
:
'pictures_move_horizontal_files/1075_100a.jpg',
'pictures_move_horizontal_files/2238_100a.jpg',
'pictures_move_horizontal_files/374_100a.jpg',
'pictures_move_horizontal_files/1897_100.jpg',
'pictures_move_horizontal_files/87_100a.jpg'
modify these values at the javascript
text | | |