Welcome to WebmasterWorld Guest from

Forum Moderators: keyplyr & mack

Message Too Old, No Replies

Adobe Imageready HTML and Javascript code

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

Full Member

10+ Year Member

joined:Feb 3, 2003
votes: 0

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

joined:July 24, 2001
votes: 0

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.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members