[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Overlay/watermark on top of variable-size image?

Posted on 2007-04-03
9
Medium Priority
?
1,292 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month18 days, 1 hour left to enroll

831 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