Rollover events using Image Ready - IE

Anonymous posted this at 18:39 — 30th March 2000.

Joined: Jan 1970

Hi There!

I'm trying to figure out why the rollover events that I created using ImageReady, does not work in Internet Explorer. It works excellent in Netscape.....

The following is the pasted version of the document I am experiencing difficulties with. Any suggestions and tips are greatly appreciated! ! ! !

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--

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

var preloadFlag = false;
function preloadImages() {
if (document.images) {
Indexsliced_01_web_button_over =
newImage("images/Indexsliced_01-web_button_o.gif");
Indexsliced_01_resume_button_over =
newImage("images/Indexsliced_01-resume_butto.gif");
Indexsliced_01_graphics_button_over =
newImage("images/Indexsliced_01-graphics_but.gif");
Indexsliced_01_proposal_button_over =
newImage("images/Indexsliced_01-proposal_but.gif");
Indexsliced_01_projectplan_button_over =
newImage("images/Indexsliced_01-project-plan.gif");
Indexsliced_04_web_button_over =
newImage("images/Indexsliced_04-web_button_o.gif");
Indexsliced_04_resume_button_over =
newImage("images/Indexsliced_04-resume_butto.gif");
Indexsliced_04_graphics_button_over =
newImage("images/Indexsliced_04-graphics_but.gif");
Indexsliced_04_proposal_button_over =
newImage("images/Indexsliced_04-proposal_but.gif");
Indexsliced_04_projectplan_button_over =
newImage("images/Indexsliced_04-project-plan.gif");
web_button_over = newImage("images/web_button-over.gif");
resume_button_web_button_over =
newImage("images/resume_button-web_button_ov.gif");
resume_button_over = newImage("images/resume_button-over.gif");
graphics_button_web_button_over =
newImage("images/graphics_button-web_button_.gif");
graphics_button_resume_button_over =
newImage("images/graphics_button-resume_butt.gif");
graphics_button_over = newImage("images/graphics_button-over.gif");
graphics_button_proposal_button_over =
newImage("images/graphics_button-proposal_bu.gif");
graphics_button_projectplan_button_over =
newImage("images/graphics_button-project-pla.gif");
proposal_button_web_button_over =
newImage("images/proposal_button-web_button_.gif");
proposal_button_resume_button_over =
newImage("images/proposal_button-resume_butt.gif");
proposal_button_graphics_button_over =
newImage("images/proposal_button-graphics_bu.gif");
proposal_button_over = newImage("images/proposal_button-over.gif");
proposal_button_projectplan_button_over =
newImage("images/proposal_button-project-pla.gif");
projectplan_button_web_button_over =
newImage("images/project-plan_button-web_but.gif");
projectplan_button_graphics_button_over =
newImage("images/project-plan_button-graphic.gif");
projectplan_button_proposal_button_over =
newImage("images/project-plan_button-proposa.gif");
projectplan_button_over =
newImage("images/project-plan_button-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>

</HEAD>
<BODY BGCOLOR=#FFFFFF ONLOAD="preloadImages();">

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=130 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=71 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=240 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=180 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1></TD>
</TR>
<TR>
<TD ROWSPAN=7>
<IMG NAME="Indexsliced_01" SRC="images/Indexsliced_01.gif"
WIDTH=130 HEIGHT=417></TD>
<TD COLSPAN=3>
<IMG SRC="images/Indexsliced_02.gif" WIDTH=491 HEIGHT=75></TD>
<TD ROWSPAN=2>
<IMG SRC="images/Indexsliced_03.gif" WIDTH=29 HEIGHT=180></TD>
</TR>
<TR>
<TD ROWSPAN=6>
<IMG NAME="Indexsliced_04" SRC="images/Indexsliced_04.gif"
WIDTH=71 HEIGHT=342></TD>
<TD COLSPAN=2>
<IMG SRC="images/Indexsliced_05.gif" WIDTH=420 HEIGHT=105></TD>
</TR>
<TR>
<TD>
<A HREF="web.html"
ONMOUSEOVER="changeImages('Indexsliced_01',
'images/Indexsliced_01-web_button_o.gif', 'Indexsliced_04',
'images/Indexsliced_04-web_button_o.gif', 'web_button', 'images/web_button-over.gif',
'resume_button', 'images/resume_button-web_button_ov.gif', 'graphics_button',
'images/graphics_button-web_button_.gif', 'proposal_button',
'images/proposal_button-web_button_.gif', 'projectplan_button',
'images/project-plan_button-web_but.gif'); return true;"
ONMOUSEOUT="changeImages('Indexsliced_01',
'images/Indexsliced_01.gif', 'Indexsliced_04', 'images/Indexsliced_04.gif',
'web_button', 'images/web_button.gif', 'resume_button', 'images/resume_button.gif',
'graphics_button', 'images/graphics_button.gif', 'proposal_button',
'images/proposal_button.gif', 'projectplan_button',
'images/project-plan_button.gif'); return true;">
<IMG NAME="web_button" SRC="images/web_button.gif"
WIDTH=240 HEIGHT=44 BORDER=0></A></TD>
<TD COLSPAN=2 ROWSPAN=4>
<IMG SRC="images/Indexsliced_07.gif" WIDTH=209 HEIGHT=171></TD>
</TR>
<TR>
<TD>
<A HREF="resume.html"
ONMOUSEOVER="changeImages('Indexsliced_01',
'images/Indexsliced_01-resume_butto.gif', 'Indexsliced_04',
'images/Indexsliced_04-resume_butto.gif', 'resume_button',
'images/resume_button-over.gif', 'graphics_button',
'images/graphics_button-resume_butt.gif', 'proposal_button',
'images/proposal_button-resume_butt.gif');
return true;"
ONMOUSEOUT="changeImages('Indexsliced_01',
'images/Indexsliced_01.gif', 'Indexsliced_04', 'images/Indexsliced_04.gif',
'resume_button', 'images/resume_button.gif', 'graphics_button',
'images/graphics_button.gif', 'proposal_button', 'images/proposal_button.gif'); return
true;">
<IMG NAME="resume_button" SRC="images/resume_button.gif"
WIDTH=240 HEIGHT=42 BORDER=0></A></TD>
</TR>
<TR>
<TD>
<A HREF="GraphicsTo/index.htm"
ONMOUSEOVER="changeImages('Indexsliced_01',
'images/Indexsliced_01-graphics_but.gif', 'Indexsliced_04',
'images/Indexsliced_04-graphics_but.gif', 'graphics_button',
'images/graphics_button-over.gif', 'proposal_button',
'images/proposal_button-graphics_bu.gif', 'projectplan_button',
'images/project-plan_button-graphic.gif');
return true;"
ONMOUSEOUT="changeImages('Indexsliced_01',
'images/Indexsliced_01.gif', 'Indexsliced_04', 'images/Indexsliced_04.gif',
'graphics_button', 'images/graphics_button.gif', 'proposal_button',
'images/proposal_button.gif', 'projectplan_button', 'images/project-plan_button.gif');
return true;">
<IMG NAME="graphics_button"
SRC="images/graphics_button.gif" WIDTH=240 HEIGHT=43 BORDER=0></A></TD>
</TR>
<TR>
<TD>
<A HREF="proposal.pdf"
ONMOUSEOVER="changeImages('Indexsliced_01',
'images/Indexsliced_01-proposal_but.gif', 'Indexsliced_04',
'images/Indexsliced_04-proposal_but.gif', 'graphics_button',
'images/graphics_button-proposal_bu.gif

