Solved

Overlaying part of image with transparent gif

Posted on 1998-05-08
15
256 Views
Last Modified: 2010-05-18
Let me begin by stating that, although I know several programming languages quite nicely,
till today I only knew Java as a nice island of Indonesia, and not a as computer language.

Therefore, I do not know whether it is possible to answer my question.
If not: ignore it. 'This is not possible' is my assumption already, I will not give
points just to get that certified.

The question (displaying a transparent image on top of another):

1 I want to be able to call a function for HTML
   called PutOnTop..OrSomething
   Parameter 1= picture to be overlayed or picture to be initially displayed or picture coordinates
                         relative to the browser. Anyway: a parameter to select the targetpicture.
   Parameter 2= name and location of the (second) picture to lay on top of Parameter 1
   Parameter 3ab= x and y Offset relative to the upperleft corner (0,0)
                         the second picture must be able to make a overlay a any point

2 The answer must work for at least N4 and MSIE 4
   Answers who will work only for N4 or MSIE 4 will be rejected, until I am
   sure there is no other option than to select 1 browser.

3 If a browser isn't capable or executing the Java script, it must not give
   a errormessage.

4 For browser that do not support the applet, there must be the option to
   display the original picture (not just a black or grey hole).
   
5 I want to receive not only the source of the function, but something I can FTP
   to my hostserver and see want it does without any effort, lets say 'donkey proof'
   installation guidelines.

6 It must be client sided. No CGI bins are allowed.

7 I want the source code too.

600 point to start with. I require a fully functional, non copyrighted answer.

Thanks,
 Luiaard
 
0
Comment
Question by:luiaard
  • 6
  • 6
  • 2
  • +1
15 Comments
 

Author Comment

by:luiaard
ID: 1220859
Edited text of question
0
 

Author Comment

by:luiaard
ID: 1220860
Adjusted points to 765
0
 
LVL 6

Expert Comment

by:jpk041897
ID: 1220861
If by this you mean using an applet to draw a transparent gif on a page, then you are correct in assuming it cannot be done.

Posting as a comment since this is not the answer you are looking for.

If, on the other hand, you wish to overlay 2 diffrent  immages in an applet, then it can be done.
0
 

Author Comment

by:luiaard
ID: 1220862
OK, transparency would be nice,
but it is not necessary.
I want to change the content of a polygone
in the picture, but this doesn't have to float.
If I could just a smaller rectangular picture on top,
it would be OK (since I can make area outside
the polygone the same as the original picture).

But I do not want to overlay (the exact amount of) "2" different images in an applet.
I want to be able to overlay more images if possible, and
the applet much be generic, in the sense that I would be able to
select the pictures when I would use the applet, and not hard/source coded in the applet.
Is the restriction of "2" necessary?
If not: go for it.

Thank you,
Luiaard


The image do not have to be transparent.

0
 

Author Comment

by:luiaard
ID: 1220863
OK, transparency would be nice,
but it is not necessary.
I want to change the content of a polygone
in the picture, but this doesn't have to float.
If I could just a smaller rectangular picture on top,
it would be OK (since I can make area outside
the polygone the same as the original picture).

But I do not want to overlay (the exact amount of) "2" different images in an applet.
I want to be able to overlay more images if possible, and
the applet much be generic, in the sense that I would be able to
select the pictures when I would use the applet, and not hard/source coded in the applet.
Is the restriction of "2" necessary?
If not: go for it.

Thank you,
Luiaard



0
 
LVL 6

Expert Comment

by:gadio
ID: 1220864
Ok, here is a code for you. Test it and see if it helps you. I'm going to post a url where you can see it works. If you have questions, feel free to ask.
Regards, G.

-------- imgovl2.html ---------
<applet
   name="images_overlay"
   code="images_overlay"
   width="500"
   height="200"
   align="Top"
   alt="If you had a java-enabled browser, you would see an applet here."
