Solved

Overlay/watermark on top of variable-size image?

Posted on 2007-04-03
9
1,261 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
Comment Utility
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
Comment Utility
How would I use that to layer another image on top of the thumbView image? Thanks.
0
 
LVL 30

Expert Comment

by:VirusMinus
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 30

Expert Comment

by:VirusMinus
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks, kalleanka, but I need to stick to JSP for this app.
0
 
LVL 1

Accepted Solution

by:
kalleanka earned 500 total points
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Bullet styles not changing 12 22
Flexbox in CSS3 2 25
Bootstrap 3 and Angular 2 12 20
Login area of a page 4 18
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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 position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

12 Experts available now in Live!

Get 1:1 Help Now