• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1298
  • Last Modified:

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.
0
Sapphireblue
Asked:
Sapphireblue
  • 4
  • 3
  • 2
1 Solution
 
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
 
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
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

 
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
 
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

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now