Menu
Community /Pin to ProfileBookmark
@cootheadJun 14.2004 — #Hi there wakkoguy,
If you use a pop-up window to display images,
you will have the problem of white space
to the top and the left of the image :mad:
This can be resolved by putting the image
in an .html file and then setting the
margin and the padding tp 0.
However pop-up blockers may still upset you plans :mad:
So try this code which makes an immitation pop-up ? ....
[i]coothead[/i]
popup picture
I am trying to make a popup window to display a picture. But when I do the picture is off center, i am pointing it to a .jpg file instead of an html file, i want to be able to do that so i don’t have to make a webpage just to display a picture. How can i do it so the picture is center (i am setting the popup window size to the exact size of the picture and it still seems to have white space around it) If i have to have white space around the picture how can i make it black?
thanx
Sign in
to post a comment4 Comments(s) ↴
0
@cootheadJun 14.2004 — #Hi there wakkoguy,If you use a pop-up window to display images,
you will have the problem of white space
to the top and the left of the image :mad:
This can be resolved by putting the image
in an .html file and then setting the
margin and the padding tp 0.
However pop-up blockers may still upset you plans :mad:
So try this code which makes an immitation pop-up ? ....
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Immitation pop-up</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div#container {
position:absolute;
top:10px;
left:200px;
display:none;
<i> </i> border:solid 1px #000000;
}
div.thumbs {
margin:5px 0 0 0;
width:100px;
border:solid 1px #000000;
background:#ffffff;
}
table#popup {
border-collapse:collapse;
}
td#bar {
background:#4a6ba1;
border:4px solid #bbbbbb;
font-family:arial;
font-size:13px;
font-weight:bold;
text-align:right;
}
td#large {
border:4px solid #bbbbbb;
}
a {
background:#bbbbbb;
color:#000000;
text-decoration:none;
}
img.small {
width:100px;
height:100px;
}
span#title {
color:#ffffff;
float:left;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function popUp(n){
var images=new Array('http://hstrial-dbayly.homestead.com/files/ten_quid.jpg','http://hstrial-dbayly.homestead.com/files/dog.jpg');
var titled=new Array('ten pounds','odd dog');
var width=new Array('445','400');
var height=new Array('238','432');
<i> </i> document.getElementById('container').style.display="block";
<i> </i> document.getElementById('large').style.width=width[n]+'px';
<i> </i> document.getElementById('large').style.height=height[n]+'px';
<i> </i> document.getElementById('large').style.background='url('+images[n]+')';
<i> </i> document.getElementById('title').innerHTML=titled[n];
}
function popOff() {
document.getElementById('container').style.display="none";
}
//]]>
</script>
</head>
<body>
<div class="thumbs"><img class="small" alt="" src="http://hstrial-dbayly.homestead.com/files/ten_quid.jpg" onclick="popUp(0);return false"/></div>
<div class="thumbs"><img class="small" alt="" src="http://hstrial-dbayly.homestead.com/files/dog.jpg" onclick="popUp(1);return false"/></div>
<div id="container">
<table id="popup"><tr>
<td id="bar"><span id="title"></span><a href="#"onclick="popOff();return false">&#160;X&#160;</a></td>
</tr><tr>
<td id="large">&#160;</td>
</tr></table>
</div>
</body>
</html>[/color]
[i]coothead[/i]