Integrating Rollovers In iWeb ‘08

02 Feb '08 Filed under Tutorials, iWeb -

Some of you might know my very popular tutorial for integrating rollovers in iWeb 1.X. Well, I finally I had some time to make the same tutorial for iWeb ‘08. It is now much, much easier and there is no more HTML editing required!

This new video tutorial will allow you to integrate rollovers in just a few easy steps. This time I have made it as easy as possible and the videos have been pimped to look really professional.

Interested?

Then let’s get started. Please be sure that you are using iWeb ‘08. If you are, then you can continue the tutorial. If not, then you have to use my old tutorial which was designed for iWeb ‘06 users.

  1. Get your brain ready and take some time. The video takes about 25 minutes and so it is not one of those where you can skim through! It’s the best that you watch it once through completely and then do the process while watching the video another time.
  2. If you are ready, then launch the video tutorial right here. It is a large file, so a fast connection is recommendable.
    If you are looking for the code mentioned in the tutorial, it is right here:


    <script type="text/javascript">
    function mouseOver()
    {
    document.rollover_one.src ="http://url/to/rollover-image"
    }
    function mouseOut()
    {
    document.rollover_one.src ="http://url/to/normal-image"
    }
    </script>
    <a href="http://link.com">
    <img alt="Link Title" src="http://url/to/normal-image" name="rollover_one" width="103" height="34" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

  3. This is it! Have fun!

Additional Info:

If you are looking for cool iWeb Templates, then take a look at this huge collection.

If you have enjoyed this tutorial and wish to make a small donation, then feel free to do so by visited this page.

This entry was posted on Saturday, February 2nd, 2008 at 1:11 pm and is filed under Tutorials, iWeb and tagged in, , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

