Creating mouseover effects on images. ( Tutorial)

  • 2
  • Idea
  • Updated 9 years ago
This is a really cool effect for image links. To see an example you can go have a look at this site: http://www.helderberg.cc/
Hover over the smaller images to see the effect.

First of all copy this piece of code and paste it in a HTML widget at the top of your page.
Leave out the <!-- at the begining and the --> at the end of the code.
This is only there so that Get Satisfaction does not try and interpret the code.

<!--

<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
</style>

-->

You can experiment with the opacity by changing the "70" and the two "0.7" variables.

The next step is to place the following piece of code (also into a HTML widget) where you would like your image to be.

<!--

<a class="linkopacity" href="http://YOURLINK/">
<img src="http://YOURSITE/resources/YOURIMAGE" border="0"</a>

-->

Once again leave out the <!-- at the beginning and the --> at the end of the code.

Replace the "YOURLINK" with the link you would like to go to.
Replace the "YOURSITE" with your site's address.
Replace the "YOURIMAGE" with your own image.

To create a border around the image, change to border="1"

You can apply this mouseover effect to any image on the page as long as you include
the "class=linkopacity" in the link.

P.S. If you would like to create mouseover buttons, you can try this site: http://forsite.synthasite.com/tut-mou...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes

Posted 10 years ago

  • 2
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for sharing that code Boomer. Is it possible to do the reverse so that when you mouseover, the image gets lighter?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Have not tried that one littleus.
Try switching the variables around ??
linkopacity img and hover img
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Thanks Boomer. Easy to read and follow.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Thanks Peter
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Littleus, I just tried it and it works in reverse
Here's the reverse effect code:

<!--

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}

a.linkopacity:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;}

</style>

-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
awesome! thanks boomer!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Boomer, I just want to say, again, that your website is so beautifully done. Wow, if I could even come close to that I would feel I'd died and gone to heaven. My site is(hopefully)going to end up similar as it is about Traveling Oregon. I am not very far along as you can see at www.fromheretoeden.com but I am hopeful and doing as much research and tutorials as possible.

If you don't mind, as I go along, I would like to ask your opinion as well as guidance on the construction. Would that be ok? Thank you much, denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Sure thing Denise, I'd be happy to help out whenever I can. Just shout!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi Boomer, can you help me find a tutorial on a flyout for the buttons I've made on my site, fromheretoeden.com?

Oregon or Bust >> Bandon >> Accomodations
Eateries
Activities

PS I will follow the instructions in your first post and try to get the mouseover effect.

I would also like to know if all the "boxes" you made on your site were made by inserting "text" boxes into your Yola Layout? Did you use a basic theme from Yola or mostly from scratch?

ty much and ttyl, denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ohmygosh Boomer!!!!!!!! Im in code heaven, yeehaw!! I love that site you gave us, you are so wonderful to share that, http://forsite.synthasite.com/tut-mou... that will keep me busy and will have the info I was asking you for in my above post!!! Yipee, so excited:) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi again Boomer, I followed the steps on http://forsite.synthasite.com/tut-mou... for the code generator and I am having one problem, I know of. I cannot plug the code into the page itself(page source)so I am assuming I need to plug the 2-part code into 2 separate html boxes? But, that is not working. I will place my generated code below so you can see if I have made a mistake anywhere. I hope you don't mind checking it for me. I understand if you do not have time and I can wait, no problem. Ty again, denise

**<!-- STEP ONE: Insert this code into the HEAD section of your HTML document -->**

(2nd part code)

**<!-- STEP TWO: Insert this code into the BODY of your HTML document -->**
















I do know to leave out the info between the ** above. What I did was first make one html box and entered 1st part. Then I made another html box below that and entered second part. I wish there was a way to just plug it into the "page source" but I don't think there is correct?? Thank you boomer, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh no, I don't know why my code isn't showing, I'll try screenshots. bbs denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
1st part Boomer, of code:

<!-- <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.fromheretoeden.com/nav_but... over button.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.fromheretoeden.com/nav_but... button.jpg";

loadImage2 = new Image();
loadImage2.src = "http://www.fromheretoeden.com/nav_but... over button.jpg";
staticImage2 = new Image();
staticImage2.src = "http://www.fromheretoeden.com/nav_but... button.jpg";

loadImage3 = new Image();
loadImage3.src = "http://www.fromheretoeden.com/nav_but... over button.jpg";
staticImage3 = new Image();
staticImage3.src = "http://www.fromheretoeden.com/nav_but...;

loadImage4 = new Image();
loadImage4.src = "http://www.fromheretoeden.com/nav_but... over button.jpg";
staticImage4 = new Image();
staticImage4.src = "http://www.fromheretoeden.com/nav_but... button.jpg";

loadImage5 = new Image();
loadImage5.src = "http://www.fromheretoeden.com/nav_but... to us over.jpg";
staticImage5 = new Image();
staticImage5.src = "http://www.fromheretoeden.com/nav_but... to us.jpg";

// End -->
-->

2nd part <! -- <!-- STEP TWO: Insert this code into the BODY of your HTML document -->
















-->
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
2nd part Boomer,

<!-- <a href="http://www.fromheretoeden.com/index.php" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.fromheretoeden.com/nav_but... button.jpg" border=0></a>

<a href="http://www.fromheretoeden.com/oregon-..." onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.fromheretoeden.com/nav_but... button.jpg" border=0></a>

<a href="http://www.fromheretoeden.com/the-gen..." onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://www.fromheretoeden.com/nav_but..." border=0></a>

<a href="http://www.fromheretoeden.com/spit-an..." onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://www.fromheretoeden.com/nav_but... button.jpg" border=0></a>

<a href="http://www.fromheretoeden.com/write-t..." onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="http://www.fromheretoeden.com/nav_but... to us.jpg" border=0></a> -->
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
right now, I am trying to see how to place a widget(html box)at the "top" of the page rather than in the same area of the widget where I want me image to show which is the sidebar. I am thinking this is why I can't get it to display. ttyl, denise