iWeb Tip #13 – Rollovers in iWeb
It’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">
I simply couldn’t go away your web site prior to suggesting that I actually loved the standard info an individual supply on your visitors? Is gonna be again steadily in order to check up on new posts
ROLLOVER HELP
I’ve got the rollover script working, but it’s not completely what I want or expected.
I’d like the initial thumbnail (image 1) to be a typical image. When one rolls over with a mouse, a text bar should pop up at the bottom (image 2). Once the mouse leaves the image, I would like it to return to the original (image 1) with the text showing at the bottom. The first two steps work perfectly, but the text remains after rolling the mouse off the image.
Suggestions?
SAMPLE SCRIPT
function mouseOver()
{document.rollover_one.src =”http://www.m-osa.com/rolloverimages/berlin button-on.jpg”}
function mouseOut()
{document.rollover_one.src =”www.m-osa.com/rolloverimages/berlin button-off.jpg”}
I am using PNG’s in this script. It works great but when I open the website in iOS devices and push the link that’s on a PNG (into my menubar) the PNG dissapears when I go back to the previous page (where I pushed the link).
Does anyone know a solution?
The roller over is excellent, but how can I have an image popup when someone rolls over a text link?
I was not familiar with the term “footprints.” Now, I can surmise that footprints will help me find relevant information and attract more visitors to my blog.
Hi There,
Thanks for the great post. Very helpful.
I am trying to make the pages link to other pages on my website. That is … a roll over on TV.html should link to the page Radio.html.
As the pages are on the same website, instead of using the entire html code listed above – that is “, I am using the HTML shortcut of “..//
The problem is that I keep getting a series of //// in the address bar of my website when I use the rollover links.
To see what I am talking about, visit http://www.pineapplemedia.com.au. If you don’t see the problem, it’s because someone has fixed it, but as of now, it is causing a lot of angst as we are keen to start promoting the website.
Any advice? what am i doing wrong?
Thanks so much,
Richard