Mouse Rollover Effect

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Hello!

How do you make a "mouse Roll-Over Effect" On Yola.com? What I mean by this, is how do you make there be an image on your site, but when you roll your mouse over onto it, it changes to another one? I've tried to Google it but all of the options were not fit for Yola. Any Help?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
  • Cool.

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello

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

Here is an example site I did using this generator: mouseover.synthasite.com.

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

Give it a try and let me know how it works for you.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Thank you, Thank you, thankyou!
Photo of Holly Miller

Holly Miller

  • 4 Posts
  • 0 Reply Likes
Ive tried this a couple of times, and it doesn't want to work for me. It keeps coming up with a blue box with a question mark inside, what does that mean? help please?
Photo of dante

dante

  • 82 Posts
  • 15 Reply Likes
He Holly try this change picture with yours

i couldn't add code in here look on webpage code is there to next to picture

see ex: http://shopp.yolasite.com/test4.php
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for your help on this Dante!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
@ Holly - please let us know if Dante's suggestion helped. If you're still having trouble, can you either post your URL so that we can take a look at what's going on or you can email support@yola.com. We can help you further from there.
Photo of Holly Miller

Holly Miller

  • 4 Posts
  • 0 Reply Likes
Thankyou Dante, I can actually see my image, Im soo happy, when i roll over and it changes great!, however it will not change back to the original image, ill have a play around and see if I can resolve it. Thankyou Sanja I may take you up on that offer if I get stuck. Thankyou everyone again!
Photo of Holly Miller

Holly Miller

  • 4 Posts
  • 0 Reply Likes
Worked it out! I was missing an ' at the end of my mouseout image. Thankyou so much for the help! Could I ask another question Dante, if I wanted to make my rollover a link to a new page how could I do that? Cheers
Photo of dante

dante

  • 82 Posts
  • 15 Reply Likes
Check new code please. I uploaded it for you. I am trying to add my code on here. But its not work i don't know how to do it. So i add it on my wepage go there and try it again. I hope it work

http://shopp.yolasite.com/test4.php
Photo of Holly Miller

Holly Miller

  • 4 Posts
  • 0 Reply Likes
Thankyou Dante, works perfectly!
Photo of dante

dante

  • 82 Posts
  • 15 Reply Likes
I'm glad it work
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
I am looking to do this now to my site, has anything easier been developed in the past 3 years?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Chris, not from Yola's side, I'm afraid.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Ok.....how do I control the size?.....the photos are covering my entire site...

also, do I put the HTML is any spot, or in the same widget as the original photo?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Can you please post your URL and the page you're talking about?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
In general I can tell you that you will need to resize your image files beforehand using an image editing tool, such as Pixlr.com. Once you saved the resized version of your images to your computer, upload them to your Yola File Manager.

You must put the HTML Code Widget to the place of your page where you want the images to display.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Hey Stefan,

Ok, so I resized the photos to about 1/4 of their size and re-uploaded them (with the same name), but they are still HUGE.

The site is http://www.espetaculosa.com/, but I dont know if that will help you much because I am not going to publish the site with the pictures the way they are...
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Got it! I followed the tip from Dante, much easier!
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Tried both Dante's option and Sanja's original steps. All sounds easy enough and i feel like an idiot being the only one not able to get it to work. If a Yola staff member would have time to have a look at this for me that'll be greatly appreciated. Im trying this on this site http://beachboutique.yolasite.com/ Please ignore the design, its horrible at this stage but still at the beginning process of creation ;)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Take your time Saskia. Really no rush :)
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Glad there was no rush, i was just excited to find out what i did wrong that i thought lets send it, but ended up going out for lunch and stuff. Anyway, here are the codes. Thanks again for taking a look!

1. Sanja's Method:




2. Dante's Method:

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Nothing posted.

Just copy and paste your codes. Need to wrap them in tags as explained in the (some HTML allowed) link at the top of each Reply to This Topic in this forum.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Ah yes off course sorry ... will try again
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Sanja's Method:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http//beachboutique.yolasite.com/resources/Home/Hat1.png";
staticImage1 = new Image();
staticImage1.src = "http//beachboutique.yolasite.com/resources/Home/Hat2.png";

// End -->
</script>

<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http//beachboutique.yolasite.com/resources/Home/Hat1.png" border=0></span>



Dante's Method:



<a href="http://www.http://beachboutique.yolasite.com/"><img border="0" src="resources/Home/Hat1.png" onmouseover="this.src='resources/Home/Hat2.png'" onmouseout="this.src='resources/Home/Hat1.png'"> </a>