>
 <param name=overlay1 value=image1.gif>
 <param name=x1 value=0>
 <param name=y1 value=0>
 <param name=overlay2 value=image2.gif>
 <param name=x2 value=10>
 <param name=y2 value=10>
 </applet>

<applet
   name="images_overlay"
   code="images_overlay"
   width="500"
   height="200"
   align="Top"
   alt="If you had a java-enabled browser, you would see an applet here."
>
 <param name=overlay1 value=image1.gif>
 <param name=x1 value=0>
 <param name=y1 value=0>
 <param name=overlay2 value=image2.gif>
 <param name=x2 value=40>
 <param name=y2 value=0>
 </applet>
<applet
   name="images_overlay"
   code="images_overlay"
   width="500"
   height="200"
   align="Top"
   alt="If you had a java-enabled browser, you would see an applet here."
>
 <param name=overlay1 value=image1.gif>
 <param name=x1 value=0>
 <param name=y1 value=0>
 <param name=overlay2 value=image2.gif>
 <param name=x2 value=-10>
 <param name=y2 value=-10>
 </applet>

-------- images_overlay.java ---------

import java.applet.Applet;
import java.awt.*;
import java.net.*;

public class images_overlay extends Applet {
    String[] url_strings;
    int x[];
    int y[];
    Image[] images;
    /**
     * Initializes the applet.  You never need to call this directly; it is
     * called automatically by the system once the applet is created.
     */
    public void init() {
        int cnt;
        for( cnt = 1; cnt < 10 && getParameter("overlay"+cnt) !=null; cnt++ );
        url_strings = new String[cnt-1];
        x = new int[cnt-1];
        y = new int[cnt-1];
        int cnt1;
       
        for( cnt1 = 0; cnt1 < url_strings.length; cnt1++ ) {
            url_strings[cnt1]=new String(getParameter("overlay"+(cnt1+1)));
            x[cnt1]=Integer.parseInt(getParameter("x"+(cnt1+1)));
            y[cnt1]=Integer.parseInt(getParameter("y"+(cnt1+1)));
        }
       
        add( new ImageCanvas( getCodeBase(), url_strings, x, y ));
    }

    /**
     * Called to start the applet.  You never need to call this directly; it
     * is called when the applet's document is visited.
     */
    public void start() {
       
    }

    /**
     * Called to stop the applet.  This is called when the applet's document is
     * no longer on the screen.  It is guaranteed to be called before destroy()
     * is called.  You never need to call this method directly
     */
    public void stop() {
    }

}


-------- ImageCanvas.java ---------


import java.awt.*;
import java.net.*;
import java.awt.image.*;           // For ImageFilter stuff


class ImageCanvas extends Canvas {
  //-------------------------------------------------------------------------
  // Instance variables.
 
  private Image[] images;
  private int x[];
  private int y[];


  protected String imageString = "<Existing Image>";

  /** Turn this on to get verbose debugging messages. */
  public boolean debug = /*true;*/false;

 
  /** Width and height of the Canvas. This is the width/height of the image
   *  plus twice the margin.
   */
  protected int width, height;

  protected boolean explicitSize = false;
  private int explicitWidth=0, explicitHeight=0;
 
  // The MediaTracker that can tell if image has been loaded
  // before trying to paint it or resize based on its size.
  private MediaTracker tracker;
 
  // Used by MediaTracker to be sure image is loaded before paint & resize,
  // since you can't find out the size until it is done loading.
  //private static int lastTrackerID=0;
  //private int currentTrackerID;
  private boolean doneLoading = false;

  private Container parentContainer;


  //-------------------------------------------------------------------------

  //-------------------------------------------------------------------------
  // Constructors
 
  /** Create an ImageCanvas using the image at URL specified.
   * @param imageURL The URL of the image.
   */
  public ImageCanvas(URL baseURL, String[] names, int[] xs, int[] ys) {
        Init(baseURL,names,xs,ys);
  }

