PDA

Click to See Complete Forum and Search --> : Mouseover Images

Mr Robot
09-30-2004, 08:05 PM
Most websites use thumbnails that you have to click on to get a larger image, usually in a new window. While at www.thescreensavers.com I noticed that just moving the mouse over an image a larger image appeared, as long as the mouse was over the smaller image. Looking at the source code the only thing I could make out was Javascript.
My question is can this be done with Javascript and if so how.
It is not on all of their images, but on most of their article images.
age13kid
09-30-2004, 08:17 PM
i need to ask something. what do u mean? or you wanting to know how to do mouse over images? or do u want to know how they did it
Mr Robot
09-30-2004, 08:46 PM
I want to know how to make a larger image appear just by moving the mouse over the smaller image.
age13kid
09-30-2004, 08:49 PM
ok do u want it to happen on the spot or in a new window?
Mr Robot
09-30-2004, 09:11 PM
On the spot
age13kid
09-30-2004, 09:29 PM
no where have i looked did i find a code able to do that
javaNoobie
09-30-2004, 09:33 PM
Use both css and javascript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.enlarge{
height: 300px;
width: 200px;
}
</style>
<script type="text/JavaScript">
</script>
</head>
<body>
<img src='sunset.jpg' height="150" width="100" alt="Sunset" onmouseover="this.className='enlarge'" onmouseout="this.className=''">
</body>
</html>