Making rollovers rollover??

@VandaDec 29.2004

(I’m retarded and posted this in the css forum so sorry if anyone has went there and seen my post already)
I put together my page in photoshop and finished it off in ImageReady (Using slicing). It of course gave me the code in css for each slice. I’ve tweaked it some adding certain images and what-not. Just starting to learn this css stuff so it’s still very new to me.
What I would like to know is why my rollover images won’t work. The images are on the page in the “normal” state but there is no change when you put the mouse over them.
If anyone can help I would appreciate it. (The page validated just fine up until I added the javascript stuff for the buttons)
Here is the code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<TITLE>Asianstylepage</TITLE>

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>
<!– ImageReady Preload Script (linksjadebutton.psd) –>
<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) {
linksjadebutton_01_over = newImage(“images/linksjadebutton_01-over.gif”);
jadeartwork_01_over = newImage(“images/jadeartwork_01-over.gif”);
webmasterjadebutton_01_over = newImage(“images/webmasterjadebutton_01-over.gif”);
orchidsjadebutton_01_over = newImage(“images/orchidsjadebutton_01-over.gif”);
preloadFlag = true;
}
}

// –>
</SCRIPT>

<!– ImageReady Styles (Asianstylepage.psd) –>
<STYLE TYPE=”text/css”>

<!–

DIV.Slice-01 {
position:absolute;
background: #991225;
left:0px;
top:0px;
width:180px;
height:130px;
}

DIV.Slice-02 {
position:absolute;
left:180px;
top:0px;
width:700px;
height:130px;
}

DIV.Slice-03 {
position:absolute;
background: #050505
left:0px;
top:130px;
width:700px;
height:88px;
}

DIV.Slice-04 {
position:absolute;
left:0px;
top:250px;
width:147px;
height:47px;
}

DIV.Slice-05 {
position:absolute;
left:147px;
top:220px;
width:3px;
height:801px;
}

DIV.Slice-06 {
position:absolute;
background: transparent;
left:150px;
top:220px;
width:550px;
height:801px;
}

DIV.Slice-07 {
position:absolute;
left:697px;
top:199px;
width:3px;
height:801px;
}

DIV.Slice-08 {
position:absolute;
left:0px;
top:298px;
width:147px;
height:47px;
}

DIV.Slice-09 {
position:absolute;
left:0px;
top:346px;
width:147px;
height:48px;
}

DIV.Slice-10 {
position:absolute;
left:0px;
top:394px;
width:147px;
height:48px;
}

DIV.Slice-11 {
position:absolute;
left:0px;
top:441px;
width:147px;
height:48px;
}

DIV.Slice-12 {
position:absolute;
left:0px;
top:520px;
width:147px;
height:559px;
}

–>
</STYLE>
<!– End ImageReady Styles –>
</HEAD>
<BODY STYLE=”background-color:#FCFAFA; background-image: url(largeluckycat.jpg); background-repeat: no-repeat; background-position: 60% 55em; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;”>
<!– ImageReady Slices (Asianstylepage.psd) –>
<DIV CLASS=”Slice-01″>
<IMG SRC=”smallluckycat.jpg” WIDTH=106 HEIGHT=137 ALT=”Small lucky cat”>
</DIV>
<DIV CLASS=”Slice-02″>
<IMG SRC=”images/Asianstylepage_02.gif” WIDTH=520 HEIGHT=130 ALT=”Life is like a dream”>
</DIV>
<DIV CLASS=”Slice-03″>
<IMG SRC=”images/graphicillsletters.jpg” WIDTH=339 HEIGHT=87 ALT=””>
</DIV>
<DIV CLASS=”Slice-04″>Menu
</DIV>
<DIV CLASS=”Slice-05″>
<IMG SRC=”images/updownrule.gif” WIDTH=3 HEIGHT=801 ALT=”Vertical bar”>
</DIV>
<DIV CLASS=”Slice-06″>
</DIV>
<DIV CLASS=”Slice-07″>
<IMG SRC=”images/Slice_07.gif” WIDTH=3 HEIGHT=801 ALT=””>
</DIV>
<DIV CLASS=”Slice-08″>
<A HREF=”#”
onMOUSEOVER=”changeImages(‘completejadebutton_01’, ‘images/completejadebutton_01-over.gif’); return true;”
onMOUSEOUT=”changeImages(‘completejadebutton_01’, ‘images/completejadebutton_01.gif’); return true;”>
<IMG NAME=”completejadebutton_01″ SRC=”images/completejadebutton_01.gif” WIDTH=119 HEIGHT=51 BORDER=0 ALT=””></A>
</DIV>
<DIV CLASS=”Slice-09″>
<A HREF=”#”
onMOUSEOVER=”changeImages(‘webmasterjadebutton_01’, ‘images/webmasterjadebutton_01-over.gif’); return true;”
onMOUSEOUT=”changeImages(‘webmasterjadebutton_01’, ‘images/webmasterjadebutton_01.gif’); return true;”>
<IMG NAME=”webmasterjadebutton_01″ SRC=”images/webmasterjadebutton_01.gif” WIDTH=119 HEIGHT=51 BORDER=0 ALT=”” /></A>
</DIV>
<DIV CLASS=”Slice-10″>
<A HREF=”#”
onMOUSEOVER=”changeImages(‘linksjadebutton_01’, ‘images/linksjadebutton_01-over.gif’); return true;”
onMOUSEOUT=”changeImages(‘linksjadebutton_01’, ‘images/linksjadebutton_01.gif’); return true;”>
<IMG NAME=”linksjadebutton_01″ SRC=”images/linksjadebutton_01.gif” WIDTH=119 HEIGHT=51 BORDER=0 ALT=”” /></A>
</DIV>
<DIV CLASS=”Slice-11″>
<A HREF=”#”
onMOUSEOVER=”changeImages(‘orchidsjadebutton_01’, ‘images/orchidsjadebutton_01-over.gif’); return true;”
onMOUSEOUT=”changeImages(‘orchidsjadebutton_01’, ‘images/orchidsjadebutton_01.gif’); return true;”>
<IMG NAME=”orchidsjadebutton_01″ SRC=”images/orchidsjadebutton_01.gif” WIDTH=119 HEIGHT=51 BORDER=0 ALT=”” /></A>
</DIV>
<DIV CLASS=”Slice-12″>
<IMG SRC=”images/Slice_12.gif” WIDTH=147 HEIGHT=559 ALT=””>
</DIV>
<!– End ImageReady Slices –>
</BODY>
</HTML>

