iWeb Tip #13 – Rollovers in iWeb

70
1409

Rollovers in iWebIt’s always fun to add some user interaction to your website and currently the only rollover like interaction iWeb gives us is text rollovers as links.  Well this post is to show you how to get image rollovers on your iWebsites.  Here we go:

See Demo

Step 1) Make 2 graphics. One that is the up/normal state, or what you want to be up when the users mouse is not over the image.  Then make the other graphic the rollover state or what the graphic will look like when you roll the mouse over it.

Step 2) Size those 2 graphics as small as you can get them without losing quality.  Photoshops save for web features works good for this, but you can get this effect just as easy by opening it with Preview and saving as jpeg and adjusting the quality.

Step 3) Put those 2 graphics on your server.  You can use the iDisk with MobileMe or your own server.  Just make a folder somewhere on the server perhaps call it “rollover_images” or something like that.  If your putting it on MobileMe make the folder in this location: iDisk/Web/Sites/rollover_images . Then the URL to the images will look something like this: For MobileMe—https://web.me.com/username/rollover_images/rollover.jpg or if you using your own host it would be —https://www.yoursite.com/rollover_images/rollover.jpg in which you would put the folder right on the root level of your public server.

Step 4) Then simply copy the code below and paste into a snippet.

<script type="text/javascript"> function mouseOver()
{document.rollover_one.src ="https://web.me.com/username/rollover_images/rollover.jpg"}
function mouseOut()
{document.rollover_one.src ="https://web.me.com/username/rollover_images/normal.jpg"}
</script>
<a href="https://www.your_button_link_here.com">
<img alt="Link Title" src="https://web.me.com/username/rollover_images/normal.jpg" name="rollover_one" width="175" height="175" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

Step 5) Replace what’s in red with your URL’s to your images and image sizes and put in what link you want it to go to by replacing the iwebunlimited link and your set.

Note: If you’d like the link to open in a new page replace the link

<a href="https://www.iwebunlimited.com">

with

<a href="https://www.iwebunlimited.com" target="_blank">

