Rollovers within Yola.

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Ok, so I am trying to create a rollover effect within Yola. I have the images and the code for the images. What is getting the best of me is that I don't know where exactly to insert the code. I have been following the advice from a previous Yola forum found here ttp://
However, i m not quite sure when, where or how to insert the code in the "Head" section or the "body" section. Do i need to view the source of the whole page and insert it that way or can i just use the HTML widget? From what i am understanding i should just be able to use the HTML widget. Any advice would be amazing! Thanks.
Photo of bryan


  • 1 Post
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Emmy


  • 5892 Posts
  • 299 Reply Likes
Hi Bryan,

This really isn't my area of specialty, but a few of my colleagues here are pretty good with this stuff. I am going to forward this to them and see if they have any suggestions or help for you. Thanks for your patience.

Photo of diane


  • 1238 Posts
  • 121 Reply Likes
Just use an html widget. You can't access the head section in yola anyway.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Bryan

What appears to work is to paste the "head" code into 1 HTML Widget and the "body" code into another HTML Widget.

If you're looking for an easy rollover code, there is a site that generates the code for a mouseover image for you:

Here is an example site I did using this generator:

Here is what you need to do:

1) Upload the two images you want to use to your File Manager in Yola.

2) Get the URL for each image. The URL of your image is the URL of your site followed by: /resources/filename.gif. For example my two image URL's for the test I did are:
> followed by
/resources/African Daisy.gif

3) Once you have your image URLs head over to the site I have shared with you and type the two URLs in the form provided. (There are extra fields for more images and they allow you to turn your mouseover image into a link if you like. But let's keep it simple for now).

4) When you are done, click "generate script".

5) Copy the script provided. You will get two portions of script. Copy both.

6) In the Sitebuilder, drag and drop an HTML Widget onto your page and paste both portions of script into the HTML editor.

7) Delete the instruction strings that look like this:
`STEP ONE: Insert this code into the HEAD section of your HTML document`
`STEP TWO: Insert this code into the BODY of your HTML document`

8) Click "OK"

You're done. You should now have a mouseover image on your page.

Another option is to use: It generates simple code that you can add your image URLs to and copy and paste into the HTML widget as described above.

Give it a try and let me know how it works for you.
Photo of Dean Kamikaze Mayer

Dean Kamikaze Mayer

  • 2 Posts
  • 0 Reply Likes
Hi There,

I would like to know how to do mouse over on a Homepage image so that it enlarges the image in a smaller window. Is this at all possible?

I look forward to your assistance.

Dean Mayer

This reply was created from a merged topic originally titled
How to do Mouse over on a homepage image to enlarge..
Photo of Dean Kamikaze Mayer

Dean Kamikaze Mayer

  • 2 Posts
  • 0 Reply Likes
Regarding my question above, I wish to only enlarge the sectionof the image that the mouse is over, not the entire image.. one should be able to move the mouse around the image and the the zoom window must follow...

Pleeeeeeeeease help..
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Dean

Perhaps this code would suit your needs:
Photo of quentinmackay


  • 8 Posts
  • 0 Reply Likes
Hi Sanja.

I hope you are still online and helping people out considering the last entry on this thread was posted 7 months ago.
I am relatively new to yola and have built a site that was yolas featured site several weeks ago,
I have always wanted to add a rollover zoom to images and over time have tried every single method I have read about including your suggestions, followed your links, generated codes, etc and still I am unable to get a result, it always comes up blank.
I am not html conversant at all so I am struggling to achieve this.
At the moment the only way I can allow a zoom is if people click the image which takes the browser to another page with a larger image....then back again.
Please help an HTML div!

any (very simple) suggestions welcome

Thank you

Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi QM,

I have responded to your post here: