Image Transition on Hover - Jquery

When you want to change the image source with transition effect on hover just come here take out the script below. Also i included caption sliding with this transition.

I have used three images on normal state like "baby1.jpg", "baby2.jpg", "baby3.jpg" and for hover state "baby1over.jpg", "baby2over.jpg", "baby3over.jpg".

Note:

#gallery .imgs img - Selector to point the image
over.jpg - addition to image name
img/baby1.jpg - Change the path to where you have images

CSS part :

<style type="text/css">
 .imgs {
 float:left;
 margin:10px;
 padding:5px;
 background:#FF7F7F;
 border:solid 1px #888;
 position:relative;
 width:220px;
 }
 .imgs span {
 display:none;
 width:210px;
 padding:5px;
 background:#ff7f7f;
 opacity:0.8;
 filter:alpha(opacity=80);
 position:absolute;
 left:5px;
 bottom:0;
 }
</style>

Jquery part:

<script type="text/javascript">

$(document).ready(
function(){

 $('#gallery .imgs img').mouseover(function (){
  $(this).fadeOut('slow');
  var src = $(this).attr('src').match(/[^\.]+/) + 'over.jpg';
  $(this).attr('src', src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideDown('slow');
 });

 $('#gallery .imgs img').mouseout(function(){
  $(this).fadeOut('slow');
  var src = $(this).attr("src").replace("over", "");
  $(this).attr("src", src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideUp('slow');
 });

});

</script>

HTML part:

<div id="gallery">
 <div class="imgs">
  <img src="img/baby1.jpg">
  <span>Your thoughts will decide your way of life</span>
 </div>
 <div class="imgs">
  <img src="img/baby2.jpg">
  <span>If your happiness is inner feeling, no one can change it! Its the gift</span>
 </div>
 <div class="imgs">
  <img src="img/baby3.jpg">
  <span>Dont be stupid by hesitating people who loves you</span>
 </div>
</div>

Create HTML element and import data by using javascript

After a long time i just struggled with this task and finally found a solution. As a HTML developer and a web designer i just enlarging my knowledge in Client side running scripts. So, I welcome your feedback and suggestion !

Creating a HTML element is bit easy but having data in a corresponding manner is some difficult. Yes, I have a series of data ummm ... For example i've an array with my details like Name, Age, Email ...etc., So, I need to pull that data to my HTML page in below format.

Fisrst Name : Arun

Last Name : raj

Age : 24

Email : arungetz@gmail.com

Address : Chennai

Got it right. Just have a look at below Javascript and HTML code.

function getdetails(){
 var myarray = ['Arun','raj','24','arungetz@gmail.com','Chennai'];

 var userdetails = document.getElementById('userdetails');
 var inside = userdetails.getElementsByTagName('p');
 
 for (i=0; i<inside.length; i++){
  var insideP = inside[i].getElementsByTagName('span');

  if(insideP.length == 0){
   var myspan = document.createElement('<span>')
   inside[i].appendChild(myspan);
   myspan.innerHTML = myarray[i];
  } 
  else {continue}
  break;  
 }
}

<div id="userdetails">
    <p>Fisrst Name : </p>
    <p>Last Name : </p>
    <p>Age : </p>
    <p>Email : </p>
    <p>Address : </p>
</div>
<input type="submit" onclick="getdetails()" value="Submit">

Initially we need to reach the <p> elements then going to add <span> element inside the <p> p tag. After that, the data need to be pulled here correspondingly. Finally having the correct data set.

var userdetails identifies 'userdetails' id. Then we're getting the paragraph tags by using getElementsByTagName, this has identified as inside. condition used whether the span tag there or not(insideP[i]). Initially there will be no span tag, so the span added.

myspan.innerHTML = myarray[i]; For every count of span added, the data from myarray will be pulled here(myarray[i]).break; is used to stop the action, when we click again the action will be continued.

Access child Elements - Part 2

Accessing child elements can be done in many ways. We already discussed about getElementsByTagName. Now i worked and refined another script by using childNodes. Below is the script:

<script type="text/javascript"> 
rootelement = document.getElementById("ulparent");
for (i=0; i < rootelement.childNodes.length; i++) 
{
node = rootelement.childNodes[i];
if (node.nodeName=="LI") 
{
node.onmouseover=function() {
this.className+="over"; 
}
node.onmouseout=function() { 
this.className=this.className.replace("over", ""); 
}
}  
}
</script>

In above script we're going to add over class to the list elements when we mouse over on that. Initially we'll get total child nodes by describing rootelement.childNodes[i]. The condition node.nodeName =="li" enables the mouseover and mouseout event. In both events we are adding and removing class names correspondingly.