Roll-overs on your website

[Soul_of_Kilik]

Like this guy:

http://homepage.mac.com/gapodaca/digital/digital.html

How do you make that roll-over preview for a website?

[Salomon]

this is javascript. i did a site once with this code. took me days to figure the code out.
you should try with flash, much more simple.

the code:
<script type="text/javascript" src="../GeneratedItems/CSScriptLib.js"></script>
<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
pre_img_01_over = newImage('../_im/logo.data_/img_01-over.gif');
pre_fair1_01_fair1_03_over = newImage('fair1.data_/fair1_01-fair1_03_over.jpg');
pre_fair1_02_fair1_03_over = newImage('fair1.data_/fair1_02-fair1_03_over.gif');
pre_fair1_03_over = newImage('fair1.data_/fair1_03-over.gif');
pre_fair1_04_fair1_03_over = newImage('fair1.data_/fair1_04-fair1_03_over.gif');
pre_fair1_05_fair1_03_over = newImage('fair1.data_/fair1_05-fair1_03_over.gif');
pre_fair1_06_fair1_03_over = newImage('fair1.data_/fair1_06-fair1_03_over.gif');
pre_fair1_07_fair1_03_over = newImage('fair1.data_/fair1_07-fair1_03_over.jpg');
pre_fair1_01_fair1_04_over = newImage('fair1.data_/fair1_01-fair1_04_over.jpg');
pre_fair1_02_fair1_04_over = newImage('fair1.data_/fair1_02-fair1_04_over.gif');
pre_fair1_03_fair1_04_over = newImage('fair1.data_/fair1_03-fair1_04_over.gif');
pre_fair1_04_over = newImage('fair1.data_/fair1_04-over.gif');
pre_fair1_05_fair1_04_over = newImage('fair1.data_/fair1_05-fair1_04_over.gif');
pre_fair1_06_fair1_04_over = newImage('fair1.data_/fair1_06-fair1_04_over.gif');
pre_fair1_07_fair1_04_over = newImage('fair1.data_/fair1_07-fair1_04_over.jpg');
pre_fair1_01_fair1_05_over = newImage('fair1.data_/fair1_01-fair1_05_over.jpg');
pre_fair1_03_fair1_05_over = newImage('fair1.data_/fair1_03-fair1_05_over.gif');
pre_fair1_04_fair1_05_over = newImage('fair1.data_/fair1_04-fair1_05_over.gif');
pre_fair1_05_over = newImage('fair1.data_/fair1_05-over.gif');
pre_fair1_06_fair1_05_over = newImage('fair1.data_/fair1_06-fair1_05_over.gif');
pre_fair1_07_fair1_05_over = newImage('fair1.data_/fair1_07-fair1_05_over.jpg');
preloadFlag = true;
}
}

// --></script>

[Soul_of_Kilik]

Whoa!!

I don't sprechen ze Greec man! What the hell is that? It looks like the matrix. Thanks though. I guess Flash it'll have to be.

[Salomon]

actually this is the code that load ALL his images and ALL rollovers.
but you could just play with on of those lines.
this in the Html header calls the javascript:

<script type="text/javascript" src="../GeneratedItems/CSScriptLib.js"></script>
<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
}
}

// --></script>

--------------------------------------
and this creates the rollover function :

pre_img_01_over = newImage('../_im/logo.data_/img_01-over.gif');
pre_fair1_01_fair1_03_over = newImage('fair1.data_/fair1_01-fair1_03_over.jpg');


create you own images name them like above and see how the code interact...

[Steve13]

If you have Creative Suite with Dreamweaver included, it is a lot easier:
http://www.developingwebs.net/dreamweaver/rollover.php

[Salomon]

right steve, but dreamweaver allows you just 1 image rollover. as with flash or java you get has many as you want in one single image.

[Steve13]

Ok, right. I didn't see the previews with the Layers window on them. I was looking at the top shoe one. That's pretty slick.

[CoreyByas]

Here's a link for a rollover generator http://javascript.internet.com/gener...ad-images.html

The click generate & the code is laid out for you. Just copy & paste the code.

If thats what you are looking for that is.