Mouseover Help Please

  • 4
  • Question
  • Updated 9 years ago
  • Answered
help with moseover please.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
  • Happy!

Posted 9 years ago

  • 4
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
Hi i 2 have this question here is my html code

<!--
<center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.yotutorials.synthasite.com...; staticImage1 = new Image(); staticImage1.src = "http://www.yotutorials.synthasite.com...; <p style="page-break-before: always"> loadImage2 = new Image(); loadImage2.src = "http://www.yotutorials.synthasite.com...; staticImage2 = new Image(); staticImage2.src = "http://www.yotutorials.synthasite.com...; <p style="page-break-before: always"> loadImage3 = new Image(); loadImage3.src = "http://www.yotutorials.synthasite.com...; staticImage3 = new Image(); staticImage3.src = "http://www.yotutorials.synthasite.com...; <p style="page-break-before: always"> loadImage4 = new Image(); loadImage4.src = "http://www.yotutorials.synthasite.com...; staticImage4 = new Image(); staticImage4.src = "http://www.yotutorials.synthasite.com...; // End -->

<!--
</script> <a href="http://www.yotutorials.synthasite.com..." onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;"> <img name="image1" src="http://www.yotutorials.synthasite.com..." border=0></a> <p style="page-break-before: always"> <a href="http://www.yotutorials.synthasite.com..." onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;"> <img name="image2" src="http://www.yotutorials.synthasite.com..." border=0></a> <p style="page-break-before: always"> <a href="http://www.yotutorials.synthasite.com..." onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;"> <img name="image3" src="http://www.yotutorials.synthasite.com..." border=0></a> <p style="page-break-before: always"> <a href="http://www.yotutorials.synthasite.com..." onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;"> <img name="image4" src="http://www.yotutorials.synthasite.com..." border=0></a> </center>
-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay... this is what I have done. I went to www.cooltext.com. Make your button according to your specifications. Then download the buttons. Copy the code they give you. (Do not close the page - cuz then you can edit the button without having to redo everything for more buttons). Upload the images to your file manager. Please note: You must update your site after uploading the images to your site.

Then drag the HTML box over and paste the code into box. You will need to correct the pathway. For example:

<!--<img src="YOUR SITE URL/resources/cooltext418573000.png" onmouseover="this.src='YOUR SITE URL/resources/cooltext418573000MouseOver.png';" onmouseout="this.src='YOUR SITE URL/resources/cooltext418573000.png';" /> -->

If you have your images in a folder in your file manager, you'll need to include the folder name after resources

If you are linking your image from an image hosting place, then enter your image url.

Then, to make the button link to a page on your site, add this code before the img scr code:

<!--<a href="YOUR SITE PAGE URL">-->

I hope that helps!
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
I have been using
http://www.htmlbasix.com/mouseoverima...
to build the code, i am not that good at mouseoevers.
are you able to create it using the data above?
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
It works when it wants to, I wondering if Yola staff can shed some light onto this
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Littleus is correct. It is most likely not working because you do not have access to the head of the document. You could try pasting the head code into one HTML widget and the body code into the other, but you really are better off using a different button generator.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
If no workaround can be found, I would really encourage you to use www.cooltext.com. They have an abundance of designs and options.
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
Do you know of one that you know that works, and does it auto-maticly
Please not cooltext i don't like there designs
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
look! but how do i make it become a link again?



al
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay great Alex... now..go back to your code. Add this code before the img scr code.

<!--<a href="YOUR SITE URL/YOUR PAGE">-->

For example: <!--<a href="http://littleus.synthasite.com/our-jo...>
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
what each , the first last?

im sorry i truely am hopeless at HTML
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry.. I should have been more clear.

You need to add this code before every img. src
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Alex, I have a tutorial on my site.
http://forsite.synthasite.com/tut-mou...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Boomer, can you look at the code above from InterWebMercials? I cannot figure out why it doesn't work.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Give me a minute, Ok!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks boomer, i always use ForSite, i never knew it was yours! so i must say a Big Thanks for creating that site!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
how do i get the purple border off?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Currently.. you should have
<!--<a href="YOUR SITE LINK"><img scr="YOUR IMAGE LINK">-->

To make the border go away, your code will end up looking like this:

<!--<a href="YOUR SITE LINK"><img style="border-width:0px" src=YOUR IMAGE LINK">-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Alex.. how is it working out for you?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi InterWebMercials,

Have a look here so long and tell me what you think.
I'll post the code now.
http://hindsite.synthasite.com/
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
Kool, but on if you haven't noticed there is two forum and the fist one once moused over says coming soon
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
What was the code Boomer? What were we missing?
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
I G2G so i'll check this up 8ter
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok, Fixed up. check it again!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
hi, my codes will b on my site soon, its gonna be a cool navigation menu!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi littleus,

Got a second?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
For you? Always! ;)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sent you an email
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LITTLEUS! bug problem, all the text under the mouseover image is a link to the page that then image links to! NOT GOOD!

