Hi,

I am creating a banner for my website which will fade between a number of photos, each with a different hyperlink attached to them. I can get the fade to work but the links don't enable, and I am a bit stuck now.

Also, can the .java code which is exported be copied into the html code?

Any help is much appreciated
Chris

// Fade between photos and embeded hyperlinks

// prepare the images to be loaded
PImage img1, img2;
float fade = 0;
float fadeSpeed = 1;
int rate = 90;
// pause time for the photos in m/s
int pause = 2000;
// booleans for creating links
boolean link1 = false;
boolean link2 = false;

void setup() {
 size(730, 547);
 img1 = loadImage("IMG_2296.JPG");
 img2 = loadImage("IMG_1965.JPG");
 frameRate(rate);
}

void draw() {
 background(img1);
 // adjust the transparency
 fade = fade + fadeSpeed;
 tint(255, 255, 255, fade);
 if ((fade == 255) || (fade == 0)) {
   fadeSpeed = fadeSpeed * -1;
 }
 // delay the program when fade reaches either end
 if ((fade == 255) || (fade == 0)) {
   delay(pause);
 }
 image(img2, 0, 0);
 stroke(0, 0);
 fill(255, 0);
 rect(0, 0, width, height);
}

void mousePressed() {
 if (link1) {
   // link for photo 2
   link("*a_link1*");
 } else if (link2) {
   // link for photo 1
   link("*a_link2*");
 }
}

void fadeStop() {
 if (fade > 150) {
   link1 = true;
 } else if (fade < 100) {
   link2 = true;
 } else {
   link1 = link2 = false;
 }
}

Chris Tarren wrote on Jan 29^th, 2010, 1:02am:


Hi, excuse me if I reply saying that using an Applet 'just to fade' images will make your website looking ugly and slow. Also I don't want to appear a 'webdesign teacher' at all.

Guys don't blame me, i love Processing and it is taking all of my free time and thoughts, i am constantly thinking at how to make things in 3D but i think you'll agree this is not what Processing (and an Applet in general) is made for.

What you need is something like this:
http://www.na3.it (yes I did it, but it's much like what you need).
There you'll find on the header a set of links that make the images in the banner to fade.

It is made with a JS framework called jQuery (google for it) and a plugin for it called jquery.cycle.

It is easier to implement with just few lines of HTML, will work on EVERY client with any OS and it's lightweight.

Using an Applet you will force users to download the Java runtime nvirorment, or wait for the 'beast' to build up just to fade some images.

Sorry for that reply I hope you don't mind.

blindfish wrote on Jan 29^th, 2010, 4:19am:


like for example find a solution to avoid loading all the images before the Applet starts. An ideal solution for saving bandwidth should be loading the next image while you're showing the current. But again, there are plenty of Ajax solutions and techniques for that. Look in http://plugins.jquery.com/ this pages to find one.


Ok, now back to Processing.