mouse over effects how?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
Hi guys, can anyone help me making a mouse over image change. I don't need a slide show just before/after style mouse over.
Photo of 4shaws

4shaws

  • 8 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi 4shaws

I found this site that generates the code for a mouseover image for you:
http://www.htmlbasix.com/mouseoverima...

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

Here is what you need to do:
1)Upload the two images you want to use to your file manager in SynthaSite.
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.synthasite.com followed by
/resources/African Daisy.gif
and
/resources/Sunflower.gif
3) Once you have your image URL's head over to the site I have shared with you and type the two URL's 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 SynthaSite 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.

Give it a try and let us know how it works for you.
Photo of annoyer707

annoyer707

  • 294 Posts
  • 7 Reply Likes
cool i try it
Photo of 4shaws

4shaws

  • 8 Posts
  • 0 Reply Likes
thanks Monique. I saw that script but didn't know how to insert between the head and body tags as it says on the instructions.

I have however found this that works as well and doesn't require scripts.

http://www.cs.runet.edu/~pac/mouseover/

knowing the image url will help though, thanks for that. Perhaps i could make a suggestion for future updates to try and include a URL viewer within the file management section.

Thanks again

Richard
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Thanks for the tip. It is nice to have as many alternatives as possible. I will pass on your suggestion about the URL viewer for the file manager!