mouse over button code for usage

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I was wondering if you had a snippet of code which would make the buttons at the following site function with the system and if so where would I place it?

I have the buttons temporarily placed here with the code...

http://honeybearplayhomes.synthasite....

Greatly appreciate it because I would much rather use mouse over buttons then simple images and I quite like these...

Thanks
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 10 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
This is a 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.

The first portion of the code should go in the HEAD section of the HTML but it worked for me as described above.

Another option is to use: http://www.cs.runet.edu/~pac/mouseover/
It generates simple code that you can add your image URL's to and copy and paste into the HTML widget as described above.

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

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
This looks really cool, thanks Monique
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Monique

Thanks for your input of the generator... It was very useful but I will say that let everyone know that if you have more than 6 buttons to create they need to copy the provided codes and paste to Word to edit for both sets of 6.

If your have for instance 12 buttons to create you need to do the same as the first 6 for the second set and then paste to Word to edit the second set and in the place of the numbers 1 - 6 put 7 - 12 (Second set only)

1 replace with 7
2 replace with 8
and so on

Then add the additional codes just after the the highest digit of the previous set (Keep in mind the code is split top and bottom and make sure that you put the top codes from the second set generated just after the top half of the first set and then the bottom codes from the bottom set place just after the highest digit of the first sets last group.

It's late I hope that made sense...

See below for example.

Also, the oddity about that generator and its use on Synthasite is that if you were to add a mouse over picture enlarger you would need to number it beyond the highest last number from your other features. Which means that there cannot be two 1's or two 2's and so on from the generated code on one page.

Take a look... Oh yeah mouse over the 2 cutout images

I really like the buttons I found and think they fit nicely and I don't have to rename anything to get rid of the blue underlines...

http://honeybearplayhomes.synthasite....

Thanks again Hun...

Okay so i had to delete chunks out of all the following to make it stop showing my buttons (which was funny to see my new buttons in the forum) Anyway I put it here just to demonstrate the need to arrange the added codes in this way to make it function for people with larger menus than 6 buttons

The buttons I found here...

http://cooltext.com/

ScRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://honeybearplayhomes.synthasite....
staticImage1 = new Image();
staticImage1.src = "http://honeybearplayhomes.synthasite.....

loadImage2 = new Image();
loadImage2.src = "http://honeybearplayhomes.synthasite.....
staticImage2 = new Image();
staticImage2.src = "http://honeybearplayhomes.synthasite.....

loadImage3 = new Image();
loadImage3.src = "http://honeybearplayhomes.synthasite.....
staticImage3 = new Image();
staticImage3.src = "http://honeybearplayhomes.synthasite.....

loadImage4 = new Image();
loadImage4.src = "http://honeybearplayhomes.synthasite.....
staticImage4 = new Image();
staticImage4.src = "http://honeybearplayhomes.synthasite.....

loadImage5 = new Image();
loadImage5.src = "http://honeybearplayhomes.synthasite....;
staticImage5 = new Image();
staticImage5.src = "http://honeybearplayhomes.synthasite.....

loadImage6 = new Image();
loadImage6.src = "http://honeybearplayhomes.synthasite....
staticImage6 = new Image();
staticImage6.src = "http://honeybearplayhomes.synthasite.....

loadImage7 = new Image();
loadImage7.src = "http://honeybearplayhomes.synthasite.....
staticImage7 = new Image();
staticImage7.src = "http://honeybearplayhomes.synthasite.....

loadImage8 = new Image();
loadImage8.src = "http://honeybearplayhomes.synthasite....;
staticImage8 = new Image();
staticImage8.src = "http://honeybearplayhomes.synthasite....;

loadImage9 = new Image();
loadImage9.src = "http://honeybearplayhomes.synthasite....;
staticImage9 = new Image();
staticImage9.src = "http://honeybearplayhomes.synthasite.....

loadImage10 = new Image();
loadImage10.src = "http://honeybearplayhomes.synthasite.....
staticImage10 = new Image();
staticImage10.src = "http://honeybearplayhomes.synthasite....;

loadImage11 = new Image();
loadImage11.src = "http://honeybearplayhomes.synthasite....;
staticImage11 = new Image();
staticImage11.src = "http://honeybearplayhomes.synthasite.....

// End -->

ref="http://honeybearplayhomes.synthasite..... onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">


href="http://honeybearplayhomes.synthasite.... onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">


href="http://honeybearplayhomes.synthasite...." onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">


href="http://honeybearplayhomes.synthasite.... onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">


href="http://honeybearplayhomes.synthasite...." onmouseout="image5.src=staticImage5.src;">


href="http://honeybearplayhomes.synthasite..... onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">


href="http://honeybearplayhomes.synthasite..... onmouseover="image7.src=loadImage7.src;" onmouseout="image7.src=staticImage7.src;">


href="http://honeybearplayhomes.synthasite...." onmouseover="image8.src=loadImage8.src;" onmouseout="image8.src=staticImage8.src;">


href="http://honeybearplayhomes.synthasite...." onmouseover="image9.src=loadImage9.src;" onmouseout="image9.src=staticImage9.src;">


href="http://honeybearplayhomes.synthasite...." onmouseout="image10.src=staticImage10.src;">


href="http://honeybearplayhomes.synthasite...." onmouseout="image11.src=staticImage11.src;">
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
That is good to know, thanks!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
arggg this code is not IE friendly..The buttons do direct to the correct locations but the mouse over function only works with Firefox...

As well the mouse over of the images don't work in IE either

Well can't win them all huh???
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
They do for me in IE7. I hope some other people will check in IE for us and tell us what they find. The version of IE is quite important as well, so please tell us what version you are on.
Photo of stuart

stuart

  • 32 Posts
  • 0 Reply Likes
Hi Ed

Thanks for your help trying to sort the mouseover buttons on www.codnor.info, unfortunatly it doesnt seem to work. When I pasted the code into the HTML box and tried to save it, an error message said there was a problem with the code, but it allowed me to continue. I saved the changes but I think the problem is with IE6. the link works but mouseover does'nt.

Has anyone succesfully created MouseOver buttons using IE6? if so please help!!

Regards Stuart
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Stuart I put that code I generated in a widgetbox widget and it worked flawlessly. I think that you need to download Firefox and use it as your editing browser of choice for Synthasite

Give firefox a shot before you give up
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
don't give up yet my friend I am working on something for you right now Okay
Photo of stuart

stuart

  • 32 Posts
  • 0 Reply Likes
Thanks Ed!

I'm waiting in anticipation, hope you can sort it.
Regards Stuart
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Stuart

I found the problem and pasted the fix on a new site for your fix. Please let me know when you copy it so I can delete the site... In my email to you the code got all messed up because the email editor automatically read the code as a link. That is why it didn't work on your end.

http://stuartsfix.synthasite.com/

Good site building
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thank you for being so willing to help out fellow SynthaSiters, ed!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
No worries...

Even if I'm in the middle of something I can always spare 10 or 20 minutes here and there. Sometimes hours and hours but who is counting??? ;)

Been real busy with final touches. I had to change the bear because my focus group said so (lol) I am sure that is the final for quite some time. What do you think Ruth?

I have been doing page load times and for all that content I am still within nice limits. Just amazing I think. A lot of trial and error that's for sure.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Looking good, ed!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Just want to try something HTML here.
If it doesn't work - Well then I just bumped this thread which is good anyway.





Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Ruth,

How did bobo the scholar get that scroll box with the "code that does not get interpreted"
into the forum. This could be very handy for other users to just copy snippets of code
straight from get satisfaction?
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Hi Boomer,

He wrapped the code so that Get Satisfaction doesn't try to intrepret it. So at the beginning of the HTML code you would write <!-- and then at the end -->

People will need to remember to delete the 'wraps' though.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
But how did he make is scrollable?

Is there a snippet of code that we can wrap around our
text or html to create a scroll box.
I tried to use the above but it didn't work.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes

<!--
<TEXTAREA cols=40 rows=10>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

loadImage1 = new Image();
loadImage1.src = "http://yoursite.synthasite.com/resources/BlueOver.gif";
staticImage1 = new Image();
staticImage1.src = "http://yoursite.synthasite.com/resources/Blue.gif";

loadImage2 = new Image();
loadImage2.src = "http://yoursite.synthasite.com/resources/GoldOver.gif";
staticImage2 = new Image();
staticImage2.src = "http://yoursite.synthasite.com/resources/Gold.gif";

// End -->
</script>

<a href="yourlink" onmouseover="image1.src=loadImage1.src;"
onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://yoursite.synthasite.com/resources/Blue.gif"
border=0></a>

<a href="yourlink" onmouseover="image2.src=loadImage2.src;"
onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://yoursite.synthasite.com/resources/Gold.gif"
border=0></a>
</TEXTAREA>
-->
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok I think I'm getting it now
Hope you don't mind me playing around.
Photo of APOLO69

APOLO69

  • 87 Posts
  • 1 Reply Like
Any new easy codes for this?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi TICHO,
This a bit technical and also old... so I hope it helps.
http://forsite.synthasite.com/tut-mou...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
An oldie but a goodie! :) Thanks Boomer for sharing that!