Rollovers on Yolasite

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I need help AND FAST I designed a site on yola and it requires I place a rollover on the site HOW do I do this on yolasite? I have to have this done by 11/23/2010 PLEASE HELP ME you can post or send info to jckendall1@hotmail.com Thank you Joyce K
Photo of joyced.kendall

joyced.kendall

  • 1 Post
  • 0 Reply Likes
  • nervous/perplexed

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Joyced.Kendall

This is a site that generates the code for a mouseover image for you: htmlbasix.com/mouseoverimages.

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:

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 "Save".
9. 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 a simple code that you can add your image URLs to and copy and paste into the HTML Widget as described above.

Please let me know if you have any trouble with this.
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Hi Sanja.

I hope you are still online considering the last entry on this thread was posted 11 months ago.
I am relatively new to yola and have built a site which was yolas featured site several weeks ago, thegorgeouscompany.com
I have always wanted to to add a rollover zoom onto 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

QM
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

I am still here :)

There's a couple of things here. First of all, you said that you wanted a rollover zoom? The code above is simply a rollover - it doesn't zoom in on any images. If this is something you're wanting, then you may want to consider taking a look at these links:

http://www.dynamicdrive.com/dynamicin...

http://www.dynamicdrive.com/dynamicin...

http://www.dynamicdrive.com/dynamicin...

All of these require you to upload to Silver as they use .js files which is only allowed on the Silver packages.

Whether you decide to go with the above or with the simple rollover images, please be sure that your image URLs are correct. This may be why your images not showing up.

You may want to consider using our Picture Gallery Widget as well. This allows you to click on a thumbnail version which opens up to a larger image on the same page. Please see this tutorial: Using the Picture Gallery Widget.

If you still have trouble with this, please share your site URL with us and one of us can try to assist further.
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Hi Sanja

Thank goodness you are still around :)

I have a silver subscription and I have tried to use one of the good links that you provided but still no luck.

http://www.dynamicdrive.com/dynamicin...

The code I am inserting is below, I guess I am right off the mark and it doesn't show the image or do anything!!! :(..... it wont even seem to find my image in the file manager, I have tried to insert /resources/ but still no luck.

Please help!



Thank you QM



Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

Please can you let me know on which page you're trying to add this?

I'll try to see where the issue lies.
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Hi Sanja

I have created a new page in my area to try it, are you able to access this, it is called lightbox test.

QM
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi QM,
Sanja just signed off for the day, however, I know she is excited to assist you further with this. I will refer your request to her. Please allow 48 hours which will allow Sanja to review this and get back to you. Thanks!
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Thanks Brianna, I'm excited to get it resolved! QM
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

I've been trying to work on this. This may take me a bit of time. Thanks for your patience.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

I just wanted to let you know that I'm still trying to figure this out! I hope to have this resolved by tomorrow.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

Thanks so much for your patience. I apologize that I was not able to get back to you sooner. I have finally got this working for you. I'm not sure if the code was perhaps not copied correctly the first time and if the image URL was incorrect. Please take a look at your lightbox-test in your Sitebuilder and click on the preview page to see this working.
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Hi Sanja

Thx so much for your perseverance, you are a lady and a genius! it adds a great feature into the website. I just wish Yola had the possibility to copy elements, codings, etc, across all pages, perhaps one for the future?

I also mentioned to support about making the heading with a home link, this is pretty standard on a website and is not available on this right now?

Can I ask one more thing; With the coded category headings that I have put in is it at all possible to make these come up in the centre in all browsers or is it just the nature of the beast that they all display differently??? I use an ipad, mac and pc and they all display differently.

Thanks very much again!

QM
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello quentinmackay,

We do have a "Save page as" feature which allows you to duplicate the page. Please see this tutorial.

If you wish to make a link on your page heading, you can click on "Edit heading". In the box where your text is for your heading, you can add this code:

<a href="http://yourlinkgoeshere.com">your text goes here</a>

Various browsers will interpret codes differently so you will see some difference between the browser. If you're seeing drastic differences, this could be indicative of incorrect or bad coding on your site. Could please share an example of this. I'm not sure if I fully understand what you're describing.
Photo of quentinmackay

quentinmackay

  • 8 Posts
  • 0 Reply Likes
Hi Sanja

Thanks for your answers, in reply to your points:

Yes one can save the page, but when you have a lot of separate items for sale with some page elements that are the same and some that are different, it would be handy to be able to copy and paste separate elements so one does not wipe over different information for a different product all the time.

I am using the template CleanSlate, as far as I can see it is not possible to enter any code into this heading. If I go to any website I automatically assume clicking on the heading/logo/icon will take me directly to the home page, on this template it doesn't appear that I can enable this hence I have had to put the TGC HOME in the menu.

The changes in the browsers are not drastic but there is no consistency across them all. I created the html by copying and pasting and patching so it is probably really scotch taped together. You are able to access my site area, can you take a look at it in the top of a page, I will create a new page 'Index Menu Test'.

Thanks again

QM
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi quentinmackay,

I understand now what you mean. I can see how this would be a useful feature. I would be happy to pass this along as a feature request to our Product Team to take under consideration.

As for the last two points, please leave this with me for a day or two and I will see what I find and if I'm able to resolve these issues for you.