hewp =(
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
oh Alex.... okay... I'm gonna post my code from my site here. You'll have to replace all the links though. Okay?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok InterWebMercials, here's the new code!

<!--

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

loadImage1 = new Image();
loadImage1.src = "http://www.yotutorials.synthasite.com...;
staticImage1 = new Image();
staticImage1.src = "http://www.yotutorials.synthasite.com...;

loadImage2 = new Image();
loadImage2.src = "http://www.yotutorials.synthasite.com...;
staticImage2 = new Image();
staticImage2.src = "http://www.yotutorials.synthasite.com...;

loadImage3 = new Image();
loadImage3.src = "http://www.yotutorials.synthasite.com...;
staticImage3 = new Image();
staticImage3.src = "http://www.yotutorials.synthasite.com...;

loadImage4 = new Image();
loadImage4.src = "http://www.yotutorials.synthasite.com...;
staticImage4 = new Image();
staticImage4.src = "http://www.yotutorials.synthasite.com...;

// End -->

-->
<!--

</script>

<a href="http://www.yotutorials.synthasite.com..." onmouseover="image1.src=loadImage1.src;"
onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.yotutorials.synthasite.com..."
border=0></a>

<a href="http://www.yotutorials.synthasite.com..." onmouseover="image2.src=loadImage2.src;"
onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.yotutorials.synthasite.com..."
border=0></a>

<a href="http://www.yotutorials.synthasite.com..." onmouseover="image3.src=loadImage3.src;"
onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://www.yotutorials.synthasite.com..."
border=0></a>

<a href="http://www.yotutorials.synthasite.com..." onmouseover="image4.src=loadImage4.src;"
onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://www.yotutorials.synthasite.com..."
border=0></a>

-->

Leave out the <!-- at the very top.
Leave out the --> and the <!-- between ( //End --> ) and ( script )
And leave out the --> at the very end.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
The code was refering to the http://rumballchick.synthasite.com/ site,
but the only mouseover button on http://littleus.synthasite.com/ that is
working for me is the "about us" button. The rest remain static!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
That's really strange!! I just checked it out.. it would appear that all my mouseovers are working. I'm gonna post a new thread and see if it's problem for other users too. Thanks for bringing it to my attention.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
its workin for me
Photo of John S | IWM Visual Designer

John S | IWM Visual Designer

  • 393 Posts
  • 2 Reply Likes
Hi boomer you made a little error with the code. i fixed it, what you did is you wrote 4 when it should of been 3
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi InterWebMercials,

Glad you picked that up - silly me.
Nice to see the code working on your site.
You are off to a great start btw. Can't wait for the launch date.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Okay! Thanks, my coding skills are getng worse =(i dont know where i would be without you!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here's the code:
<!--<a href="http://littleus.synthasite.com/index">
<img style="border-width:0px" src="http://littleus.synthasite.com/resour..." onmouseover="this.src='http://littleus.synthasite.com/resour..." onmouseout="this.src='http://littleus.synthasite.com/resour..." /></a>
<br>
<a href="http://littleus.synthasite.com/about-us">
<img style="border-width:0px" src="http://littleus.synthasite.com/resour..." onmouseover="this.src='http://littleus.synthasite.com/resour..." onmouseout="this.src='http://littleus.synthasite.com/resour..." /></a>
<br>
<a href="http://littleus.synthasite.com/our-jo...>
<img style="border-width:0px" src="http://littleus.synthasite.com/resour..." onmouseover="this.src='http://littleus.synthasite.com/resour..." onmouseout="this.src='http://littleus.synthasite.com/resour..." /></a>
<br>
<a href="http://littleus.synthasite.com/pictur...>
<img style="border-width:0px" src="http://littleus.synthasite.com/resour..." onmouseover="this.src='http://littleus.synthasite.com/resour..." onmouseout="this.src='http://littleus.synthasite.com/resour..." /></a>
<br>
<a href="http://littleus.synthasite.com/guestb...>
<img style="border-width:0px" src="http://littleus.synthasite.com/resour..." onmouseover="this.src='http://littleus.synthasite.com/resour..." onmouseout="this.src='http://littleus.synthasite.com/resour..." /></a>-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You can take out the
if you want. It's only there to create space between the buttons.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks lilus! i might edit the code now but im at a different PC and im already logged in Yola at my PC!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
im back, i will test the code now.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I really hope it worked for you.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
IT Works! THANKS Soo Much!

al
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Oh Wonderful!!! Can I see your results?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yes, in 1 moment, im just editing the images!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Littleus! i done! take a look on the homepage, P.d more will come soon!

http://yo-site.synthasite.com

al
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great job Alex. If I could make a teensy weensy suggestion about your button? I would add a background color so that it blends into your site's colour without having that white border around it. Do you have a colorpicker? This is a tool that allows you to know what the hex or RBG numbers are when you point to a color on your site. This will mean having to redo the button again and doing the whole process again though.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yes, i have done that now, im adding 1 more BTn just wait, thats what i was tinkering with, b 1 mo!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LITTLEUS! big problem, my new image is jamming. try the contact us at
http://yo-site.synthasite.com (dont click, its not the right link yet)

whats up?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You didn't type in the full code.

replace your "onmouseout" with this:
<!--onmouseout="this.src='YOUR IMAGE URL';" /></a>-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i just copied and pasted the one from the "Library" one!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Your library codeis fine! Probably what happened is when you pasted in your image url, you accidentally covered up part of that code.