Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member blue_francis14's Avatar
    Join Date
    May 2007
    Location
    Philippines
    Posts
    83
    Member #
    15276
    Hello! I am having trouble with script.acoul.us with dreamweaver's built in rollover image.

    HTML Code:
    <a href="recovery_process.html" onmouseout="MM_swapImgRestore();Effect.Fade('test_div'); return false;" onmouseover="MM_swapImage('process','','images/vnav/rollover/recovery_process_hover.png',1);Effect.Fade('test_div'); return false;"><img src="images/vnav/rollover/recovery_process.png" alt="Recovery Process" name="process" border="0" id="process" /></a>
    <div id = "test_div"><img src="image1.jpg" />
    I tried to replace onclick to onmouseover so that when I mouseover the image, it will do the rollover thing and will do the effect. (In my case, another image will slide/appear/fade below the rollover image).

    Does anyone have any idea about this? I tried googling script.acoul.us +rollover image and I didn't get any decent answers.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Do you want both events to happen?

    1 being: fade/appear effect
    2 being: rollover image:

    I think to give an event handler multiple functions you just separate them with a semi colon.

    Such as
    HTML Code:
    <a href="#" onmouseover="function1(); function2();">lorem</a>

  4. #3
    Member blue_francis14's Avatar
    Join Date
    May 2007
    Location
    Philippines
    Posts
    83
    Member #
    15276
    Quote Originally Posted by bfsog
    Do you want both events to happen?

    1 being: fade/appear effect
    2 being: rollover image:

    I think to give an event handler multiple functions you just separate them with a semi colon.

    Such as
    HTML Code:
    <a href="#" onmouseover="function1(); function2();">lorem</a>
    HTML Code:
    <a href="recovery_process.html" onmouseout="MM_swapImgRestore();Effect.Fade('test_div'); return false;" onmouseover="MM_swapImage('process','','images/vnav/rollover/recovery_process_hover.png',1);Effect.Fade('test_div'); return false;"><img src="images/vnav/rollover/recovery_process.png" alt="Recovery Process" name="process" border="0" id="process" /></a>
    <div id = "test_div"><img src="image1.jpg" />
    I had it like this. I checked on firebug on why the code for the rollover effect by dreamweaver doesn't work. I also tried some slide effects found in dynamicdrive.com and dhtmlgoodies.com, still have the sliding, appearing effect but no rollover image effect.

    By the way, has any body seen script.aculo.us being used with a rollover image?

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    What exactly are you trying to achieve? Step-by-step, if you can.

  6. #5
    Member blue_francis14's Avatar
    Join Date
    May 2007
    Location
    Philippines
    Posts
    83
    Member #
    15276
    So sorry for the late reply. I have been recently flooded with work. (I have been recently given work that involves 600 images and will have to give them each a page, no databases, just raw html! yikes!)

    anyway... here's what I really what.

    first... an image1 of course
    second, if you hover over that image1, it will change into a hover status image then, another image2 will appear below. it will slide down from the image1.

    so basically, I have 3 images. image1.jpg, image1_hover.jpg and image2.jpg

    image1.jpg -> mouseover -> image1_hover.jpg replaces image.jpg
    |
    |-> image2.jpg slides down image1.jpg
    scriptaculous has a slide effect and dreamweaver has the image rollover script. I don't know if it could be combined easily. I would really appreciate any help you can give me.

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Scriptaculous has its own simpler method of doing so. Check their docs.

    I prefer using jQuery, which means doing this:

    HTML Code:
    <img id="button" src="image1.jpg" />
    Code:
    $(document).ready(function(){
    
    // Make #button_over
    $("#button").after("<img id=\"button_over\" src="image2.jpg" />");
    
    // Now set the button_over, with CSS, to be directly beneath #button.
    var offset = $("#button").offset();  // Offset object, with .left and .top
    $("#button_over").css({
      position: "absolute",
      top: offset.top+$("#button").height(),
      left: offset.left
    });
    
    // Set the rollovers
    $("#button").hover(function(){
       // Mouse in function
       $(this).attr("img","hover.jpg");   // Change to hover image
       $("#button_over").slideDown("slow");     // Slide down the second image
    },function(){
       // Mouse out function
       $(this).attr("img","image1.jpg");  // Return to normal image
       $("#button_over").slideUp("slow");       // Slide up the second image
    });
    
    });
    But thats jQuery, in case you pick that. It's untested, though. Just the concept...

    (It's just been a habit of mine to see how practical I can write jQuery code...)
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Member blue_francis14's Avatar
    Join Date
    May 2007
    Location
    Philippines
    Posts
    83
    Member #
    15276
    ok then. Have to learn jQuery. Yey technology! ugh... how can a guy keep up with technology these days? It feels like being a doctor is easier because advancment in the field of medicine is not as fast as in the field of information tech/mangament.

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Internet technology is advancing far too quickly for anyone to keep up with. New stuff pop up at a daily basis. Whole new concepts, like Google, Flickr, viral communities, Meebo, Twitter and stuff come up a bit slower, but still quickly. Chances are you've never even heard of half the web technology implementations that other people use on a regular basis (I use google, Yahoo, flickr, friendster, backpack, iconbuffet, meebo, jQuery, wordpress, lightCMS, box.net, facebook, and many many many others). It's just impossible to catch on too.

    Thats mostly why we visit forums like this.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, it's possible to keep up with what's happening. What's hard is to be good at every technology that pops up.

  11. #10
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Just knowing that its there isn't really going to do anything. You need to be able to apply it somehow, or at least understand how they work. Most new things aren't entirely new concepts anyway, they're mostly developments of existing tech.

    Actually, most of the impressive stuff isn't actually demonstrating new technology. Most are simply implementations of technology used in an innovative way - Twitter or jQuery don't use any new technology, they're just using existing technology in a good way. Flickr and viral networking are just the same - there's nothing "new" about them, its just the concepts and the method of conveying information.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com