Fade in on hovering image

@HeimedallMay 24.2007

I know there’s been a few posts on fade in before, I’ve had a look through them, but what I’m after is specific so hopefully someone can help me.

On the website, I have a single page that has a few images on them, when you hover over one of these images, you get a larger version of it. What I want to do is have that larger version fade in when you hover over the small one… Can someone help?

The hover works like this:

[CODE] <html> <head> <title>Image</title> <style> body { margin-top: 5px; margin-left: 5px; margin-right: 5px; height: 100%; }

#trailimageid { position: absolute; visibility: hidden; left: 0px; top: 0px; height: 1px; } </style> <script language=”javascript” src=”hover.js” type=”text/javascript”></script> </head> <body>

<img src=”imgsm.jpg” border=”0″ onmouseover=”showtrail(‘img.jpg’,”,”,’1′,5,228);” onmouseout=”hidetrail();”>

</body> </html><div id=”trailimageid”></div> [/CODE]

there is a JS scripts that runs the hover image, if you need this then I can post the code in here.

If anyone knows how to make the img.jpg fade in please help!

Thanks
Larkin

PS: I’ve only just started to learn JS so what I know so far is only how to edit things.

to post a comment

JavaScript

6 Comments(s) _↴

@jamMay 24.2007 — #okay, well i've posted about fading a layer(/div) before and this should be the same for an image object if not then it is definately transferrable, when fading you are using either the filter: alpha(opacity=?) ; property for IE or the -moz-opacity:?; property for Firefox, post the JS for showing the image and i'll c what i can do...

jamey

@HeimedallauthorMay 24.2007 — #I did see that post, but as I've said, I'm new to this, so I wouldnt know how to add it to the script, it took me days to get this working...

Thanks for helping.

[CODE]var itemWidth = 250;
 var offsetfrommouse=[6,6]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
 var displayduration=0; //duration in seconds image should remain visible. 0 for always.
 var currentimageheight = 270;	// maximum image size.
 
 function gettrailobj(){
 if (document.getElementById)
 return document.getElementById("trailimageid").style
 else if (document.all)
 return document.all.trailimagid.style
 }
 
 function gettrailobjnostyle(){
 if (document.getElementById)
 return document.getElementById("trailimageid")
 else if (document.all)
 return document.all.trailimagid
 }
 
 
 function truebody(){
 return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }
 
 function showtrail(imagename,title,description,showthumb,height, newItemWidth){
 
  if (newItemWidth != false) {
   itemWidth = newItemWidth;
  }
 
  if (height > 0){
   currentimageheight = height;
  }
 
  document.onmousemove=followmouse;
 
  cameraHTML = '';
 
  newHTML = '<div>';
  newHTML = newHTML + '<span>' + title + '</span><div class="borders"></div>';
 
  if (showthumb > 0){
   newHTML = newHTML + '<div style="border: 1px solid #000000;" align="center"><img src="' + imagename + '" border="0"></div>';
  }
 
  newHTML = newHTML + '</div>';
 
  gettrailobjnostyle().innerHTML = newHTML;
 
  gettrailobj().visibility="visible";
 
 }
 
 
 function showhtml(newHtml,height) {
 
  document.onmousemove=followmouse;
  newHtml = '<div style="border: 1px solid #000000;background-color:#FFFFFF;padding:5px" align="left">' + newHtml + '<div>';
  gettrailobjnostyle().innerHTML = newHtml;
  gettrailobj().visibility="visible";
 
 }
 
 function hidetrail(){
 gettrailobj().visibility="hidden"
 document.onmousemove=""
 gettrailobj().left="-500px"
 
 }
 
 function followmouse(e){
 
  var xcoord=offsetfrommouse[0]
  var ycoord=offsetfrommouse[1]
 
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
 
  if (typeof e != "undefined"){
   if (docwidth - e.pageX < itemWidth + 50){
   if (noPicture == "yes") {
   xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
   } else {
   xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
   }
   } else {
   xcoord += e.pageX;
   }
   if ((docheight - e.pageY) < (currentimageheight + 110)){
   ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
   } else {
   ycoord += e.pageY;
   }
 
  } else if (typeof window.event != "undefined"){
   if (docwidth - event.clientX < itemWidth + 50){
   if (noPicture == "yes") {
   xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
   } else {
   xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
   }
   } else {
   xcoord += truebody().scrollLeft+event.clientX
   }
   if (docheight - event.clientY < (currentimageheight + 110)){
   ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
   } else {
   ycoord += truebody().scrollTop + event.clientY;
   }
  }
 
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
 
  gettrailobj().left=xcoord+"px"
  gettrailobj().top=ycoord+"px"
 
 }[/CODE]

@jamMay 24.2007 — #okay, it looks doable so ill try

@jamMay 24.2007 — #DONE! =]

sorry about the wait, but i was having troubles working out a few of the bugs i encountered, i think this is what you mean, (i've attached a zipped file with my two final files in,) extract it and put your images in the folder and you'll be set to go, basically it fades the image in (which takes 1 second) then fades it out (which takes half a second)... try it out and tell me if it need anything more done, the javascript file has changed drastically and the html not as much but it has still changed in key places...

i hope i helped,

Jamey

p.s. if you want me to attach the files as code so you can just copy and paste then just ask

[upl-file uuid=64bcbf59-2f86-40ce-b2be-d3a7f82e5c31 size=2kB]final.zip[/upl-file]

@HeimedallauthorMay 24.2007 — #Thats perfect, thank you VERY much!

@jamMay 24.2007 — #thats k =]

Also in #JavaScript _↴

Is my code incorrect?Displaying a Future Date Refreshing a table

Success!

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

Tweet This

Fade in on hovering image

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Fade in on hovering image

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