[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1119
  • Last Modified:

Putting a PNG over a JPEG

I am attempting to put a PNG graphic over various JPGs across my site.  I cannot find a straight answer to help me with this problem.

I have one PNG file that will be placed over various JPGs across the site; it is the same size as the JPG.  I thought I could just somehow set a DIV background image as the PNG and somehow bring it over top of the JPG (see below code)

From the style.css file...
.playButtonLG
{ 
	width:275px;
	height:200px;
	background-image:url(../images/play275x200.png);
}

.rightimg  {
	float: right;
	background: #F5F5F5;
	border: 1px solid #DDDDDD;
	padding: 7px;
	margin: 0 0 20px 30px;
}

Open in new window


*the rightimg is just the class for the image I am using, may/may not be important to this question.

From the HTML/PHP file...
<div class="playButtonLG">
    <img alt="Airdate - July 14, 2011 - KMGH" src="images/captures/photojourn20110714_KMGHa.jpg" width="275" height="200" class="rightimg">
</div>

Open in new window


Basically, I want to put the play275x200.png on top of the photojourn20110714_KMGHa.jpg file.  Is there a way, either in the direction that I am going or some other method.
0
laubacht
Asked:
laubacht
  • 4
  • 2
  • 2
2 Solutions
 
rgranlundCommented:
By placing the PNG as a background image, it is beneath the JPG.  You should simply replace the JPG with the PNG Image.
0
 
laubachtAuthor Commented:
That thought has crossed my mind, however that would require me to create new DIVs for every single JPG I plan to do this with.  The PNG file is the same, the JPGs will be different.
0
 
rgranlundCommented:
If you are just replacing the image, you don't need to change the div.  Just replace the old image file name with the new image file name within the div.

Is there a "state" that you are dealing with?  Is there a reason why you can't get rid of the JPGs from the code?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
COBOLdinosaurCommented:
put the png in a div and giv the div a class like this:

.pngdiv {
               position:absolute;
               top:???;  /* set this value to the position of the jpg */
               left:???;
               z-index:10;  /* this will put the png on top */
               }

The div will be like:
<div class="pngdiv"><img src="../images/play275x200.png" /></div>

Cd&
0
 
laubachtAuthor Commented:
http://www.tornadoeskick.com/tonylaubach/photojourn.php

Here is the page; as you can see, there are a total of 14 different JPEGs which would require the PNG overlay.  So in that sense, I want the one PNG to go over the 14 different JPEGs.
0
 
COBOLdinosaurCommented:
You are going to have to duplicate the div with the png 14 times, with top left values specific to each of them.  You might want to re-consider the design, and use the intuitive approach where the user just clicks on the jpg images.

Cd&
0
 
laubachtAuthor Commented:
So I have compromised... since it does not seem possible to go with the original idea, I had to tweak it... I found some codes using hover which enabled PNG overlays with the cursor over the image.  I kept with your intuitive approach, but using the hover, it gives me the capability to put the play logo over the image.  See code below...

.playButtonLG {
	width: 275px;
	height: 200px;
	position: relative;
	float: right;
	margin: 0 0 20px 30px;
}
 
	.playButtonLG img.screenshot {
		border: 0px solid #c8c8c8;
	}
 
	.playButtonLG a.playButtonLG {
		display: none;
		height: 200px; width: 275px;
		position: absolute;
		top: 0px; left: -31px;
	}

 
	.playButtonLG:hover a.playButtonLG {
		display: block;
	}

Open in new window


Then the HTML coding to call it...

<div class="playButtonLG">
	<img src="images/captures/photojourn20110714_KMGHa.jpg" width="275" height="200" border="0" class="rightimg" />
	<a class="playButtonLG" rel="lightbox" href="images/captures/photojourn20110714_KMGHa.jpg">
		<img src="images/play275x200.png" alt="" width="275" height="200" border="0" />
	</a>
</div>

Open in new window


It splits the difference between the permanent PNG and the intuitive approach.
0
 
laubachtAuthor Commented:
I had to find a different approach to the solution, which was seeking out a different code and tweaking it to get it to function as I want.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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