image enlarge on mouseover, help!?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
hiya, is there any way to enlarge an image when the mouse rolls over it then goes back to normal when the mouse leave the image WITHOUT having to click on/off the image?
ive tried using html but nothing, ive just tried this javascript but still not working-



css:
a{
height: 10px;
}

a:hover{
height: 20px;
}

#image1{
background-image: url("smaller_image_source.jpg");
}

#image1:hover{
background-image: url("larger_image_source.jpg");
}

if anyone can help it would be very appreciated because this just might add that final spark to my site.
Photo of R Christopher Cooper

R Christopher Cooper

  • 12 Posts
  • 0 Reply Likes
  • confused

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello R Chistopher

You will need to use a mouseover code. Some mouseover codes will call for an "onclick" trigger or "onmouseover" trigger. It sounds like what you want is the "onmouseover" trigger.

If you can please share the javascript code for your mouseover funtion, then I can take a look and see how to tweak it.
Photo of R Christopher Cooper

R Christopher Cooper

  • 12 Posts
  • 0 Reply Likes
thanks sanja :)
im using yola, which lets you put html into your webpages, but i cant seem to get mouseover to work, ive tried too many codes to list, and none of them have worked at all, is it just that yola doesnt let it or am i doing something wrong?
i havnt got a decent script that will work right now, do you know of a code that will allow it, also i dont use ie or firefox any more, i now just use safari pc version, i dont know if the problem is just in the browser, thanks again.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi R Christopher

Here's one that seems to work well: htmlbasix.com/mouseoverimages

This is a site that generates the code for a mouseover image for you!
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"

You're done. You should now have a mouseover image on your page.

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

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Christopher,

Is this what you are looking for ? http://www.dynamicdrive.com/dynamicin...

See my Yola implementation here: http://travelsa.cc/wc-capetown.php
It's not the same script but pretty similar (I can't seem to find a link to the one I'm using at the moment).
Photo of R Christopher Cooper

R Christopher Cooper

  • 12 Posts
  • 0 Reply Likes
thank you both, ill try both and see what works out best, ill get back to you when its done with a link. thank you again
p.s. boomer, what you have on yoursite is he exact same thing that ive been looking for, nice site btw.
Photo of R Christopher Cooper

R Christopher Cooper

  • 12 Posts
  • 0 Reply Likes
unfortunatly they didnt work, sanja's sort of worked, but was very jumpy, and not quite qhat i wanted. boomer thanks but it dont absolutly nothing :( any chance you could look on your site builder and get the code for one of your images then post it here so i can just change the image url's?
btw heres my site, its basicly a portal site for my stock on amazon, what im looking to do though make it so when you hover on an image of a game it enlarges (or shows the back cover instead would be a possibility) cooperelectronics.yolasite.com
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey R Christopher Cooper, I found something cool that you might like. Check it out:Jquery.Popeye
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello R. Christopher

Can you please let me know if you have Yola Silver? If you do, then there are a lot more possibilities will open up for you as many of these scripts need to use .js files. Javascript file uploads are prohibited by Yola Free but this restriction is lifted off for Yola Silver users.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Sanja, you are right. I pretty much got Yola Silver just for this reason. What I used to do before, was to upload the js/html/... file to a free www.webs.com account and then link to it.
Photo of R Christopher Cooper

R Christopher Cooper

  • 12 Posts
  • 0 Reply Likes
thanks both, i have yola free atm, i might upgrade to silver, do you get a custom domain free with silver or is that still another pay for extra?
its a shame i dont know more about web scripting, i know the computer language C, but that cant be implemented into yola unfortunatly because its mainly a os builder.
still had no luck with the html/js for these images, im thinking of maybe just having each picture a link to a hidden page with other picture on there, but thats a last resort i suppose
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi R. Christopher

With Yola Silver, these are the fantastic feature you get:

1. A custom domain name (including private registration)
2. A credit to create your own logo for your website through our partnership with HP -- check it out at http://logomaker.com/
3. A credit for a Premium Style
4. Yola links removed from all your websites
5. Create more sites, get more storage, upload larger files
6. Advertising credits valued at $60

For more information about Yola Silver, please see this: Yola Silver FAQ

For more detail on Yola packages and pricing, see: Yola Packages