70 comments

    • jette 18 January, 2011 at 10:02 Reply

      Got the same problem/question as Jason: Want to combine the rollover with shadowbox. Already tried several positions in the html code for its reference, but doesn’t seem to work.. HELP, I’m running out of ideas here.. Anyone? Please?

  1. RYAN 3 December, 2010 at 08:56 Reply

    I can’t believe I’m doing ROLLOVERS! I’m a web site designer novice!!! : ) Thanks for the tutorial!

    My links are going a bit haywire though. Anyone see this before? http://web.me.com/meachenstudios/MEACHEN_STUDIOS/Contact.html

    I’m guessing that I am not setting up the iWeb page correctly because the code is dead on, I checked and double checked.

    Any suggestions would be welcome. Otherwise I just have to jettison the whole rollover menu idea. I can’t have this haywire stuff be the first impression my work makes.

    Thanks for ALL that you do WebUnlimited!!!!!

    RYAN

  2. Amy 4 January, 2011 at 14:22 Reply

    When I publish my site, a box comes up that says I have to log into my .me account to continue. Why is it doing that?

  3. Peter 7 January, 2011 at 15:56 Reply

    Hi,

    This site has been really handy to find, I was recommended it by an Apple in-store trainer.

    Is there a cunning snippet to allow more than one image in a rollover ?

    eg. 3 or 4 or more images ?

    Thanks

    Peter.

  4. matt 8 January, 2011 at 00:09 Reply

    Hey, was wondering if it’s possible to fade between images in rollover, much like the dissolve effect in a slideshow? Also to control the speed of the transition…?

  5. mike 8 January, 2011 at 14:29 Reply

    Hi,
    I always seem to get a frame around the image when I do it. Have tried re-sizing images with no luck. The frame is white and goes around the html snippet. Can you help ?
    Thanks
    Mike

  6. Eric 1 February, 2011 at 14:42 Reply

    Having an issue with the rollover image. When the page loads, the buttons on the page show a broken picture link icon. When you rollover the the button, the rollover image shows up. I don’t want the link to appear broken when the site it opened for the first time, I’d like the rollover image to load automatically as it should. How do I achieve this?

    Thanks!

  7. Fernando 10 February, 2011 at 05:53 Reply

    It doesnt work all the time. Sometimes when you click on the graphic (with the rollover) the page open inside the graphic space instead of opening in the hole browser. What is this? What can I do to solve his problem?

    Though its a great feature!!!

  8. jose 6 April, 2011 at 10:03 Reply

    HI, its all ok with the rollover!!! thanks, the only thing its that i want to be linked to a page of my website, not to other window.

    Thanks!!!!

  9. Clayton 8 April, 2011 at 21:30 Reply

    So the rollover works for me, but the mouse out function does not seem to be working. So when I first come to the page, everything looks normal, then when I rollover the button the rollover works, but when I move my mouse off of the button the rollover does not turn off. The button links to the new page properly so all is good except for the mouse off function.

    Any idea what is wrong here?

    Thanks

  10. Andreas Pfundt 29 June, 2011 at 23:13 Reply

    I have a problem… I have uploaded two images onto my website using Filezilla. I have a Go Daddy account and for some reason when I put:

    function mouseOver()
    {document.rollover_one.src =”http://pfundt.ca/andreaspfundt/rollovers/spiral.tif”}
    function mouseOut()
    {document.rollover_one.src =”http://pfundt.ca/andreaspfundt/rollovers/spiral_rollover.tif”}


    it does not work

  11. Andreas 1 July, 2011 at 02:57 Reply

    function mouseOver()
    {document.rollover_one.src =”http://pfundt.ca/rollover-images/rollover1.jpg”}
    function mouseOut()
    {document.rollover_one.src =”http://pfundt.ca/rollover-images/rollover2.jpg”}


    WHAT AM I DOING WRONG? I KEEP GETTING A (?) EVERY SINGLE TIME I DO THIS. I UPLOADED MY FILE TO THE SERVER. WHAT AM I DOING WRONG?

    I HAVE A GO DADDY ACCOUNT. CAN ANYONE HELP ME? PLEASE?

    • Andreas 1 July, 2011 at 02:58 Reply

      function mouseOver()
      {document.rollover_one.src =”http://pfundt.ca/rollover-images/rollover1.jpg”}
      function mouseOut()
      {document.rollover_one.src =”http://pfundt.ca/rollover-images/rollover2.jpg”}


  12. Vince 7 September, 2011 at 05:00 Reply

    This is very useful! congratulation for this website!

    I have a question: I want to create rollovers on irregular images (triangular, trapezoidal buttons) and they are extremely close to each others, or even overlayed… is it possible to do this?

    thanks

  13. simon menzies 27 September, 2011 at 10:48 Reply

    Pease. I to have this same problem. Great tip but useless if it dont work!
    Where does the code below go??

    iWebUnlimited says:

    That because you have to make sure the link has one of these 3 open options target=”_parent”, target=”_top”, target=”_blank”If you don’t have those then yes, if will open in the widget.

    Fernando says:

    where exactly do I put this in the code?

  14. Vince 29 September, 2011 at 13:18 Reply

    I am using this code and it works perfectly:
    ————————————————————————————————————-



    ———————————————————————————————————————————————
    like the code in this iWeb Tip, you have to replace 4 parts:
    1- http://www.yoursite.xyz/rolloverimg/yourimage(rollover).png with the correct path and name of your rollover image
    2- http://www.yoursite.xyz/rolloverimg/yourimage(normal).png with the correct path and name of your normal image
    3- http://www.your_link.xyz with the web link of the button
    4- again http://www.yoursite.xyz/rolloverimg/yourimage(normal).png with the correct path and name of your normal image

    The images must be inside the server and probably the best extension for the web is .png
    test it and let us know.

  15. bruno 8 November, 2011 at 08:53 Reply

    Is there anyway to combine this “effect” with the Shadowvox effect?! I mean, use a pic for the roll over and when we hit the mouse, the picture goes bigger with the Shadowbox effect ( tip #19)?

    thks

  16. Peter 25 November, 2011 at 23:27 Reply

    Trying to get this to work, a bit ‘simple-minded’, I’m afraid….link to what button?? Am I creating a button, if so, how do I name it, or know what it should be called?? And I don’t ‘get’ where the text with the ‘open target’ goes…please help simpleton!!

  17. gearoid 4 March, 2012 at 12:30 Reply

    I have been looking around and can’t seem to find a solution to my problem and said ill ask, i have tried combinations of the rollover and combining it with a “mail me” java script but can’t seem to get it to work properly. so if anybody knows i would appreciate some advice

Leave a reply

Facebook
Twitter
YouTube