If you need support from Yola please contact us via support@yola.com or make use of our live chat service! We are working on a new approach to community-based support and during this transition period we are not adding any new threads to this forum. Many thanks to everyone who has participated over the years and we look forward to unveiling a new peer-to-peer support system soon!

Rollovers within Yola.

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://forum.yola.com/yola/topics/make_letters_glow_on_hover
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.

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.

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:
> http://mouseover.yolasite.com followed by
/resources/African Daisy.gif
and
/resources/Sunflower.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`
and
`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: www.cs.runet.edu/~pac/mouseover/. It generates simple code that you can add your image URLs to and copy and paste into the HTML widget as described above.

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...

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, thegorgeouscompany.com
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!