Image on top of image

Hello:
I'm using PhotoShop CS6 on Windows XP.
I'm trying to create a brochure. I want to create a few pages where the background image is solid and the top image is translucent/transparent.
I've inserted an image as a sample. How can I achieve this effect?
Thank you in advance.

Thank you for the reply. I will make sure I have the images on different layers.
Now, the next image below will show more of what I want. Notice how the image is half black and white and the other in color. The text is also clear and readable.
How do I achieve this?

Similar Messages

Error message 1056 and image on top of image problem

I am trying to place a button on the screen and make it spin when mouse_over (which will be one of mutiple buttons with different instance names. ) The code I wrote is putting 2 colorwheels on the screen, one on top of the other, I can see the bottom one is spinning but I can't seem to figure out why the top one is there.
But then, I get a error code message 1056 with no compile errors when I mouse over the dial:ReferenceError: Error #1056: Cannot create property rotation on builtin.as$0.MethodClosure.
    at fl.transitions::Tween/setPosition()
    at fl.transitions::Tween/set position()
    at fl.transitions::Tween()
    at Colorwheel/rotateKids()
I am pretty new at as3 so thanks for your patience! I have been trying to figure this out for days!!! I am guessing that I have to import a class, but don't know what.
here is my code
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.Event;
static_mc.play();
var kids_btn = new Cwcopy_mc;
addChild(kids_btn);
kids_btn.x = 745.1;
kids_btn.y = 122.2;
kids_btn.height = 100;
kids_btn.width = 100;
kids_btn.addEventListener(MouseEvent.MOUSE_OVER, rotateKids);
    function rotateKids(e:MouseEvent):void {
    var spin:Tween = new Tween(rotateKids, "rotation", Strong.easeInOut, 0, 360, 5, true);

ok, i changed that, now it looks like nothing is happening when its moused over, but I don't get any error messages.
Previously it has worked sparatically, i have changed the code so many times I am not sure what is what at this point!
So I just added this code:
kids_btn.addEventListener(MouseEvent.MOUSE_DOWN, goSlide);
    function goSlide(e:MouseEvent):void {
        gotoAndStop("slide")
Now, when I click on the dial it goes to the "slide" frame and then the top dial will spin and it appears to have another dial underneath it (I see this becuz the dial isn't symetrical and spins a bit crooked)
i want the dial to spin continuously when I mouse over it before I click on it.
here's the complete code
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.Event;
static_mc.play();
var kids_btn = new Cwcopy_mc;
addChild(kids_btn);
kids_btn.x = 745.1;
kids_btn.y = 122.2;
kids_btn.height = 100;
kids_btn.width = 100;
kids_btn.addEventListener(MouseEvent.MOUSE_OVER, rotateKids);
    function rotateKids(e:MouseEvent):void {
    var spin:Tween = new Tween(kids_btn, "rotation", Strong.easeInOut, 0, 360, 5, true);
kids_btn.addEventListener(MouseEvent.MOUSE_DOWN, goSlide);
    function goSlide(e:MouseEvent):void {
        gotoAndStop("slide")

Adobe Bridge displays icons on top of image in Full screen view

Icons like RAR, txt files if any in that folder. Bridge 4.0.5.11 Windows XP SP3.

Do you mean option sort By Filename, By Type and so on..
This does not solve the problem, still icon appear on top of image
Anyway, my idea is not to complain but to report this issue. I can live with that.
Message was edited by: Bojan Živković

HTML hovering over thumbnail to bring up larger image on top of it. How?

I am new to site and first question. So hope not too silly. I wish to have lots of small thumbnails on page and when mouse hovers over each individual thumbnail it will enlarge into a larger image - on top of the thumbnail mouse is over. Thanks to Nancy O answering Bravats question on this, I found the following HTML from Nancy, however..... am darned if I am able to have the image hover exactly over the thumbnail. Not to left, not to right, etc etc, but over top of thumbnail. Can someone please tell me what to put in where to make this happen? Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Disjointed Image Rollovers</title>
<style type="text/css">
/**BEGIN DISJOINTED IMAGE ROLLOVERS**/
#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between small icons**/
/**remove this rule if all full size images are to share the same display area. **/
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust location of full size images**/
left: 50%;
top: 50%;
/**optional full size image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional full size image borders, padding**/
border: 5px solid orange;
padding: 5px;
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}
#rollover a:hover, #rollover a:focus
{visibility:visible;}
/**END DISJOINTED ROLLOVERS**/
</style>
</head>
<body>

<div id="rollover">
<p>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #1</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>
</div>

</body>
</html>

Here is my Demo. http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
First, #rollover a needs to have position:relative.
Second, you will need to tweak left & top values to suit your needs.
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: 0px;
top: -140px;
For better answers, we need a link to your page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Image on top of text box issue

I'm attempting to create my own message window that will appear when a text box is full. I have script in the "full" section of the text box that makes the presence of the image and a few text boxes visible when full. In design view, I have placed the image on top of the text box. However, during testing, when the text box is full, the image appears but the text from the text box below also appears on top of the image. I have tried to setFocus to the image as well, but this didn't help.
What's odd is that if I navigate to a different page and then navigate back, the image appears correctly.
Any ideas? Thanks.

Thank you very much. I didn't even know how to look up the solution.
Now I understand what those buttons do and their usefulness.

Getting text to appear on top of Image In InDesign 5

I am struggling to get some text to appear on top of an image in InDesign 5. I did fiddle with layers but it doesn't appear to have multiple layers.
Could someone walk me through making this work?
Appreciate the help!
Brian

It seems that even if I turn the image off in layers, the text fiend does not sho up. In other words, if I create a text field outside the printable area for the boot, the text is displayed, but when I drag it into the printable area, the text goes blank.
Let me get this one thing straight though: But draging the text layer entry above the image layer entry, the text layer would thus be above and on top(visable).??
But it's not working as a result of the above mentioned. I still seems to have something to do with the image layer that exists on the page.
Ooops! Bob, you hit the nail on the head. Although there was no text wrap spacing added, the text wrap was on. So, selecting a particular image and removing "text wrap" only applies the attributes only to that image. All other images still have text wrap on.....which is what I want.
Thanks to all.

Layering images on top of one another and adding hotspots that reveal a different picture below

This is the page Im currently working on http://www.andrewtoyota.com/2014-highlander If you look on the right there is an image of a car with 9 different colored circles below.
First I was trying to find a way to apply a hover effect to the circles to display the correct image of the car with the corresponding color. It wasn't working correctly because I couldn't find a way to have the images lay on top of each other with all the circles (being separate images) to (when clicked) link to the correct car image.
So I brought my images into Dreamweaver and I'm trying to figure out how to do it in there. I know there is a way to apply certain behaviors to images, clickon, but I can't figure out how to lay my images on top of one another. There has to be a div tag to do so right?
I have a jpeg for each image (a horizontal jpg including the text on left then the car then the colors below) I thought if I uploaded all the images then applied a hotspot to each circle on every image then linked that circle to the right image, when clicked, it would work. Its not seeming to work. One problem is all my images are layed on one above the other... I need to get it so only one shows at a time and then get the hotspots to work so when clicked the user is still in the same page just a different image. Either clicked on or hover.
This is what im working with right... I have applied hot spots to the different colors... how do I have only one image showing at once... yet each hot spot linked to the correct image?!

You are looking for "remote rollover" or "disjointed rollover" if you were to do a search on Google.
Basically, you have a "starter image" and then when remote images or hotspots are moused over, the starter image is changed to a new image by javascript. There is only ever 1 actual image in the source code on the page at any given time.
Layers (APDivs, position:absolute, etc) is a terrible direction to go for this.
In DWCC...
1. Insert your starting (no rollovers) image
2. Click the image and give it an ID in the Properties window
3. Click/select the link image/hotspot/text that will fire the rollover
4. Click the + in the Behaviors panel and choose Swap Image
5. Select the id of the image set in step 2
6. Browse to the "on" version of the image for the "Set Source To" text field
7. Make sure Preload Images is checked and click OK.
8. Click the + in the behaviors again and choose Swap Image Restore and hit OK
Repeat for each hotspot.

Is it possible to overlap a image on top of flash?

Is it possible to overlap a image on top of flash?
I am thinking to use index-x for a image to overlap a flash
in html.
Since I am here, I fail this approach but I just wanna know
is it possible to do so.
How could this to be done?
thanks,

mimihuhu,
> Is it possible to overlap a image on top of flash?
It is. Not only images, but text and anything else,
including other
Flash content. The solution is to use something called WMODE,
which is
known (and has been known) to be problematic. So consider
yourself warned.
:) Here are a few notes that will probably help get you
started.
http://www.quip.net/blog/2006/flash/how-to-position-flash-beneath-other-content
David Stiller
Co-author, Foundation Flash CS3 for Designers
http://tinyurl.com/2k29mj
"Luck is the residue of good design."

How can I have a browser image that scrolls with images on top of it scrolling in tandem -

How can I have a browser image that scrolls with images on top of it scrolling in tandem - so the background is a hexagon pattern with small images inside some hexagons and I want them all to be scrollable as a user uses the browser scroll bars. At the moment the background image jumps when I preview so the small hexagons all become out of alignment. Any tips appreciated. I have browser image set to tile - pinned at the middle and set to scrolling - the small images are not pinned -

Thanks for your answer - The images on the top layer are also links and change to show they're links on rollover - so I wanted to keep them as separate graphics - and it works to a point but when I preview the page in a browser the tiled browser image always moves no matter how I pin it and then everything becomes unaligned. Any further suggestions appreciated.

PS6 Image Processor - Images on top..?!

PS6 Image Processor - Images on top..?!
Hi.
Previously when using PS3 I would minimise PS during Image processing large batches of images - once minimised nothing of PS was visible on the screen and I could go about other bits without images flashing up during the processing.
Now with PS6, minimised as before, during this process images are not hidden and every image will flash up on screen during the process...
Is there a way to disable this feature so images do not flash up? Fingers are crossed.
All the best
Gully

Probably the easiest solution would be to go to Edit>Preferences>Interface and check Open Documents as Tabs.

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Oh wow, looks like a new feature.
The "page" links in a stylesheet with the address "resource://gre/res/TopLevelImageDocument.css". If you remove that reference, then the image displays in the old style.
'''''Edit: Please skip the rest of this post and check out the next one.'''''
There might be a more elegant solution than that, but you could use a bookmarklet to strip out that link when you want to view the page in its old style. A bookmarklet is a snippet of JavaScript you save on the Bookmarks toolbar for quick access.
First, copy the following code to the clipboard (it's all one long line):
<br>javascript:var ssheet=document.querySelector('link[href="resource://gre/res/TopLevelImageDocument.css"]'); if(ssheet)ssheet.parentNode.removeChild(ssheet); void 0;
Next, if you are not displaying the Bookmarks Toolbar, use View > Toolbars > Bookmarks Toolbar to display it. (If you aren't using the classic Menu bar, press Alt+v to call up the old View menu. Right-clicking the gray area just below the page address also allows you to display the Bookmarks Toolbar.)
Right-click on the Bookmarks Toolbar (or Mac equivalent of right-click!) and choose New Bookmark.
Paste the code into the Location box (the second box).
Then type a useful name in the Name box (e.g., Oldstyle Picture) and click Add.
Now, when you want to tweak the image display, click the button to run the script.
Manual clicking is a hassle, so it might make sense to look into other solutions. (Greasemonkey didn't seem to work; I think it might not run on .jpg files.)

Placing an image on top of a flash file

Is there a way to keep a image on top of a flash file? When I
place it on top then publish the flash file jumps in front of the
pic when it plays.
What I am trying to do is place a border around the window. I
can't just shrink the flash file down because this great program
causes errors with the flash content.

There is no way to keep an image on top of a Flash file.
Having said that, we do a couple things to get around that:
1: add the border to the flash file-- when we're creating
swfs for Breeze in Captivate or Flash itself, we add the highlight
or border there
2: Add the border to a file that rests behind the flash file
and make the flash file fit
It sounds as if you've tried the second, but with no success.
I 've never had a problem resizing swfs that I've imported into ppt
through Breeze Presenter. I sthat the issue you're having?

Placing an image on top of existing image

I seem to have a lot of trouble with placing an image on top of an existing image and then wanting it to stay relative to the original. As in... I want to put a button on an image of a map. Then later.. will make a hotspot on that area to open another window.
My trouble is with placing the button and then having it stay relative to the map no matter how the browser window moves or is sized. What is the prefered method using DW CS4? Can you point to a tutorial on how to do this...
Thanks for your time
Ralph

function(){return A.apply(null,[this].concat($A(arguments)))}
But, placing one image on top of another in a web page must be a task that happens all the time.. I just have not found a straight forward way to do it yet.
It's really not common.
It can be done via layering (what Dreamweaver calls APDivs) but you may still get layout issues with browser resizing.

Placing an image on top of other elements

Is it possible to place an image on top of two existing
that already contains an images. The new image would straddle over the two existingbut on top of them. Thanks

I thought about combining all the <div>s but they would not make a square or rectagle shape. Also inside the header <div> I want to place some tabs for navigation.
I have attached a jpeg of the comp and you can see the image I want to place on top is the image showing 2 white tanks. The <div>s will be the blue header at the top ofthe page and tthe <div> with the water drop graphic inside. I was not sure if it was possible to put this tank image on top of the other two <div>s, I was thinking maybe it could be a layer on top?
The other thing I am trying to do is to put the four navigation tabs at the bottom of the header <div> for navigation purposes. I was thinking of making each tab a <div> with the tab graphic and text inside each <div> I just not sure how to place it in the header <div> in that location? Thanks again.
Dan

Hot to draw an image on top of a JSlider

Hello!
I am alopmst new to java. now, I need to draw a little image on top of a jslider slider, which resembles kinda mark. How can I achieve this?
Thanks!!!!

Hmm I also need to klcik the mark with the mouse, so is it possible to ad a mouslistener to an image?

Image on top of image

Similar Messages

Maybe you are looking for