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?!
Hey Garry,
That is actually quite a good idea for a tutorial! Ill be working on it right now
Max
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!
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
Max
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?
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
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
So you want to move your mouse over an image in one place and then get the enlarged image in another place?
Max
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
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
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
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
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.
Sorry Alexander, with this type of rollovers it is not possible.
Max
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”
}
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
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
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
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?
yes you can fix this – but as said, no support via comments here!!!!!!!!!!!
to the img part add this:
style="border:none;"
Max
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
Singless, I actually don’t know how I would do that. Try posting in a some kind of web-forum. Sorry
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*