How-to

How to create rollover buttons Part 2

rollover2

…This time it’s personal.

Sorry, that sequel tagline doesn’t work at all does it?

Anyway, remember rollover buttons? Well, they’re back – and bigger and better than ever before.

Created entirely within the HTML snippet widget, this new rollover effect lets you use whatever images you like as a source and link to any page or external website.

And all you need is this tiny bit of code:


<script language="javascript1.1">
<!--

d12=new Image(300,300)
d12.src="URL OF FIRST IMAGE"
d42=new Image(300,300)
d42.src="URL OF SECOND IMAGE"
//-->
</script>

<script>
<!--
function filter(imagename,objectsrc){
if (document.images)
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>

<a href="PAGE URL TO LINK TO" target="_top"
onmouseover="filter('d104','d42')"
onmouseout="filter('d104','d12')">
<img src="URL OF FIRST IMAGE" name="d104" border=0 width=300 height=300></a>

Shall we begin?

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)

imgur1

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

imgur2

Upload your images.

Note: You can upload multiple images in one go.

imgur3

And click ‘Start upload’.

imgur4

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

imgur5

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.

So this:

<script language="javascript1.1">
<!--
d12=new Image(300,300)
d12.src="URL OF FIRST IMAGE"
d42=new Image(300,300)

Becomes this:

<script language="javascript1.1">
<!--
d12=new Image(300,300)
d12.src="<strong>http://i.imgur.com/YaHSHKd.jpg</strong>E"
d42=new Image(300,300)

All good?

Cool, now copy the link of your second image and paste that url into the URL OF SECOND IMAGE space.

d42=new Image(300,300)
d42.src="<strong>URL OF SECOND IMAGE</strong>"
//-->
</script>

Scroll down to…

<a href="PAGE URL TO LINK TO" target="_top"
onmouseover="filter('d104','d42')"
onmouseout="filter('d104','d12')">

Add the URL of the website page you want this rollover to link to.

And add the URL of the image you want to be visible for when someone first visits your site.

<img src="URL OF FIRST IMAGE" name="d104" border=0 width=300 height=300></a>

Finally, log in to your website, add an HTML widget to your page through ‘Insert’-> ‘HTML snippet’ and paste the code into the widget through the ‘Editor’-> ‘Set up’.

mailchimp12

Save, switch to view mode and get rolling over that new button.

imgur6 Build a free website today

Andy Siddons
Content Writer

More posts by this author


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

  1. Rebecca Hahner

    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?

    Reply
    • Steven

      Hi Rebecca,

      Problems usually occur due to formatting errors in the code – html can be quite picky :)

      I would recommend you use a text editor such as notepad to keep all of the text / characters regular. Check that the ‘ and ” both appear like that, and are not styled quotation marks.

      Cheers,

      Steven

      Reply
      • Rebecca Hahner

        Hi Steven,

        Unfortunately I already checked and made sure all the ‘ and ” were correct and it still didn’t work!

        Rebecca

        Reply
        • Steven

          Hi Rebecca,

          If you place your code on your site (perhaps on a page hidden from the menu) and let me know I will take a look.

          Cheers, Steven

          Reply
  2. Paul

    Still no luck for me. When I view I just get a small black box with a white cross. At least when I click it, it goes to the right page. One small step…

    Reply
    • Steven

      Hi Paul,

      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.

      Cheers, Steven

      Reply
  3. Antone

    Doesn’t work for me either.
    I open up ‘Insert > HTML Snippet > Setup’ go to paste the code and nothing, nothing pastes it just duplicates another ‘HTML Snippet’ box/window.

    Shame, would be a nice little feature too.

    Reply
    • Steven

      Hi Antone,

      You need to ensure the cursor is shown in the setup text box before pasting.

      Cheers,

      Steven

      Reply
      • Antone

        Hi Steven,

        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.

        Reply
  4. Kristian

    Really struggling! would be a fantastic feature too as I think that’s what moonfruit is missing…

    I’m getting the dreaded broken image icon, but like Paul says it does redirect to the correct page…

    using Imgur as suggested..

    Reply
  5. Robert Mottershead

    I’ve been trying to get this to work for weeks. Something is not right… Got as far as displaying the first image and the link works but no rollover action. This is the code, any ideas??


    Reply
  6. Robert Mottershead

    this code doesn’t work it only loads the second half i.e first picture and the homepage link. The actual magic of flipping image is not there

    Reply
  7. june

    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?

    Reply
  8. jan lewis

    I’m sure this is a stupid question but why can’t the rollover, link to an image already in the gallery? Why do they have to be housed somewhere else?

    Reply
  9. Brandon

    I got the main image to appear by going through and deleting and retyping all ” quotation marks. It looks like “past as plain text” didn’t do the job. Still dont get a new image on roll over

    Reply
  10. Liam

    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

    Thanks for the post though, exciting to get this into Moonfruit!

    Reply
  11. Amita Parikh

    Hi all,

    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.

    Reply
  12. Kendra

    Sorry…cut me off.

    Still not working. Now it just shows the first image, not the second and when you click on it, it opens the page in the snippit instead of a new page.

    Reply
    • Amita Parikh

      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

      Reply
  13. John

    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.

    Thanks

    John

    Reply
    • Amita Parikh

      Hi John,
      Sorry for the delay. Unfortunately I don’t think it’s possible to add an email link instead of an external URL – sorry for any inconvenience.

      Reply
  14. Paul

    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.

    Reply
  15. JB

    I hate to pour cold water on such good intentions, but here we have another example of Moonfruit passing the BUCK !

    This and other functions are the sole responsibility of
    MOONFRUIT.

    Maybe we should have a system where we only pay for the functions available ?

    That would focus their minds on delivering what people actually want !

    Reply
    • Steven

      Hi JB,

      We also have rollover functionality available using the built in tools, you can read more in part 1 of the post (http://www.moonfruit.com/blog/how-to/create-rollover-buttons/).

      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.

      Steven

      Reply

Add a comment to Kendra

  • (will not be published)

More posts by this author