[Javascript] Image ease in upon mouse over of link

@PChuprinaFeb 10.2011

Hello all,

I want to achieve a effect that upon a mouseover of a link a image will ease in. I’ve looked for such a technique/effect with no success.

The image will ease in over the content area, covering the background image. The links are in the same content area and will still be visible above the image easing in which I think I can accomplish by the z-index.

Any help, guidance or direction to a tutorial that does just that would be greatly appreciated.

Thanks in advance

Pat

to post a comment

JavaScript

5 Comments(s) _↴

@WolfShadeFeb 10.2011 — #Z index, yes; background image should default to 1; I'd give the div containing the "fader" image a z index of 10; then give the div with the links in it a z index of 20 and set backgroundColor to "transparent".

In the middle div, set the image as the background image of that div, start as display="none;", on event set filter to 0 and opacity to 0 and display=""; set a loop for 25 times and increase the filter by 4 and the opacity by .04 on each iteration.

Untested, but that SHOULD do it.

^{^_^{^}}

@PChuprinaauthorFeb 10.2011 — #Hi,

Thanks for your input.

Unfortunately my javascript skills is minimal, I'm not even sure on how to script this. I'd be very thankful for more input.

Pat

@yomooreFeb 10.2011 — #Hi,

I think you can use jquery for this.

Put this in your head section:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

And in your body:

<script type="text/javascript">
$(document).ready(function(){

$(".class of the link goes here").click(function(){

$("#here goes the id of your image").fadeIn(2000);

});

});

</script>

So don't forget to give your link a class name like this:

<a href="url" [B]class="name"[/B]>Link text</a>

And for your image:

<img border="0" src="image.jpg" width="304" height="228" [B]id="name"[/B] [B]style="display:none;"[/B] />

display:none is also verry important.

@WolfShadeFeb 10.2011 — #

[code=html]
 <body><!-- This should have a z-index of 1 -->
 <div id="mid" style="z-index:10; background-image:url('/path/to/image.jpg'); 
 background-color:transparent; filter:alpha(opacity=0); opacity:0.0; position:absolute; 
 top:0px; left:0px; height:20px; width:20px;"><!-- This should have a z-index of 10 -->
 This should have the background image, and is in between body & nested div
 <div id="top" style="z-index:20; top:0px; left:0px; height:20px; width:20px; position:absolute;"><!-- This should have a z-index of 20 -->
 This contains the links and will sit "on top"
 </div>
 </div>
 </body>
 [/code]

Body and two divs, one on top of the other.

I don't have time to write out anything, for you, but can give you the following to play around with (change the id to "mid"):

