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.
- 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.
- 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>
- 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.
Yay! Finnaly
Great tutorial and they are better than ever! Perfect for little dummies like me. THANKS
Great stuff!…just what I needed to get my confidence up. Now, off to PayPal to learn if I can integrate a shopping cart?!
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
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!
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?
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
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
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
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.
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”
}
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?
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
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?
slight issue works fine for windows yet, on a mac has strange symbols above the name any ideas ? and the roll over dosent work
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
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!
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.
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.
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
Hello I sent you a message yesterday and we were able to figure it out, but now we seem to have the “blue underline” problem. You said it had something to “style=border” part but that isn’t making any kind of difference. You have any idea what it could be? Thanks
Fantastic tutorial!
One issue though… my new website is up and running with lovely rollovers, but sometimes they disappear when they are clicked on and you have to refresh the page to see the rollover again.
Any ideas what I’ve done wrong?
Hi there! I can see the image on my iweb09 however when I publish and view it on my website the whole rollover image disappears! Yelp!
Thanks for the great tutorial, but just a quick question:
I’ve managed to create the rollover effect (although each rollover intentionally doesn’t link to the next page yet), but the items don’t actually load until I roll over them first. Any suggestions?
Hi, I tried emailing you asking for help, but never heard back. Thought i’d write here.
I’ve solved most of my troubles using this script in iweb 08, but lately and only since making additions to my pages, that the rollovers are no longer loading on machines using IE7.
In previous versions of the site, they worked just fine. Any ideas? do I need to reset all the HTML snippets again? Any ideas?
Thanks again for the great software (user and donator of iMap)
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
GREAT tutorial. I tried other scripts that didn’t work. HOWEVER (there’s almost always a however) when I click on this rollover script it takes me to the correct webpage but when I click back to a previous page my QT media won’t load. It loaded fine until I click the rollover snippet then I get the QT-? icon even when I clear the cache and reload the page.
I’d get it. Please tell me what might be happening.
Max,
I see this forum and comments re: integrating rollovers in iWeb…but I can’t find the tutorial so I can do it. Is it archived somewhere?
I just keep going in circles and coming back to this page.
The html is lost on me without knowing what code I need to include.
I can’t even get my photos once I’ve converted them to png via iPhoto export to stay png when I move them to iWeb…they keep reverting back to jpg(s) making them too large and not very appealing rather than a rollover effect.
Please help?
El Jaye
Hi,
I don’t whether anyone can help me on here. I am thinking about using the Rollover script quite extensively on my pages.If I were to use it would I have to keep re-inserting it every time I made a change to my pages?
Many thanks in advance.
Paul
Hey, Just wondering what happened to the iWeb 06 tutorial?
Watched your tutorial just now. Before I try the sample code I had a question about how to publish when I am hosting the server (FYI, I’m a novice). I’m confused about the “URL” in the line : “http://url/rollover-images/rollover-image”. Since the website is on my machine do I point it to a directory vs. upload ie: if my current website (when published by iweb) is located in “HD/library/username/documents/site” shouldn’t that be where I point to pick up the images? Thanks in advance.
Trying to do a rollover with two size images, first 100×20, second 568×60. The first image will be at the top of the page and the second will be in the center. I want to click on the first image and the the second opens up on the same page but in the center. You would not call it a rollover. I tried using hyperlink but it take me into a new page. Thanks for your help
Your tutorial is great and I have watched it and followed it to the nth degree but my rollovers are not happening. I created my rollover in Image ready and saved it as optimized and then followed your directions. I tested just the rollover in the preview after making it, it worked. The initial image shows up in iweb and when I publish nothing happens. Please help me. Thanks
Thank you so much Max. Have been trying in vain to find out how to do this. Your tutorial is just great. I’m getting to work on it right now.
Thanks
Great tutorial. HTML snippet… what a thing. I’ve coded my own pages before, but want the speed and relative simplicity of iWeb – and ease of updating! All I needed were some rollover images to really get the new design, er, rolling. I spent hours trying to figure this out, and your tutorial gave me the answer in just minutes. Why can this not be a little more obvious to iWeb newbies like me? Thanks!
[..] A bit unrelated, but I really liked this blog post [..]
Hi Max,
I love your tutorial, you have no idea how nuts I’ve been going over these rollovers and you are the only one who’s code works like it should…
Can I ask for your help though, I don’t know why this is happening, but this only applies to two of the rollovers, if you rollover on my site http://www.lunazstarr.com, the “about” or “folio” button up on the top right, the image rolls-over like it should, however when I click on either button, the image changes and it doesn’t function, the blog and contact buttons seem to do exactly what I want them too.
Can you give me some advice.
Thanks!
LS*
Dude, love your blog. I think your work and your style of helping people is really rare. Thanks. That said, i have been trying to push iWeb to its limits and enjoying the ride (let me know if it’s worth a damn, if you have time).
I want to make a rollover menu that cascades (a la Flash) a slide-out thumbnail tray when moused over. I think i can do it with a snippet i found (like the rollover atop right most pages that reveals “about” under “phabriq”. But what i want to really know is, can i code this so the submenu (http://phabriq.com/home) is still clickable? in other words, is the rollover that i did for “about”, using two static graphics, the limit of that code?
thanks?
oops. that link is http://www.phabriq.com/phabriq/home.html
I re-read my initial question and found it lacking. Try this angle: can i make an existing menu link (http://www.phabriq.com/phabriq/home.html) rolloverable, so that each will reveal a submenu of thumbnails?
And when that new menu is visible, can the menu links still be rolloverable (and still color changeable on rollover) and clickable?
Hi,
I am a beginner web designer, still using iWeb to create a site for my disco company. I have been able to get the normal image to appear on the page, but it will not change when I rollover it. The link does work.
Is there a mistake in the code that I do not know about? Or am I doing something wrong.
Michael
Hi, could you explain what I insert in the “http://link.com” and the alt=”Link Title” sections. My page is in me.com. Thanks!
Thank you for this tutorial!
It was clear. Thank you for instructions. One main tool I use to make sure the rollover image and normal image match is XScope… this is a ruler that lets you the dimensions needed so it looks exactly like how you want it on your webpage.
Then I enter these dimensions when using photoshop.
Very helpful tutorial. However, when a page is first loaded there is a question mark over the normal image. Once the mouse is moved over this image, the question disappears and doesn’t appear again, no matter how many times the mouse is moved over or away from the image. But the “?” reappears whenever the page is reloaded. I’m using iWeb 09 and Safari and Firefox browsers on MacBook Pro. Any suggestions?