PDA

Click to See Complete Forum and Search --> : How do I make my rollovers rollover?

Vanda
12-29-2004, 01:20 AM
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">


<HTML>
<HEAD>

<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;
}
}

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) {
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>
gizmo
12-29-2004, 06:59 AM
Try asking in the Javascript forum.;)
schomer
12-29-2004, 12:16 PM
Yes, I don't think you have anything in your CSS that is supposed to be setup to perform any appearance of image swapping. You're probably looking for Java people...

In CSS, you can set the background of a DIV box to contain an image, then you can use #divname:hover to set a different background image which appears when you mouseover it. However, I'm not sure IE supports "hover" for anything except a textual link.

Good luck,
Schomer
rsd
12-29-2004, 02:53 PM
schomer, FYI: I think you meant to say JavaScript.
Java and JavaScript are two different things.
Java is a full blown programming language.

You are correct about IE - it only allows hover on <a> tags.

I'm not sure about the rollovers, do you have the page posted somewhere where we can see it in action (with the images)?
If so, repost the question with a link to the page in the javascript forum.
schomer
12-29-2004, 03:51 PM
Yes, I meant JavaScript... Picky, picky! :-)

Since most image swapping is for <a> links anyway, could you still accomplish some image-swapping with the :hover tag in IE as long it was within an <a> tag?

Would something like this work?

.class a:link {background-image: url(image1.gif);}
.class a:hover {background-image: url(image2.gif);}

Or, can the :hover stuff only work with text attributes in IE?

Schomer
Vanda
12-29-2004, 07:05 PM
Okay just uploaded all my files and my style sheet to my webhost. When I open the page with the web browser and I'm not online it looks fine. But when I opened my page after updating it, it doesn't look the same. Am I doing something wrong? Or is yahoo not capable of supporting a stylesheet?
Here is my site as it looks online now. As you see it's missing a lot of stuff.
Graphic Ills (http://www.graphic-ills.com)
Maybe I'm not adding something that I should once I've uploaded it to my webhost??
Vanda
12-29-2004, 07:34 PM
Ummm ignore that last post. I'm showing my repressed blond roots again. But hey look at the website anyway if you like :)
insanefishposse
12-29-2004, 10:48 PM
<SCRIPT LANGUAGE="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].src = changeImages.arguments[i+1];
}
}
}

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>

...


<BODY onload="preloadImages()"; 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;">



For the changeImages() function, you set it so it can only run if preloadFlag is set to true. preloadFlag is initially set to false, and then set to true after the preloadImages function is run. The problem is, you don't call the preloadImages function anywhere. To get the effect that I believe you're talking about, simply add onload="preloadImages()" to the <BODY> tag. This way, the preloadImages function is run as soon as the page loads, setting the preloadFlag to true, and therefor allowing the images to swap when the mouse hovers over them.