Solved

Overlay/watermark on top of variable-size image?

Posted on 2007-04-03
9
1,262 Views
Last Modified: 2012-05-05
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
Comment
Question by:Sapphireblue
  • 4
  • 3
  • 2
9 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18847543
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
 
LVL 1

Author Comment

by:Sapphireblue
ID: 18848138
How would I use that to layer another image on top of the thumbView image? Thanks.
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18848159
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
 
LVL 1

Author Comment

by:Sapphireblue
ID: 18848426
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 30

Expert Comment

by:VirusMinus
ID: 18848570
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
 
LVL 1

Author Comment

by:Sapphireblue
ID: 18850804
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
 
LVL 1

Expert Comment

by:kalleanka
ID: 19025819
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
 
LVL 1

Author Comment

by:Sapphireblue
ID: 19163024
Thanks, kalleanka, but I need to stick to JSP for this app.
0
 
LVL 1

Accepted Solution

by:
kalleanka earned 500 total points
ID: 19168861
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Element alignment and word wrapping 9 61
CSS Scroll Issue 3 87
Materializecss - Different Behaviors in Browser's 1 19
compact pure CSS Read More Toggle 4 21
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now