PDA

View Full Version : centering images


missblue
02-25-2003, 11:14 PM
hi,

i'm using a lamellar image effect on my web page (5 images that blend into one another) When I use a mac the images are centered but on pcs they're on the far left hand side of the browsr....

Does anyone know how i can center this....do i make up a css sheet (dont know anything about css) or some code in the body tag?

Any help would be great...

:)

justame
02-25-2003, 11:41 PM
mis...
/me would just a put® them into just a centered® table which has itsss contents just a centered® in the td...:O)))

meow
02-26-2003, 12:03 AM
How do you center them now, the way that works in your Mac browser?

missblue
02-26-2003, 02:53 AM
hi,

got them centered in a table already in the body of the html

got this bit of script in the head

var picture = new Array()
picture[0]="images/sample1.jpg"
picture[1]="images/sample2.jpg"
picture[2]="images/sample3.jpg"
picture[3]="images/sample11.jpg"
picture[4]="images/sample7.jpg"
var pictureurl = new Array()
pictureurl[0]="#"
pictureurl[1]="#"
pictureurl[2]="#"
pictureurl[3]="#"
pictureurl[4]="#"
var target_url="_self"
var horizontal_pos=0
var vertical_pos=150
var x_slices=40
var pause=2
// - End of JavaScript - -->



also have a seperate document called lamellar.js.....

Sorry its very long!!

var imgpreload=new Array()
for (i=0;i<=picture.length;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=picture[i]
}

var picturewidth
var pictureheight
var i_loop=0
var i_picture=0
var width_slice
var cliptop=0
var clipbottom
var i_clipright=1
var content=""
pause=pause*1000

function initiate() {
getcontent()
if (document.all) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
var thiss=eval("document.all.s"+i+".style")
thiss.posLeft=horizontal_pos
thiss.posTop=vertical_pos
}
var thisspan = eval("document.all.s"+0)
picturewidth=thisspan.offsetWidth
pictureheight=thisspan.offsetHeight
width_slice=Math.ceil(picturewidth/x_slices)
clipbottom=pictureheight
document.all.whole.style.posLeft=horizontal_pos
document.all.whole.style.posTop=vertical_pos
i_picture++
openlamellar()
}
if (document.layers) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
var thiss=eval("document.s"+i)
thiss.left=horizontal_pos
thiss.top=vertical_pos
}
var thisspan=eval("document.s"+0+".document")
picturewidth=thisspan.width
pictureheight=thisspan.height
width_slice=Math.ceil(picturewidth/x_slices)
clipbottom=pictureheight
document.whole.document.write(" ")
document.whole.document.close()
document.whole.left=horizontal_pos
document.whole.top=vertical_pos
i_picture++
openlamellarNN()
}
}

function openlamellar() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellar()",20)
}
else {
clearTimeout(timer)
whole.innerHTML=content
var timer=setTimeout("changepicture()",pause)
}
}

function openlamellarNN() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellarNN()",20)
}
else {
clearTimeout(timer)
document.whole.document.write(content)
document.whole.document.close()
var timer=setTimeout("changepictureNN()",2000)
}
}


function getcontent() {
content="<a href="+pictureurl[i_picture]+" target="+target_url+">"
content+="<img src="+picture[i_picture]+" border=0>"
content+="</a>"
}

function changepicture() {
i_clipright=0
clipleft=0
clipright=0
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
}
if (i_picture>picture.length-1) {i_picture=0}
getcontent()

for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
}
i_picture++
openlamellar()
}

function changepictureNN() {
i_clipright=0
clipleft=0
clipright=0
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
if (i_picture>picture.length-1) {i_picture=0}
getcontent()
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
}
i_picture++
openlamellarNN()
}

document.write("<span id='whole' class='s'></span>")
for (i=0;i<=x_slices;i++) {
document.write("<span id='s"+i+"' class='s'></span>")
}
document.close()
window.onload=initiate

This works on mac and is centered ...any ideas??

Thanks



:)