Startpage with special request

[kuifjexx]

How Can i do this?

I've created a startpage with a picture on it => old logo .. now i wanne create the following:
Click on the (old) logo must show the new logo with some "animation" for example from small to big ... and then with a click on the new logo the new startpage ....

Can someone give me ideas / examples ... do I need javascript ...

Thanks in Advance

Greetz from Belgium ...

Luc aka kuifjexx

[Nevermore]

Let me get this straight:

1) Shows old logo
Click on old logo = new logo
Click on new logo = new startpage?

You can do that with JavaScript. How big do you want the image to start from, and how big should it grow?

[kuifjexx]

Yes indeed thats what i want ...

New logo may appear from very very small to the normal size of the new logo. I do not have the right measures yet, its under construction, you can see the old logo => www.edelweis.be

hope you can help me this ..

Thanks in advance

Greetz from Belgium

Luc aka kuifjexx

[Nevermore]

This script will make the new logo change when clicked and then grow up to a size you can set:


<script type="text/javascript">
<!--
logotwo = new Image;
logotwo.src = "logo.jpg" //Insert new image source here
var sth = 20; //Starting height
var stw = 40; //Starting width
var maxh = 200; //Set maximum height
var maxw = 200; //Set maximum width
var spd = 20; //Set speed - lower=faster
var incr = 5; //Set number of pixels to grow each time
x=0;
//Do not edit from here onward
newlogo = document.getElementById("logo2");
function grow() {
newlogo = document.getElementById("logo2");
if (x==0) {newlogo.src=logotwo.src; newlogo.style.width=stw; newlogo.style.height=sth; x=2;}
logo_width = newlogo.width + incr;
logo_height = newlogo.height + incr;
window.setTimeout("enlarge(logo_width,logo_height)",spd);
}

function enlarge(w,h) {
if(w<maxw && h<maxh) {
newlogo.style.width=w;
newlogo.style.height=h;
window.setTimeout("grow()",spd); }
}
//-->
</script>

All you need to do is fill in value for the 7 variables at the top, and put this code in the actual tag of the starting image:
onclick="grow()"

[kuifjexx]

Many many thanks already .. but I seem to have troubles do let it work... :confused:

I have modify this line
logotwo.src="logo.jpg"
into
logotwo.src="abc.jpg"

and also the logo2 into logotwo
is this a mistake or do I have to leave it like that

I get an error on the line
newlogo.src=logotwo.src; newlogo.style.width=stw; newlogo.style.height=sth; x=2;
=> newlogo is empty or no object

this is how I call the script
<img border="1" src="logogr.gif" width="607" height="340" onclick="grow()">

Do you have any ideas?

Greetz from Belgium

Luc aka kuifjexx :confused:

[DrDaMour]

<img border="1" src="logogr.gif" width="607" height="340" onclick="grow()">


needs to be

<img id="logo2" border="1" src="logogr.gif" width="607" height="340" onclick="grow()">

[kuifjexx]

Thanks it works

Many thanks to you, DrDaMour, and Cijori

This forum rocks

Greetz from Belgium

Luc aka kuifjexx