Overlay/watermark on top of variable-size image?

The web is full of answers on how to use CSS to create a graphical overlay on top of another graphic---but you have to know how big your bottom graphic is. I don't know how big my bottom graphic is. Both size and aspect ratio are variable, up to 100px on either dimension. I want to put a graphic of known size (no bigger than 30px by 30px) in a consistent location on top of the bottom graphic... in a corner of the bottom graphic would be nice, smack in the center would be OK.

Here's a tiny bit of my HTML as it exists without the overlay graphic:

<div class="frameDiv">
      <img class="thumbView" src="myscript.cgi?id=foo" />
</div>

And CSS:

.frameDiv {
      width:102px;
      height:78px;
      text-align:center;
}
.thumbView {
      cursor:pointer;
      border:1px solid #000000;
      margin:auto;
      text-align:center;
}

So you can see that inside its consistently sized parent div, the inconsistently sized graphic is horizontally centered, and vertically top-aligned.

I don't have ability on the back end to get image dimensions... this would be so much easier if I could!

Only needs to work in PC IE and Firefox.
LVL 1
SapphireblueAsked:
Who is Participating?
 
kalleankaCommented:
Replace the pictures with your own. This one works.

<html>
<head>
<script>
function init(){
      t_width = document.images[0].width
      t_height = document.images[0].height
      document.write('<table border="0" cellspacing="0" cellpadding="0" width="'+t_width+'" height="'+t_height+'" background="mypicture.jpg"><tr><td align="center"><img src="myoverheadlogo.gif"></td></tr></table>')
}
</script>
</head>
<body onload="init()">

<img src="mypicture.jpg" style="visibility:hidden;">

</body>
</html>
0
 
VirusMinusCommented:
try this;

<div class="frameDiv">
      <img class="thumbView" src="myscript.cgi?id=foo" />
</div>

And CSS:

.frameDiv {
      width:102px;
      height:78px;
      text-align:center;
      position:relative;
}
.thumbView {
      cursor:pointer;
      border:1px solid #000000;
      position:absolute;
      right:0;
      top:0;
}
0
 
SapphireblueAuthor Commented:
How would I use that to layer another image on top of the thumbView image? Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
VirusMinusCommented:
you can do it using z-index

HTML:

<div class="frameDiv">
      <img class="thumbView" src="myscript.cgi?id=foo" />
      <div class="another-image"><img src="myimage.gif" /></div>
</div>


OR

<div class="frameDiv">
      <img class="thumbView" src="myscript.cgi?id=foo" />
      <img class="another-image" src="myimage.gif" />
</div>


CSS:

.frameDiv {
      width:102px;
      height:78px;
      text-align:center;
      position:relative;
}
.thumbView {
      cursor:pointer;
      border:1px solid #000000;
      position:absolute;
      right:0;
      top:0;
      z-index:10;
}
.another-image {
      position:absolute;
      right:5; /*adjust as required*/
      top:5; /*adjust as required*/
      z-index:20;
}
0
 
SapphireblueAuthor Commented:
No dice, with either HTML option. The absolute positioning in the thumbView class causes the thumbView image to move all the way to the right of the frameDiv. I need it to stay centered.

I uploaded some code if it helps visualize/work through the question...

http://sapphireblue.com/overlay/test1.htm -- this is my original code, no overlay image, with frameDiv given a yellow background to see it better

http://sapphireblue.com/overlay/test2.htm -- VirusMinus' second suggestion

http://sapphireblue.com/overlay/test3.htm -- VirusMinus' first suggestion

Thanks again.
0
 
VirusMinusCommented:
you said corner, so i positioned it in the corner. you can alter the top, left in percentages to keep in relatively centered.

eg.

.thumbView {
      cursor:pointer;
      border:1px solid #000000;
      position:absolute;
      top:0;
      left:25%; /*adjust as required*/
      z-index:10;
}


and if the black image and the thumbview are postioned together then you can group them together in a div which is positioned absolutely in the center of the frameDiv and then position both images again using absolute positioning;
0
 
SapphireblueAuthor Commented:
Maybe I didn't explain well enough. I am happy with my original positioning of the thumbView image, horizontally centered in the frameDiv. What I want is for an overlay image to sit on top of the thumbView, one corner of the thumbView. In addition, the thumbView is of variable size, so absolute positioning at left:25% doesn't work to center it. Thanks for your help.
0
 
kalleankaCommented:
With php you can get the image size:

<?php
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";
?>

Example from http://us.php.net/manual/en/function.getimagesize.php
0
 
SapphireblueAuthor Commented:
Thanks, kalleanka, but I need to stick to JSP for this app.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.