C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Communities   Interview   Jobs   Projects   Offshore Development    
Silverlight Tutorials | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Revenue Sharing |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...

New Feature: Community Sites: Create your own .NET community website and start earning from Google AdSense ! It's Free !






Thumbnail image on mouseover


Posted Date: 20 Sep 2008    Resource Type: Code Snippets    Category: Javascript

Posted By: Raju.M       Member Level: Gold
Rating:     Points: 10



like templatemoster or matrimonil site when on mouseover on image shows its thumbails using javascript
eg: site- http://www.templatemonster.com/
check this link u can get image thumbail image when mouseover on displayed template

to check this save this html code. then place a image "image1.jpg" in your root folder.
some tags are not allowed here u can




img id="image11" src="image1.jpg" alt="" onmouseover="XandY();"

div id="testdiv" align="center" style="position:absolute; left: 201px; top: 151px; background-color: #CC6633; layer-background-color: #CC6633; border: 5px solid #000000;display:none;"


SCRIPT file


function XandY()
{
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var returnX;
function getMouseXY(e)
{
if (IE)
{
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else
{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < document.getElementById("image11").width)
{
var w=tempX+document.getElementById("image11").width;
var h=tempY+document.getElementById("image11").height;
document.getElementById("testdiv").style.left=w;
document.getElementById("testdiv").style.top=h;
document.getElementById("testdiv").style.display="inline";
var width=(document.getElementById("image11").width)*2;
var height=(document.getElementById("image11").height)*2;
document.getElementById("testdiv").innerHTML="<img src='image1.jpg' alt='' width='"+width+"'height='"+height+"' />";
}
if (tempX > 172)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}
if (tempY > document.getElementById("image11").height)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}

}
}
SCRIPT END






For more details, visit http://raju.rajum.googlepages.com/imageThumbnailonMouseOver.html




Responses


No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks      
Popular Tags   What are tags ?   Search Tags  
Thumbnail image on mouseover  .  Moving moseover image  .  Javascript mouseover image  .  Image mouseover show image thumbail  .  

Post Feedback


This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.
Next Resource: Check month, year, leapyear
Previous Resource: Add and Remove from one Listbox to another ListBox
Return to Discussion Resource Index
Post New Resource
Category: Javascript


Post resources and earn money!
 
Related Resources



dotNet Slackers   BizTalk Adaptors    Web Design

Help Desk

Contact Us    Privacy Policy    Terms Of Use