  public void Init(URL base, String[] url_strings, int[] xs, int[] ys) {
    images = new Image[url_strings.length];
    x = xs;
    y = ys;
    tracker = new MediaTracker(this);
    for( int cnt1 = 0; cnt1 < url_strings.length; cnt1++ ) {
        try {
            URL imageURL = new URL(base, url_strings[cnt1] );
            images[cnt1] = getImage(imageURL);
            //currentTrackerID = lastTrackerID++;
            //tracker.addImage(image, currentTrackerID);
            tracker.addImage(images[cnt1], cnt1);
            imageString = imageURL.toExternalForm();
        } catch( MalformedURLException e ) {}
    }
  }
 

  public void waitForImage(boolean doLayout) {
    if (!doneLoading) {
      int waitfor=0;
      //try { tracker.waitForID(currentTrackerID); }
      try {
        for( int cnt1 = 0; cnt1 < images.length; cnt1++ ) {
            waitfor=cnt1;
            tracker.waitForID(cnt1);
        }
      }
      catch (InterruptedException i) {
        System.out.println(i);
      }
      catch (Exception e) {
                System.out.println("Error loading " + waitfor + ": "
                           + e.getMessage());
                e.printStackTrace();
      }
      if (tracker.isErrorID(0))
        new Throwable("Error loading image " + imageString).printStackTrace();
      if (explicitWidth != 0)
        width = explicitWidth;
      else
        width = images[0].getWidth(this);
      if (explicitHeight != 0)
        height = explicitHeight;
      else
        height = images[0].getHeight(this);
      resize(width, height);
      debug("[waitForImage] - " + imageString + " is " +
            width + "x" + height + ".");

      // If no parent, you are OK, since it will have been resized before
      // being added. But if parent exists, you have already been added,
      // and the change in size requires re-layout.
      if (((parentContainer = getParent()) != null) && doLayout) {
        setBackground(parentContainer.getBackground());
            parentContainer.layout();
      }

      doneLoading = true;
          debug("[waitForImage] -Done");
    }
  }


  public void centerAt(int x, int y) {
    debug("Placing center of " + imageString + " at (" + x + "," + y + ")");
    move(x - width/2, y - height/2);
  }

  public synchronized boolean inside(int x, int y) {
    return (x >= 0) && (x <= width) && (y >= 0) && (y <= height);
  }
 
  public void paint(Graphics g) {
 
    if (!doneLoading)
        waitForImage(true);
    else {
        for( int cnt1 = 0; cnt1 < images.length; cnt1++ ) {
            g.drawImage( images[cnt1],x[cnt1],y[cnt1],this);
        }
    }
 
  }
  public Dimension preferredSize() {
    if (!doneLoading)
      waitForImage(false);
    return(super.preferredSize());
  }

   public Dimension minimumSize() {
     if (!doneLoading)
       waitForImage(false);
     return(super.minimumSize());
   }
 
  public void resize(int width, int height) {
    if (!doneLoading) {
      explicitSize=true;
      if (width > 0)
        explicitWidth=width;
      if (height > 0)
        explicitHeight=height;
    }
    super.resize(width, height);
  }

  public void reshape(int x, int y, int width, int height) {
    if (!doneLoading) {
      explicitSize=true;
      if (width > 0)
        explicitWidth=width;
      if (height > 0)
        explicitHeight=height;
    }
    super.reshape(x, y, width, height);
  }
 
 
  protected void debug(String message) {
    if (debug)
      System.out.println(message);
  }
 
  //-------------------------------------------------------------------------
 
  private static URL makeURL(String s) {
    URL u = null;
    try { u = new URL(s); }
    catch (MalformedURLException m) {
      System.err.println("Bad URL " + s + ": " + m);
      m.printStackTrace();
    }
    return(u);
  }

  private static Image getImage(URL url) {
    return(Toolkit.getDefaultToolkit().getImage(url));
  }
 
}

0
 
LVL 6

Expert Comment