Anonymous posted this at 18:39 — 30th March 2000.

They have: 5,633 posts

Joined: Jan 1970

Lloyd Hassell posted this at 03:46 — 31st March 2000.

They have: 231 posts

Joined: Feb 2000

I wouldnt rely on a program to generate script. Always hand code it yourself so you know what is going on.

Here is the code I use for rollovers:

code:

// preload
if (document.images) {
   IMG1_over = new Image();
   IMG1_over.src = "URL";
   IMG1_out = new Image();
   IMG1_out.src = "URL";
   }

// HEAD script
function mouseOver(SRC) {
   if (document.images) {
      document[SRC].src = eval(SRC + "_over.src");
      }
   }

function mouseOut(SRC) {
   if (document.images) {
      document[SRC].src = eval(SRC + "_out.src");
      }
   }

// IMG tag
<a href=""
onMouseOver="javascript:mouseOver('IMG1')"
onMouseOut="javascript:mouseOut('IMG1')"><img
src=""
name="IMG1"></a>
[/code]

:: Lloyd Hassell :: http://www14.brinkster.com/lloydh ::

AB Carroll posted this at 19:47 — 4th April 2000.

They have: 16 posts

Joined: Nov 1999

LIoyd:

Thanks for your reply. I was able to solve the problem.

Thanks!
AB