30 Comments

  1. Peter posted:
    02 Feb 08 at 4:14 pm

    Yay! Finnaly :-D
    Great tutorial and they are better than ever! Perfect for little dummies like me. THANKS

  2. Garry posted:
    03 Feb 08 at 12:19 am

    Great stuff!…just what I needed to get my confidence up. Now, off to PayPal to learn if I can integrate a shopping cart?!

  3. Max Karreth posted:
    03 Feb 08 at 9:25 am

    Hey Garry,

    That is actually quite a good idea for a tutorial! Ill be working on it right now :-D
    Max

  4. Fred posted:
    03 Feb 08 at 11:22 pm

    Max,

    I would once again thank you for this exceptional tutorial! I have never learnt all these new things by just trying them once. Usually I waste hours for trying to figure things out - but, sadly, with your tutorial it works right the first time. Hehe.

    Thanks! I will donate for sure!

    Fred

  5. richard posted:
    18 Feb 08 at 10:37 am

    An excellent tutorial! I’m trying to make a website for my upcoming wedding. This really helps - except I can’t get it to work. I’ev double, triple-checked the code and it’s correct but still the rollover doesn’t work. What am I doing wrong?

    The normal image is there. The link works. But the rollover ain’t working. any suggestions?

    I managed to create rollovers with Imageready and it’s generated an HTML page. i’ve put this on my iDisk and have managed to put an iframe on my iWeb page which links to this - but it’s not ideal.

    The page in question is below. The top bar is the iframe showing the html page made by Imageread. Below in the middle of the page is the code you suggest.

    Any help would be REALLy appreciated.

    Thanks, Richard
    PS Excellent tutorial
    PPS will donate!

  6. Max Karreth posted:
    18 Feb 08 at 8:05 pm

    Richard,

    Okay, I have checked your files and it appears that did have some errors in the code. you have missed some parts out like the width=” and the whole name tag. the fact that the name tag does not work is the main issue. i have also found that some of your style coding parts have been corrupted for whatever issue.

    i have sent you a mail with your code and the corrected code attached.

    to all others, if you do not get your image to show up, then check the code!!!!!!!! the error is in there :-D

    Max

  7. Nigel posted:
    20 Feb 08 at 5:51 pm

    I’ve seen many websites where the photos change slowly.

    Here is one example:
    https://wsdvps1.wsdsecure.com/~robinfryday.com/school/gallery?gid=14

    I’d like to have this on my iWeb page.

    How do they do that?

  8. Max Karreth posted:
    20 Feb 08 at 6:47 pm

    Nigel,

    Those are not rollovers. This is javascript opening separate page links. Hm - I am not sure how they do it - but I guess you can ask them.

    Max

  9. Matt posted:
    26 Feb 08 at 10:43 pm

    In response to Nigel, I think the way they do that is make an imovie, import it and then mask the video box so it looks like its part of the page. Try that.

    Max, I am trying to mouseover a small box and get a photo to appear in a box on the same page. Do you think thats possible with iweb.

    Thanks

  10. Max Karreth posted:
    27 Feb 08 at 8:48 am

    So you want to move your mouse over an image in one place and then get the enlarged image in another place?

    Max

  11. Laetitia posted:
    28 Feb 08 at 12:20 am

    hello,
    I’m french so it’s so difficult for me to understand tutorials but I try !!! I need to know how to do rollover mouse.. il do like you say but my website don’t find images.. I create a new folder on cyberduck (in the folder named “www” or other ?) but it don’t work .. PLEASE HELP ME ! Why therr isn’t a super website like yours in french ???!!!!

    Best regards
    Laëtitia

  12. Max Karreth posted:
    28 Feb 08 at 9:15 pm

    Laëtitia,

    There actually a nice chap who has been doing quite a good job in translating some of my tutorials. You can find his site here:

    http://www.zepatente.com/Zepatente/Apple/Apple.html

    And I am not toooo sure what your error is. You need to be a bit more specific.

    Max

  13. Paul Asao posted:
    29 Feb 08 at 6:12 pm

    Hi Max,

    I am currently building a web site using iWeb and am very impressed with your knowledge and insight.Would you ever consider being my web master and how much do you charge?
    I live in minneapolis and am a freelance art director. My site is mainly to show my work (commercials, print ads) to potential clients.
    Thanks much for your helpful site.

    Best, Paul

  14. Max Karreth posted:
    01 Mar 08 at 6:02 pm

    Paul,

    Thanks for the compliments! I haven’t really been a webmaster for charge and so I do not have any prices set for that. If you tell me what your plans are, then we can look at a cooperation.

    Max

  15. alexander jemino posted:
    02 Mar 08 at 11:08 pm

    Hi max,

    thanks a lot for your really good work!

    You asked in nr.X: “So you want to move your mouse over an image in one place and then get the enlarged image in another place?”
    I really would like to know this!!

    greetings, alexander.

  16. Max Karreth posted:
    03 Mar 08 at 8:35 am

    Sorry Alexander, with this type of rollovers it is not possible.

    Max

  17. Eddie posted:
    22 Mar 08 at 12:20 pm

    Hi max, thanks for contributing to the mac people. I’m also running into a little difficulty try to get the roll over image working. The image appeared but does not rollover.
    Hope you can help.

    attached script:

    function mouseOver()
    {
    document.rollover_one.src =”http://web.mac.com/themegraphics/rollover/d2.png”
    }
    function mouseOut()
    {
    document.rollover_one.src =”http://web.mac.com/themegraphics/rollover/d1.png”
    }


  18. Max Karreth posted:
    22 Mar 08 at 1:33 pm

    From your code you are missing several important parts! one of them includes the actual link and the other one the name function for the actual link. drop me a mail with the complete code and ill take a look. it doesnt work to post html right here.

    max

  19. George posted:
    08 Apr 08 at 3:26 am

    I’ve noticed that when using this code and displaying the output page through firefox I get a purple line on the left and top sides of the image, yet not when viewed in safari. Any ideas?

  20. mistagene posted:
    08 Apr 08 at 11:20 pm

    hi there.
    thank you for this information, its been such a help.

    I have one question, the link i made works great.

    But there is a “blue” border around the rollover when i view the page online. In iWeb the “blue” border doesn’t show up.
    and when you click on the rollover, the “blue” border turns “red”.
    Any ideas?
    thx

    Here is the iweb Code.

    function mouseOver()
    {
    document.rollover_one.src =”http://www.oneamore.net/rollovers/WTcommunity_01-over.png”
    }
    function mouseOut()
    {
    document.rollover_one.src =”http://www.oneamore.net/rollovers/WTcommunity_01.png”
    }


    Here is the temporary web address.
    http://web.mac.com/coylegenec/Written_Truth_Clothing/Home.html

  21. Max Karreth posted:
    09 Apr 08 at 6:29 pm

    Hi,

    for anyone who has problems with the tutorials - then please contact me via EMAIL!!!!!!!

    If you post html in the comments it gets wrongly generated.

    only comments which basically say this tutorial stinks or rocks get accepted. anything else goes down the drain.

    thanks,

    max

  22. Caskey posted:
    11 Apr 08 at 3:54 am

    I’m also getting the blue lines on the top and left of the rollover box. It doesn’t happen in Safari, but Firefox and IE are producing the lines. Is there any way to fix this?

  23. Max Karreth posted:
    11 Apr 08 at 7:35 am

    yes you can fix this - but as said, no support via comments here!!!!!!!!!!!

    to the img part add this:


    style="border:none;"

    Max

  24. Craig osgood posted:
    01 May 08 at 11:50 pm

    slight issue works fine for windows yet, on a mac has strange symbols above the name any ideas ? and the roll over dosent work

  25. singless posted:
    09 May 08 at 3:08 pm

    Hi and thanks for this very interesting posts of yours.
    I have a question about the integration of rollovers in iWeb.
    I just followed the code you provided and everything works find but now i would like to integrate a sound clip to the rollover images.
    Can you provide me with the missing code to make a sound play when the mouse is over the button pls?
    I’ve been looking on the internet but i couldn’t fit the codes i found in your javascript.
    Thanx a lot

  26. Max Karreth posted:
    13 May 08 at 7:41 am

    Singless, I actually don’t know how I would do that. Try posting in a some kind of web-forum. Sorry :-(

  27. marc posted:
    16 May 08 at 6:58 pm

    hello max i posted on another page too. Cant seem to find your old tutorial on rollovers in iweb06. Give me a clue mate! would dearly love to whip up some over the weekend!

  28. Velvis posted:
    10 Nov 08 at 6:11 pm

    Thanks Max for your tutorial.
    I used the rollover technique you prescribed for a few external links (existing websites like . . . . . http://blabla.com)
    In what kind of line do I have to change the “<a href=” part if I want a link to another page in my own site.
    I guess that’s about basic HTML syntax, but I am an absolute nobody in HTML.

  29. Will posted:
    07 Dec 08 at 7:40 am

    Very well appreciated. A bit tricky at first but figured it out. Thank alot, now i gotta figure out how to implement text in rollover.

  30. AndyPliska posted:
    22 Dec 08 at 10:55 am

    I really like iweb and this just really makes it sweeter. Great tutorial. I will be keeping this site in my sights. Thanks again.
    I cant wait to start integrating this into my iweb site.
    http://www.southbaytrikke.com.

    Very well done.
    Andy

Post a comment:

« I Am Legend

iTweak On The Way »