by:gadio
ID: 1220865
luiaard, have a look at http://www.geocities.com/ResearchTriangle/Lab/7752/imgovl2.html
Note that I tested it with two images, one of them is transparent. It woorks nice with the transparency (tested on Netscape4.04 & MSIE4).
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:luiaard
ID: 1220866
Gadio,

I looked at your URL and your answer looks very promising. Still,
it is almost, but not quite ready.
Maybe your didn't understand the target of my question, due
to my loosy frasing.
I want to put a picture somewhere on the page. <- your code does this.
I want to put a second picture on top, transparent preferable
and be able to shift it around <- your code does this partially,
but I must have some control from HTML/Javascript to do this.
Obviously, otherwise it is useless.

I  like to move to second picture which is on top,
as a response to user triggered events.
MouseOver ... move it to the left. That is the whole idear of using Java,
instead of a animated gif.

Of course this can be done with N4 layers, but I like it to work with Java.
I hope that you can make this adjustment.

Thanks.
0
 
LVL 6

Expert Comment

by:gadio
ID: 1220867
  luiaard, I think that you are missing a point here. The experts exchange (as I see it) is a place to ask questions and learn, not for doing outsourcing. Sure I can make any changes to this code, it would be very easy, but you will not learn nothing from getting everything ready... but if thats what you prefer - its ok.
  Please be exact on what you want to do - do you want that the position of the second picture be controlled by the mouse?

0
 

Author Comment

by:luiaard
ID: 1220868
Thanks Gadio,

Yes, I want to be able to position the second picture by MouseOver.
When I move over a picture elsewhere on the page, another picture must be loaded and placed somewhere on top of the first one.
Say I have picture X somewhere on my page.
When I do MoveOVer picture A, picture Y1 must be loaded on top of picture X.
when I do MoveOver picture B, picture Y2 must be loaded on top of picture X.
So Moveover on a,b,c, ..., w determines which picture (Y1, Y2, .. Yn) in loaded
on top of picture X.

Regarding your comment:
I agree that Experts-Exchange is not a place for outsourcing, but for
experts to exchange. However, I am working like 80+ hours a week, and sometimes
I need the answers to be very timesaving for me. Would prefer to have more time to
do more coding myself. Have to sleep to :-(( .
I try to compensate my explicit demands by giving not like 200 or 100 points but much more. Hope you understand.

0
 
LVL 6

Expert Comment

by:gadio
ID: 1220869
luiaard, have a look in
http://www.geocities.com/ResearchTriangle/Lab/7752/imgovl3.html
I have implemented in with OnMouseOver but used links instead of images (you can play with the html). If its what you meant, let me know - I'll publish the code here of send you an email.
G.

0
 
LVL 4

Accepted Solution

by:
evijay earned 760 total points
ID: 1220870
Hi
You need to use double buffering technique.

The rectangle on which you place the second image need to be saved for later restoration. Then, when you want to move the
transparent image on underneath image to a different place, first restore the original image rectangle and reput the
transparent image again on the new place. It may appear slow to you but it is quite fast.
0
 
LVL 6

Expert Comment

by:gadio
ID: 1220871
Any response??
0
 
LVL 4

Expert Comment

by:evijay
ID: 1220872
Please go thru the ImageMap applet in the demo directory of jdk1.1.4 distribution. I think you are targetting to develop a program which is already developed long back.
0
 
LVL 6

Expert Comment

by:gadio
ID: 1220873
 luiaard, you are not responding and you didn't confirm any answer yet. This question will soon be autograded and the points will be lost. Also the current answer will be graded as 'D'.
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

For customizing the look of your lightweight component and making it look opaque like it was made of plastic.  This tip assumes your component to be of rectangular shape and completely opaque.   (CODE)
For customizing the look of your lightweight component and making it look lucid like it was made of glass. Or: how to make your component more Apple-ish ;) This tip assumes your component to be of rectangular shape and completely opaque. (COD…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.

760 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

19 Experts available now in Live!

Get 1:1 Help Now