Welcome to WebmasterWorld Guest from

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

Adobe Imageready HTML and Javascript code



5:20 pm on Mar 23, 2003 (gmt 0)

10+ Year Member

Ok, I have created my button and done the necessary rollover effect with it in adobe photoshop and I have the javascript code and the HTML code - but the problem is How do I put all about 4-5 other button codes to together. Do I copy and paste the whole script 4-5 times or just put the button image link somewhere. Please somebody help!

Flo from London

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (careerinprogramming.html) -->
<SCRIPT TYPE="text/javascript">

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

var preloadFlag = false;
function preloadImages() {
if (document.images) {
careerinprogramming_01_over = newImage("images/careerinprogramming_01-over.gif");
preloadFlag = true;

// -->
<!-- End Preload Script -->
<!-- ImageReady Slices (careerinprogramming.html) -->
<A HREF="#"
ONMOUSEOVER="changeImages('careerinprogramming_01', 'images/careerinprogramming_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('careerinprogramming_01', 'images/careerinprogramming_01.gif'); return true;">
<IMG NAME="careerinprogramming_01" SRC="images/careerinprogramming_01.gif" WIDTH=400 HEIGHT=400 BORDER=0 ALT=""></A>
<!-- End ImageReady Slices -->


12:49 am on Mar 26, 2003 (gmt 0)

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

It looks like your changeImages function is set up right. You would need to add a line for each image in the preloadImages function.

under this line in preloadImages
careerinprogramming_01_over = newImage("images/careerinprogramming_01-over.gif");

you add a similar line for the rollover image of each image you add to the page for example, if there are 4 total they could look like this
careerinprogramming_01_over = newImage("images/careerinprogramming_01-over.gif");
careerinprogramming_02_over = newImage("images/careerinprogramming_02-over.gif");
careerinprogramming_03_over = newImage("images/careerinprogramming_03-over.gif");
careerinprogramming_04_over = newImage("images/careerinprogramming_04-over.gif");

this is assuming the images are named accordingly, with only the number changing on each one.

The same applies to the image tag, repeat the existing one and change the numbers to 1,2,3,4.


Featured Threads

Hot Threads This Week

Hot Threads This Month