www.webdeveloper.com
Results 1 to 13 of 13

Thread: Making rollovers rollover??

  1. #1
    Join Date
    Nov 2004
    Location
    Virginia Beach
    Posts
    59

    Making rollovers rollover??

    (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">


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

    Rep

  2. #2
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    You have this bit of code on your page
    Code:
    
    function changeImages() {
      if (document.images && (preloadFlag == true)) {
      ...
    
    var preloadFlag = false;
    function preloadImages() {
      ...
      preloadFlag = true;
    
    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.

    window.onload = preloadImages;

  3. #3
    Join Date
    Nov 2004
    Location
    Virginia Beach
    Posts
    59
    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:
    Graphic Ills

  4. #4
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Where'd you get that script? It's just chock full of fat. You could do img rollovers with 1/5th that much code.

  5. #5
    Join Date
    Nov 2004
    Location
    Virginia Beach
    Posts
    59
    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?

  6. #6
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    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.

  7. #7
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    If gecko browsers give you a hard time with that code, then add

    this.src, instead of just src.

  8. #8
    Join Date
    Nov 2004
    Location
    Virginia Beach
    Posts
    59
    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?

  9. #9
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    window.onload = preloadImages;

    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!

  10. #10
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Originally posted by Vanda
    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?
    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.

  11. #11
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    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.

  12. #12
    Join Date
    Nov 2004
    Location
    Virginia Beach
    Posts
    59
    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...
    Graphic Ills

  13. #13
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Ah ok, the link IS the image, so the code I gave you will work, just surround it with the anchor tag.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles