OK. First you’re going to need to select two images to use in the rollover and upload those to a free online file sharing service like imgur.

Note: You can use various image sharing services but we’ve found imgur to be quickest, easiest to use and of course free.

(If you don’t already have an account, quickly create one for through www.imgur.com)

Once that’s up and running, login and click the ‘Upload images’ button on the top tool bar.

Upload your images.

Note: You can upload multiple images in one go.

And click ‘Start upload’.

Then, when they’ve both uploaded, copy the ‘Direct link’ URL for each.

Right. Let’s go back to that code.

Note: We recommend pasting your links into an application such as Text editor or Notepad first, and then copying the whole thing into the HTML snippet widget. It will not work if you copy and paste it into a programme like Word.

Take your first image URL and paste into the space that currently says URL OF FIRST IMAGE.

29 Responses to “How to create rollover buttons Part 2”

Hi, I’m really having trouble getting this to work. I’ve used two different hosting sites (imgur and photobucket) and followed the instructions exactly, but I still can’t get the images to appear as the button. Is anyone else having this problem?

I tried using Box but only managed to get it to work once – it seems to provide secure links which stop the image from being shown in the browser. Give it a shot with imgur and see if you have any further luck.

While that would be an easy fix, unfortunately it is still not the problem.

The cursor shows, blinks (as it does) and when I go to ‘cmd + v’ = paste (for Mac) even through selecting paste on moonfruit menu itself my device makes that horrid sound it does when it thinks I’ve given it an empty command.

It doesn’t work! It might be because of your vague description of where to add the URL of the website you want to link to and that whole para is confusing? All that happens to me is I see nothing and when I rollover it opens my own website in a new window in editing mode?

I’m wondering if it’s a common error because the font on this page doesn’t translate properly across to Notepad. Here’s a screenshot of my HTML code. I have literally copied all the links I need, and not touched the quotation marks at all. Could this be the issue?http://i.imgur.com/YGAEryr.png

Really sorry it’s taken us so long to fix this. The original author is no longer with us. It should work now: please copy and paste the whole code block above into Text Editor or Notepad first. Then, insert your image links and target URL, then copy and paste the whole thing into the HTML snippet widget. It won’t work if you paste the code into a programme like Word first. This has been updated in the post, too – so hopefully the instructions are more clear. Let us know if you run into problems and we’re sorry again it took so long to fix.

Hi Kendra,
Would you be able to send us a support ticket, including the links to the 2 image URLs and the target URL within your message? Please also specify that you were asked to send the information in by myself (Amita) and someone from the team will then pass it on to me and I will get back to you.
Thanks,
Amita

I get the images to appear just fine but i’m interested in adding an email link instead of an external website and can’t figure out how to do this. i’ve tried pasting in mailto:someone@example.com into the href link part but can’t get it to work. Any advice welcome.

Just the first image for me too. Wish I’d read the comments first because I sent enough time putting this together just to find out that it isn’t working for tons of people. I am using TextEdit to edit and paste on a mac.

However, we just wanted to make a post to help users do something a little different that they had not been previously able to do. Its the same code that would be used if you were building a site from scratch, so something a little educational too

We’ve had a busy few months working on a lot of our backend services but I assure you we’ll be working on more forward facing features for release this year. Keep an eye on the blog for the latest information.