How to create "Roll Over" pictures

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's get started! This tutorial will be focusing on some special features for our blog posts, so the topic for today is: how to create the roll over pictures. This will definitely help if you want to showcase "before" and "after" pictures or close-ups of your favorite crafts:) And more important, you can do this trick in many ways, but today we'll present you just two of them that use the same code but apply it differently.



1. The easier way to achieve this is to easily sign your blog's "Dashboard" and then go to "Design" and hit the "Page Elements" tab. Now go ahead and add an HTML/Java Script gadget on either sidebar, and then skip to step 3 of this tutorial.


2. The more complicated way to achieve this, is by signing in your blog's "Dashboard" and then go to "Design" and make sure you're on the "Edit HTML" tab. Once you're there, scroll down and find the "body" end tag exactly as shown in the picture below:

</body>


3. Now if you chose the first way to do this trick, simply place this code in the HTML/Java Script gadget you added, or if you chose the other way, then place the same code immediately above the "body" end tag, and don't forget to press the "Save"/"Save Template" button, at the end:

<script type='text/javascript'>
//<![CDATA[

function pat_getByClass(c){
ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}
return ems;
};

function ps_flipit(){
var c = pat_getByClass('flipit');
for(i=0;i<c.length;i++){
c[i].firstChild.onmouseover=function(){
this.style.display='none';
this.parentNode.lastChild.style.display='';
};
c[i].lastChild.onmouseout=function(){
this.style.display='none';
this.parentNode.firstChild.style.display='';
};
}
}

ps_flipit();

//]]>
</script>


4. From this step forward, the next steps are the same regardless the way you chose to do this trick. So, now you need to go back to "Posting" and then click the "New Post" button and make sure you're in the "Edit Html" writing mode instead of "Compose".



5. Now upload your first picture normally. Instead of the picture itself you will see a weird long string of script because you're in the "Edit Html" writing mode. That's ok. Now upload your second picture the same way, but be aware that its string of script will appear up first on your writing editor, so you need to cut it and paste it after the first string of script you uploaded. Now you have the correct order. Don't switch between "Edit Html" mode and "Compose" mode during writing your post or else your coding won't apply and you'll need to start the uploading pictures process again.


6. Now comes the last step before you publish your post. You need to post this piece of code BEFORE the codes of the pictures:

<div class="flipit">

7. Then place this piece of code AFTER the codes of the pictures:

</div>

8. And lastly, add this feature to the SECOND picture's code right after the "<a" tag like in the image shown above:

style="display:none"


9. Now you hit "Publish Post" and go back and you will see your first picture up front and when you roll your mouse over it, the second one will show up. You can use this feature for a close up of your initial picture or to showcase some beautiful "before" and "after" shots.

There's one thing you need to know: you can post only two picture at once using this method: one that will be the initial front picture and one that will show up once you roll over it. If you want to post multiple roll over pictures, you need to repeat steps 4 to 8.
But I must say that using this special effect feature will be a super hit with your readers, so hope this little tutorial will help you display your pictures in a more organized way with a better impact on your readers:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blog Tips button at the top of the page for more tutorials, tips to improve your blog's traffic and other how to's, all presented on different levels, from beginners to the more advanced ones!
Have a great week everybody!