<i>
 </i>function showHide(divName,nextName) {
 var body = document.getElementsByTagName("body")[0];
 var winWidth, winHeight;
 winWidth = getWidth(); winHeight = getHeight();
 
 <i>	</i>thisDiv = document.getElementById(divName);
 <i>	</i>nextDiv = document.getElementById(nextName);
 <i>	</i>if(thisDiv.className == 'hidden') {
 <i>	</i>		thisDiv.className = "shown";
 <i>	</i>		nextDiv.className = "shown"; 
 <i>	</i>		w = thisDiv.offsetWidth; h = thisDiv.offsetHeight;
 <i>	</i>		l = (winWidth-w)/2; t = (winHeight-h)/2;
 <i>	</i>		thisDiv.style.left = l + "px"; thisDiv.style.top = t + "px";
 <i>	</i>		w = nextDiv.offsetWidth; h = nextDiv.offsetHeight;
 <i>	</i>		l = (winWidth-w)/2; t = (winHeight-h)/2;
 <i>	</i>		nextDiv.style.left = l + "px"; nextDiv.style.top = t + "px";
 <i>	</i>		thisO = 0.0; thisFilter = 0; nextO = 0.0; nextFilter = 0;
 <i>	</i>		function fadeInOut() {
 <i>	</i>				thisO = thisO + .03; thisFilter = thisFilter + 3;
 <i>	</i>				nextO = nextO + .04; nextFilter = nextFilter + 4;
 <i>	</i>				thisDiv.style.opacity = thisO; nextDiv.style.opacity = nextO;
 <i>	</i>				thisDiv.style.filter = "alpha (opacity=" + thisFilter + ")"; nextDiv.style.filter = "alpha (opacity=" + nextFilter + ")";
 <i>	</i>				thisDiv.style.zoom = 1; nextDiv.style.zoom = 1;
 <i>	</i>				if (thisO &lt; .75) {window.setTimeout( function(){ fadeInOut(); }, 10); }
 <i>	</i>			}
 <i>	</i>		return fadeInOut();
 <i>	</i>	}
 <i>	</i>else {
 <i>	</i>		thisO = 0.75; thisFilter = 75; nextO = 1.0; nextFilter = 100;
 <i>	</i>		function fadeOutIn() {
 <i>	</i>				thisO = thisO - .03; thisFilter = thisFilter - 3;
 <i>	</i>				nextO = nextO - .04; nextFilter = nextFilter - 4;
 <i>	</i>				thisDiv.style.opacity = thisO; nextDiv.style.opacity = nextO;
 <i>	</i>				thisDiv.style.filter = "alpha (opacity=" + thisFilter + ")"; nextDiv.style.filter = "alpha (opacity=" + nextFilter + ")";
 <i>	</i>				thisDiv.style.zoom = 1; nextDiv.style.zoom = 1;
 <i>	</i>				if (thisO &lt; 0) { thisDiv.className = "hidden"; nextDiv.className = "hidden"; }
 <i>	</i>				if (thisO &gt; -0.03) {window.setTimeout( function(){ fadeOutIn(); }, 10); }
 <i>	</i>			}
 <i>	</i>		return fadeOutIn();
 <i>	</i>		thisDiv.style.z_index = -10; thisDiv.style.top = "0px"; thisDiv.style.left = "0px"; thisDiv.style.height = "0px"; thisDiv.style.width = "0px";
 <i>	</i>		nextDiv.style.z_index = -11; nextDiv.style.top = "0px"; nextDiv.style.left = "0px"; nextDiv.style.height = "0px"; nextDiv.style.width = "0px";
 <i>	</i>	}
 <i>	</i>}
 <i>	</i>			function getWidth() {
 <i>	</i>				if (typeof window.innerWidth != 'undefined') {
 <i>	</i>				      return window.innerWidth;
 <i>	</i>				 	}
 <i>	</i>				else if (typeof document.documentElement != 'undefined' &amp;&amp; typeof document.documentElement.clientWidth != 'undefined' &amp;&amp; document.documentElement.clientWidth != 0) {
 <i>	</i>				       return document.documentElement.clientWidth;
 <i>	</i>				 	}
 <i>	</i>				else {
 <i>	</i>				       return document.getElementsByTagName('body')[0].clientWidth;
 <i>	</i>				 	}
 <i>	</i>				}
 <i>	</i>			function getHeight() {
 <i>	</i>				if (typeof window.innerWidth != 'undefined')
 <i>	</i>				 {
 <i>	</i>				      return window.innerHeight;
 <i>	</i>				 }
 <i>	</i>				else if (typeof document.documentElement != 'undefined'
 <i>	</i>				     &amp;&amp; typeof document.documentElement.clientWidth !=
 <i>	</i>				     'undefined' &amp;&amp; document.documentElement.clientWidth != 0) {
 <i>	</i>				       return document.documentElement.clientHeight;
 <i>	</i>				 }
 <i>	</i>				else {
 <i>	</i>				      return document.getElementsByTagName('body')[0].clientHeight;
 <i>	</i>				 }
 <i>	</i>				}

@yomooreFeb 10.2011 — #Hi @PChuprina,

Forget everything I mentioned. I had it all wrong, I had a bad day?

If the code WolfShade provided is not suitable for you, you can use this, it will definitely work:

[CODE]<!DOCTYPE html>
 <html>
 
 
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
 </head>
 
 
 <body>
 
 <a class="name1"> Link text </a>
 
 
 <div id="name2" style="display:none;">
 <img src="http://lh3.ggpht.com/_G1G0439-dt8/SgyytosMH3I/AAAAAAAAEo8/QFOl5nhLa7M/Flintstones-cn09.jpg">
 </div>
 
 
 </body>
 
 
 <script type="text/javascript">
 $(document).ready(function(){
 $(".name1").hover(function(){
 $("#name2").fadeIn(1000);
 });
 });
 </script>
 
 
 </html>[/CODE]

Also in #JavaScript _↴

passing values and get values (IFRAME)Another one....why me?Clock

Success!

Help @PChuprina spread the word by sharing this article on Twitter...

Tweet This

[Javascript] Image ease in upon mouse over of link

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[Javascript] Image ease in upon mouse over of link

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