Disjointed rollovers using images w/transparency

Hi all!
I am trying to build a configurator which will allow me to change different elements (colors) of an object (like a car). In order to do this cleanly and properly, I'd need to use images with transparency, like a PNG/GIF file.
1. Is it possible to use tranparent files for this purpose?
2. Will I be able to overlap images? For example, if I want the wheels a different color than the body, the images will need to overlap even though they're rectangle shaped essentially (which is why I'd need to use transparency).
3. Is it possible to do this using all CSS?
4. Are there any tutorials out there available?
Thanks in advance!!

I've only seen this done with Flash. 
Example, click "see colors" for a demo
http://www.chevrolet.com/corvette-grand-sport-convertible/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Using images with Transparency in Photobooks

    I'm to a point where I would like to use images that utilize transparency in Aperture photo books. Is this possible? So far, PSD files that I've cropped with PS's lasso tools to have transparent areas surrounding their subject tend to change this area to white when dropped into a book.
    Does anyone know of a way or format to use to retain this transparency? I love the speed of Aperture's photobook tools, along with export and printing options, and would like to be able to layer images that bleed together, or have a cut-out subject on top of others, but I haven't noticed a way as of yet.
    Is this ability even available in Aperture yet?
    If not, is there a third party plugin that gives it to the user when making photo books?
    Please let me know soon, else i'm going to have to adjust my workflow back to photoshop only for page set layouts and the created PSD files on blank book pages- not fun.

    i have been trying different ways to make it work fine, and find several things to consider:
    Note: for the next ways i tried with images with transparency.
    1 searching images in the iPad with safari and saving it into Photo app
    then copying it with the popup and pasting it with the popup inside Pages or Keynote:
    work fine.
    2 using the saved images that worked fine in the first way but
    then inside Pages in my opened document, using the menu to import the image from the
    Photo app, to insert the same downloaded image used in the first case:
    does not work, the image appears with a white background.
    3 trying the first way (manually copying and pasting) but with the images i imported from
    my MacBook Pro using the normal way via iTunes(10.1.1 (4))
    does not work, some images appears with a black background, other images
    appears with a white background.
    4 trying with the images of the third way, but changing the method using the photo app
    menu from Pages
    does not work as in the third way
    i dont have problem using transparency images in the first complex way.
    my problem is when i try to use images with transparency in the other three normal ways.

  • Using images with transparent backgrounds

    Hello. I'm trying to design several forms using a large background graphic along with several other overlays (defined by the form user) that contain transparent backgrounds. Unfortunately, everytime I go to change the graphic, the program won't recognize the transparency of the overlay and substitutes white in it's place. So, for example, I have a background image that is rectangular and when my form user selects an overlay that is circular, it inserts the circle with a white background (which is supposed to be transparent). Can anyone help me with this?
    Thanks!
    -Mike

    Min required version of flash player for my application is 9..
    I think I figured it out, Here is my solution:
    private function completeHandler(evt:Event):void
       var originalWidth:int=loaderG.content.width;
       var originalHeight:int=loaderG.content.height;
       var scale:Number = 0.5;
       var matrix:Matrix = new Matrix();
       matrix.scale(scale, scale);
       myBitmapDataObj=new BitmapData(originalWidth, originalHeight, true, 0xFFFFFF);
       myBitmapDataObj.draw(loaderG.content, null, null, null, null, true);
       var copyBitmapData:BitmapData= new BitmapData(originalWidth* scale, originalHeight* scale, true, 0x000000);
       copyBitmapData.draw(myBitmapDataObj, matrix, null, null, null, true);
       var myBitmapG:Bitmap=new Bitmap(copyBitmapData,PixelSnapping.AUTO,true);
       addChild(myBitmapG);
    I also try blur filter on my bitmap:
    var blur:BlurFilter = new BlurFilter();
       blur.blurX = 1.4;
       blur.blurY = 1.4;
       blur.quality = BitmapFilterQuality.HIGH;
       myBitmapG.filters = [blur];
    Or is there better solution?

  • Use menu rollover with disjointed Rollovers

    I am using a menu with disjointed rollovers but I want to know how I can have rollover images on the menu as well without using the restore image function. I want to have a rollover swap image on the menu item and when it is clicked on the main image changes and stays changed until another menu item is clicked. I can do this but the menu rollover image stays "on" even when the mouse is not over it.

    i finally figured it out. i opened the html file in dreamweaver and in the behaviors panel, change the tag to "MouseClick" swap image.

  • Transparent border appears when I use Image Size to shrink an image (bug)

    In CS2 (9.0.2) and CS3 (10.0.1), whenever I shrink an image using Image Size, my layers get a slightly transparent edge. As a game developer, I make tiling textures a lot, and this generally ruins their tiling-ness.
    Try this:
    - create a 32x32 image, make it white
    - add a layer, fill it with black
    - shrink it to 16x16 or 20x20, using any of the Bicubic resampling methods
    - notice that the edge pixels of the black layer are slightly transparent. This is most noticeable in the corners of the image.
    Is there a better place for me to report this bug? I haven't found one.

    Haha, you mean it's a bug in the spec rather than a bug in the implementation? (Unless there is actually a reason someone would want it to work that way.)
    Yeah Bilinear and Nearest Neighbor both avoid the problem, but of course the image doesn't look as good.
    I work around it by duplicating all my layers before shrinking. The problem is obvious (in-game) with only one layer, but still subtle enough that it's usually invisible after duplicating. Annoying, but it works.

  • DW CS3/GoLive Disjointed rollovers

    I have a table with several columns of text--a list of names of artists.  I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
    http://www.printworkschicago.com/artists/artists.htm
    I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time.  Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded.  (GoLive called them "remote rollovers")
    My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
    Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes.  Is this true?  Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
    Thanks in advance.

    salmdesign wrote:
    I have a table with several columns of text--a list of names of artists.  I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
    http://www.printworkschicago.com/artists/artists.htm
    I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time.  Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded.  (GoLive called them "remote rollovers")
    My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
    Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes.  Is this true?  Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
    Thanks in advance.
    The answer really depends on the code on the page.  Things don't just go 'kablooey' - it happens for a reason.  Looking at the code will tell you what that reason is.
    There is no a priori reason why adding a DW behavior to a page containing GL markup would cause a kabloeey event.  Can you show us the page in its broken state?

  • Caption in disjointed rollovers

    Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers?
    My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath.
    Can you please help me with this
    Thanks

    Without a link to see what you have so far, it's hard to make recommendations.  Not too sure how you're creating your disjointed rollovers (scripts or CSS).  Below are some links that might help.
    Pure CSS Disjointed Rollover -  captions in span tags
    http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
    4Level Lightbox Extension for DW -  captions below images
    http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm
    Disjointed Rollovers in CS3 using  Image Swap Behavior
    http://www.communitymx.com/content/article.cfm?cid=E11E8
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Framing image with transparent background png frame

    hi,
    i'm trying to find a way to frame images with transparent background png frames...
    what i'm doing now is
    1-drawing my image on a panel
    2-creating a 2nd image using the frame's filename, stretching this 'frame-image' to a size slighlty larger than that of my main image and drawing the 'frame-image'
    the problems with this method are:
    1-depending on the width of the frame, the frame sometimes hides parts of the image (thick frame), and sometimes there is a gap between the frame and the image (thin frame).
    2-if the image file containing the frame is larger than the frame (Ex: The image is 300x300, the frame is centered in this image and is 200x200; as opposed to the image is 200x200 and the frame takes up all the space), when i position the 'frame-image' near the top left corner of the image i want to frame, the frame appears at the wrong place (shifted down and to the right). This is due to the fact that i'm placing the top corner of the created 'frame-image' and not the frame, who is not in the top corner of my 'frame-image'.
    Is there a way to do what i'm trying to do???
    My ideas (which i don't know how to achieve are)
    1-To 'analyse' my transparent background png file and
         1-only keep the frame,
         2-calculate the frame's thickness
    OR
    2-Let java do the analyzing for me and tell it to frame my image with the frame in the png file
    please feel free to ask for more explanations if my description/question is confusing,
    thanks.

    Have you looked into the Border interface? If what you really want to do
    is put a custom border on a component, you may be able to do it this way.
    Anyway, here is some code that stacks and centres 2 images. It's not hard to do.
    import java.awt.*;
    import java.awt.image.*;
    import java.io.*;
    import java.net.*;
    import javax.imageio.*;
    import javax.swing.*;
    public class Example extends JComponent {
        private BufferedImage backgroundImage;
        private BufferedImage foregroundImage;
        public Example(BufferedImage backgroundImage, BufferedImage foregroundImage) {
            this.backgroundImage = backgroundImage;
            this.foregroundImage = foregroundImage;
        public Dimension getPreferredSize() {
            int w = backgroundImage.getWidth();
            int h = backgroundImage.getHeight();
            return new Dimension(w, h); //assuming this is bigger
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            int w = getWidth();
            int h = getHeight();
            //paint both, centred
            int x0 = (w-backgroundImage.getWidth())/2, y0 = (h-backgroundImage.getHeight())/2;
            g.drawImage(backgroundImage, x0, y0, null);
            int x1 = (w-foregroundImage.getWidth())/2, y1 = (h-foregroundImage.getHeight())/2;
            g.drawImage(foregroundImage, x1, y1, null);
        public static void main(String[] args) throws IOException {
            URL url1 = new URL("http://weblogs.java.net/jag/Image54-large.jpeg");
            URL url2 = new URL("http://weblogs.java.net/jag/DukeSaltimbanqueSmall.jpeg");
            JComponent comp = new Example(ImageIO.read(url1), ImageIO.read(url2));
            final JFrame f = new JFrame();
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            f.getContentPane().add(comp);
            f.pack();
            SwingUtilities.invokeLater(new Runnable(){
                public void run() {
                    f.setLocationRelativeTo(null);
                    f.setVisible(true);
    }

  • Images with Transparency Cause Rendering Bug in Acrobat

    Try this at home: Export a file containing an image with transparency to PDF and open it in Acrobat (any platform, any recent version): the page containing the image will have all text rendered in what looks like bold or faux bold, depending on the font. The document looks fine in Preview and printed (even from Acrobat).
    Can anyone else reproduce this? I get this behavior consistently.

    Hi bdepaepe, I've had a look and I believe I have experienced the error you mean and solved it.
    The reason this occurs some of the time, but not always is because the source code is not the same each time, as the adverts change every refresh. The error only happens when two of the < div> tags of class 'banneritem' which are on top of each other have a height of 84px each as opposed to 80px (although even if this is the case the rendering issue doesn't always happen).
    The reason that some of the 'banneritem' < div> tags have a height of 84px is because inside them there is an <a> tag which contains an < img> tag, and the <a> tag has not been set to 'display: block;'. <a> tags are inline elements by default, so shouldn't be used to hold block level elements such as images unless the styles for the <a> tag include 'display: block;'.

  • Export a PDF to an image with transparency

    Hello,
    I'm trying to export a PDF (which contains a logo with 4 paths) as an image with transparency. In my case I use the PNG because it supports the transparency. As my logo is defined with paths it should be possible to create an image with transparency.
    Maybe this is a limitation and Acrobat cannot create image wich supports transparency.
    Anyone have an idea?
    Thanks in advance,
    Joe

    @Joe:
    That's a really pity.
    Have you found any other software which can do this job.
    I searched yesterday but didn't find anything.
    @Doc Maik
    b)
    I have a (lot) PDF containing a single image which has a transparent background.
    You can check that in Acrobat by menu: Edit - Preferences - Page Display - Show transparency grid
    I need to have a PNG or TIFF (these two formats allow transparency) of that image.
    That's all but as it seems to much for Acrobat to handle.
    "Save as ..." doesn't work in case of transparency!
    Thanks anyway.
    Best regards
    Norbert

  • Setting image background transparent

    I want to know how can I set the background of an existing images to transparent. I am a web desginer and currently i want's to change background color of one of my site http://twxdroid.com but here the problem arises that some of my used images background won't match up site background, so someone plz tell me how to change existing image background transparent. I heard about using magic wand selection tool or quick selection tool to make transparent but still can't figure out how to use them.

    • if the Layer is a Background Layer change it to a regular one by double-clicking it
    • make a Selection with whatever Selection Tool is appropriate
    • if you selected the background use Select > Inverse to invert the Selection
    • Layer > Layer Mask > From Transparency
    • if further corrections are needed paint on the Layer Mask – black to hide, white to show the Layer’s content
    • save the layered file as psd, psb or tif
    • File > Save for Web … to save a copy a format that fits your needs (png-24 for example)

  • Can disjointed rollovers be responsive?

    Hi All:
    My client wants a tool develped for his website that will allow customers to develp their own widget.  The website is currently built to be responsive (i.e. elastic to adjust to whatever viewport size a customer might visit the site with whether a desktop or a mobile device).  My first question to this group is can disjointed rollovers created with Fireworks be responsive?  Thanks.
    Bob Green
    www.bobgreen.com
    W7 Home Premium, PC, FW CS5.

    Thank you for the help. I think I may be confused by the addition/need for linked text in the target image.
    I know I should code things in Dreamweaver, but I do not know how to add the text to each target image. You see, I have a navigation bar with simple icons. Above this bar, I have one slice that is to contain sub-navigation links.
    For example, I have a slideshow icon. When the user rolls over this icon, I want the slice above to display with listed text that is linked to the appropriate slideshow page.
    Is there a way to do this? I know I have seen it is some sites, can't find them now though.
    Any advice?

  • CSS disjointed rollovers with animation?

    im redesigning my site and for some reason my rollovers arent working. the top two thumbs are active.. nike and coke:
    http://www.toddheymandirector.com/SPOTS/index_2010.html
    would it make sense to try this in CSS? and can CSS do disjointed rollovers with animated gifs?

    They work for me, but you are not doing yourself a favor by letting the QT file auto-play. It will block UI interavctivity in many cases. As for you otehr question - an image is an image. CSS doesn't care whether the format in itself is animated or static.
    Mylenium

  • Disjointed Rollovers in FireFox

    I was practicing disjointed rollovers and driving myself
    crazy. They just wouldn't work in the browser preview (I use FF as
    my browser) Finally I tried to preview in IE 6 and it worked fine
    as it did in Opera 8 and Netscape 8. Is there something stange
    about FF for this behavior?
    Code Below

    Fred
    Do you have JavaScript turned off in FF?
    Dave
    "Fred1000" <[email protected]> wrote in
    message
    news:e45q32$63j$[email protected]..
    > I was practicing disjointed rollovers and driving myself
    crazy. They just
    > wouldn't work in the browser preview (I use FF as my
    browser) Finally I
    tried
    > to preview in IE 6 and it worked fine as it did in Opera
    8 and Netscape 8.
    Is
    > there something stange about FF for this behavior?
    >

  • How I could find that an image have transparent background

    Hi All,
    I have an image with transparent background placed in an ellipse item.
    Is there exist a way using which I can find out that placed image have a transparent background?
    Regards,
    Alam

    This may help you find your iTune account:
    Frequently Asked Questions About Apple ID
    Without knowing your old account info there is nothing you can do.

Maybe you are looking for