Need some HTML help... Transitions

Cov · 20-02-2011 3:34pm #1

EDIT : Changed "click" to "hover over". Code adjusted also.

Hi all,

I am currently studying games development / programming, and as part of our course we have a Web Animation Design module (relevant, right?)

I am AWFUL at this stuff. Programming, fine, but HTML etc... it just doesnt stick with me. I cant figure out the syntax, where everything is supposed to go, etc. It is hugely frustrating.

Our current assignment is to design a simple web-page that acts as a Gallery. Thumbnails on the bottom, and when you hover over one it get displayed as a larger image.

I have the gallery working fine, the only problem is that there is supposed to be a TRANSITION involved when I hover over the thumbnail.

I have been trying for a few hours now, and I just cant get it to work.

IF anyone could show me how to apply a transition to the image when it gets swapped out, I would be very grateful and you will have saved me from the brink of madness.

Heres my HTML for my gallery :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color: #69F;
}
</style>
</head>

<body>

<p>
 
  <!-- Define an ARRAY to deal with images and swaps -->
  <script type="text/javascript">
var slides = new Array(6); // the number in brackets defines how many images your gallery has

<!-- pre-loads images into array for SWAP function -->
for(var i=1; i<=6; i++)
{
slides[i] = new Image();  
slides[i].src = "images/big_" + i + ".jpg";  // concatenate the filepath
} 

<!-- SWAP function swaps out images -->
function Swap(number, id){
document.slide.src = slides[number].src;

}

</script>

<!-- Main slide image-->
 </p>
<blockquote>
  <p><img src="images/big_1.jpg"  name="slide" width="800" height="600" align="middle"> 
   </p>
</blockquote>
<p> 
  
  <!-- thumbnails-->
  <img onmouseover="javascript:Swap(1)"src="images/big_1.jpg" width="50" height="50" hspace="45" border="0"></a>
  <img onmouseover="javascript:Swap(2)"src="images/big_2.jpg" width="50" height="50" hspace="50" border="0"></a>
  <img onmouseover="javascript:Swap(3)"src="images/big_3.jpg" width="50" height="50" hspace="45" border="0"></a>
  <img onmouseover="javascript:Swap(4)"src="images/big_4.jpg" width="50" height="50" hspace="45" border="0"></a>
  <img onmouseover="javascript:Swap(5)"src="images/big_5.jpg" width="50" height="50" hspace="45" border="0"></a>
  <img onmouseover="javascript:Swap(6)"src="images/big_6.jpg" width="50" height="50" hspace="45" border="0"></a></p>
</body>

What I want is a simple fade in between images when I hover over them. I have found a few functions online, but I have no idea how to apply them.

Please help!!!

Thanks,

Cov

Freddio · 20-02-2011 9:07pm

What you are looking for I think is an opacity function inside your swap function which will fade in / out your images by increasing / decreasing the opacity value between 0 (invisible) and 1 (visible) on a timer.

It would be better to google to the code and get it to work than to let someone do it for you because javascript can get a lot hairier than this and you'll be stranded in later assignments.

Need some HTML help... Transitions

Comments