Rep

to post a comment

JavaScript

12 Comments(s) _↴

@NedalsDec 29.2004 — #You have this bit of code on your page

[size=1]
 function changeImages() {
 if (document.images &amp;&amp; (preloadFlag == true)) {
 ...
 
 var preloadFlag = false;
 function preloadImages() {
 ...
 preloadFlag = true;
 [/size]

Without going through all your code, your rollover will not work until 'preloadFlag = true', and that is set in the preloadImages() function.

The problem.. you never run the preloadImages() function.

So add this line at the end of your script and, provided there are no other problems, all should work.

[size=1]window.onload = preloadImages;[/size]

@VandaauthorDec 30.2004 — #I placed that at the end hopefully in the correct spot but still no button rollover action.

If anyone would like to go ahead and take a look at the source code to perhaps see anything else that may be doing this.

I would really like to use the button because it took a while to figure out how to do that with photoshop and imageready. And did a tut on how to do a glassy button and damnit I think I did a good job lol.

When I open up the file that I have saved on the computer it works fine.

(Each button rolls over).

Here's my page:

[URL=http://www.graphic-ills.com]Graphic Ills[/URL]

@JPnycDec 30.2004 — #Where'd you get that script? It's just chock full of fat. You could do img rollovers with 1/5th that much code.

@VandaauthorDec 30.2004 — #If that's so would you care to share the knowledge? I would much rather have less there if it means I'll get the same effect.

I've searched a bit online and saw that you can do it by using just css but would I still be able to use the images I created that you see on my site?

@JPnycDec 30.2004 — #I didn't sift through that mountain of code but you want to have a mouseover/mouseout that switches between 2 imgs, yes? Then do this:

<img src="pic1.jpg" onmouseover="src='pic2.jpg'" onmouseout="src='pic1.jpg'">

Just do that for all the rollovers, no fuss, no muss.

Unless I'm completely misunderstanding the effect you're trying to get, then that should be all you need, not that Wagnerian Opera of code.

@JPnycDec 30.2004 — #If gecko browsers give you a hard time with that code, then add

this.src, instead of just src.

@VandaauthorDec 30.2004 — #Well I'll have to give that a shot. When I created the buttons in Photoshop and Imageready that's the code it generates on it's own. Thanks hopefully it will work.

Wagnerian Opera?? lol What is that? Interesting way to describe a bit of script.

For that code you suggested do I need to delete the java script stuff all-together and just place that in the image tag section?

@NedalsDec 30.2004 — #[size=1]window.onload = preloadImages;[/size]

Goes AFTER the preloadImages() function on a line byitself. And somehow you lost a closing '}' on that function.

Otherwise the code as it stands works!

@JPnycDec 30.2004 — #[i]Originally posted by Vanda [/i]

[B]Well I'll have to give that a shot. When I created the buttons in Photoshop and Imageready that's the code it generates on it's own. Thanks hopefully it will work.

Wagnerian Opera?? lol What is that? Interesting way to describe a bit of script.

For that code you suggested do I need to delete the java script stuff all-together and just place that in the image tag section? [/B][/QUOTE]

Code generators are notorious for taking the long way round even the simplest operations. I won't even read or debug the code they spit out.

Yes, don't use anything but those img tags, with the appropriate changes to the pic file names, of course. I obviously just stuck the pic names in. You'd have to put your own.

@JPnycDec 30.2004 — #Wait, I just looked at that mess of code again. You want to mouseover a LINK and change the pic, not the image itself. Well that's not what I gave you. Of course even that can be done without nearly the mountain of code that thing spit out, but it's not what I posted.

@VandaauthorDec 30.2004 — #Okay tried the new version of code and it works!

Take a look please. I've only done one button so far. I added a few more things as well just trying to see what's going to look good and what not.

Here's the page in action...

[URL=http://www.graphic-ills.com]Graphic Ills[/URL]

@JPnycDec 30.2004 — #Ah ok, the link IS the image, so the code I gave you will work, just surround it with the anchor tag.

Also in #JavaScript _↴

Problem with javscript in netscape Question on clearing cookies Loading images?

Success!

Help @Vanda spread the word by sharing this article on Twitter...

Tweet This

Making rollovers rollover??

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Making rollovers rollover??

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