how to center an image using javascript - HTML Forums

webgal20 · 09-15-2005, 04:37 PM

Hey everyone....I have a question. I was wondering if anyone knew how to center an image using javascript code. Below is what i have for the code. These functions are coded to click on thumbnails to see the enlargement picture of how i have it set up on my page. I would like to center 'Tabernacleverticalslide.jpg' & 'Tabernaclebigg.jpg' please feel free to reply if anyone know how to do this. Thanks

webgal20

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

coothead · 09-15-2005, 05:16 PM

Hi there webgal20,

have a look at this example

Here is the code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>thumbnail image to div background-image</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<base href="http://coothead.homestead.com/files/"/>

<style type="text/css">
/*<![CDATA[*/
html,body {
     margin:0px;
     padding:0px;
     height:100%;
     background-image:url('bodyBg.jpg');
 }
#links {
     position:absolute;
     top:20px;
     left:20px;
     width:70px;
     padding-top:4px;
     border:solid 1px #000;
     background-color:#333354;
}
 #links img {
     display:block;
     width:60px;
     height:60px;
     border:solid 1px #000;
     margin:0px 4px 4px 4px;
}
#display {
     position:absolute;
     border-top:solid 6px #333354;
     border-right:solid 6px #cecee0;
     border-bottom:solid 6px #cecee0;
     border-left:solid 6px #333354;
     display:none;  
 }
#close {
     width:75px;
     background-color:#333354;
     font-family:verdana,sans-serif;
     color:#fff;
     font-size:10px;
     text-align:center;
     margin:5px auto;
     padding:3px;
     cursor:pointer;

}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
 
   var preloads=[];
function preload(){
      for(var i = 0; i < arguments.length; i ++) {
           preloads[preloads.length] = new Image();
           preloads[preloads.length - 1].src = arguments[i];

  }
}
function showImage(w,h,i) {
  var image=preloads[i].src;
  var db=document.body;
  var obj=document.getElementById("display").style;
        obj.width=w+"px";
        obj.height=h+"px"
        obj.top=(db.offsetHeight-h)/2+"px";
        obj.left=(db.offsetWidth-w)/2+"px";
        obj.backgroundImage="url("+image+")";
        obj.display="block";

document.getElementById("close").onclick=function(){
        obj.display="none";
  }
 }
preload('dog.jpg','banana.jpg','aaa.jpg','ten_quid.JPG','apple.jpg','girl.jpg','clouds.jpg','grap.JPG');
//]]>
</script>

</head>
<body>

<div id="display">
<p id="close">
click to close
</p>
</div>

<div id="links">
<a href="dog.jpg" onclick="showImage(400,432,0);return false"><img src="dog.jpg"  alt=""/></a>
<a href="banana.jpg" onclick="showImage(360,280,1);return false"><img src="banana.jpg"  alt=""/></a>
<a href="aaa.jpg" onclick="showImage(200,200,2);return false"><img src="aaa.jpg"   alt=""/></a>
<a href="ten_quid.JPG" onclick="showImage(445,238,3);return false"><img src="ten_quid.JPG"  alt=""/></a>
<a href="apple.jpg" onclick="showImage(360,280,4);return false"><img src="apple.jpg"  alt=""/></a>
<a href="girl.jpg" onclick="showImage(347,201,5);return false"><img src="girl.jpg"  alt=""/></a>
<a href="clouds.jpg" onclick="showImage(640,400,6);return false"><img src="clouds.jpg"  alt=""/></a>
<a href="grap.JPG" onclick="showImage(740,514,7);return false"><img src="grap.JPG"  alt=""/></a>
</div>

</body>
</html>

kewa · 09-29-2005, 07:17 AM

Hi Coothead

I am really new to this. I was intending to try and link thumbnails to open in new pop up windows but saw your example above and thought that was even better.

If I try to use your code as it is I get all your thumbnails as large images and if I click on them they open in a new window.

As I said I'm really new to this so must be doing something stupid so please accept my apologies in advance.

Would it have anything to do with me using MS Word as my HTML editor?

I'd really appreciate some help.

Thanks

Kewa

birdbrain · 09-29-2005, 07:56 AM

Hi kewa,

and welcome to htmlforums.

Quote:

Would it have anything to do with me using MS Word as my HTML editor?

I would suggest that you use 'Notepad' instead.

Quote:

If I try to use your code as it is I get all your thumbnails as large images
and if I click on them they open in a new window.

If you supply a link to your site and/or the code that is giving you problems,
then the members here will be better able to help you, I am certain.